Create ref_portfolio.html

ref_portfolio.html

@@ -0,0 +1,85 @@
+<!--
+  BuildAI Reference: PORTFOLIO
+  Upload to HuggingFace as: ref_portfolio.html
+-->
+
+<!-- == PATTERN 1: DARK MINIMAL DEVELOPER == -->
+<style id="po1">
+/* DARK MINIMAL DEVELOPER PORTFOLIO */
+/* bg:#0a0a0a font:Inter */
+/* nav: minimal fixed name/logo left nav-links right hire-me btn */
+/* hero: min-height:100vh flex align:center padding:0 max(24px,(100vw-1100px)/2) */
+/* hero grid: 1fr 1fr gap:80px align:center */
+/* eyebrow: 12px tracking:4px uppercase color:#6366f1 */
+/* h1: clamp(40px,6vw,72px) weight:900 tracking:-3px */
+/* type animation: border-right:2px solid #6366f1 animation:blink 0.7s infinite */
+/* skills: flex flex-wrap gap:8px */
+/* skill chip: padding:6px 16px bg:rgba(99,102,241,0.1) border:1px solid rgba(99,102,241,0.2) border-radius:999px 13px */
+/* work grid: 2 cols gap:24px */
+/* work card: border-radius:20px overflow:hidden position:relative aspect-ratio:16/10 */
+/* work card hover overlay: bg:rgba(99,102,241,0.85) transition:0.3s */
+/* project tags: padding:4px 10px bg:rgba(255,255,255,0.1) border-radius:999px 11px */
+/* social links: flex gap:16px */
+/* social icon: 40px w/h bg:rgba(255,255,255,0.05) border:1px solid rgba(255,255,255,0.08) border-radius:50% */
+</style>
+
+<!-- == PATTERN 2: CREATIVE COLORFUL == -->
+<style id="po2">
+/* CREATIVE COLORFUL PORTFOLIO */
+/* bg:#fff font:Space Grotesk */
+/* hero: bg:linear-gradient(135deg,#667eea,#764ba2) min-height:100vh */
+/* name: clamp(48px,8vw,100px) weight:900 tracking:-4px color:#fff */
+/* role pill: bg:rgba(255,255,255,0.15) border:1px solid rgba(255,255,255,0.3) border-radius:999px */
+/* project grid: masonry 3 cols */
+/* project card: border-radius:24px overflow:hidden transition:transform 0.3s */
+/* project card hover: translateY(-10px) rotate(-1deg) */
+/* category filter: flex gap:8px flex-wrap justify:center */
+/* filter btn: padding:8px 20px border-radius:999px border:2px solid #e5e7eb active:bg:#667eea active:border-color:#667eea active:color:#fff */
+</style>
+
+<!-- == PATTERN 3: AGENCY BOLD == -->
+<style id="po3">
+/* AGENCY BOLD PORTFOLIO */
+/* bg:#0f0f0f font:Plus Jakarta Sans */
+/* hero: position:relative overflow:hidden padding:140px 24px */
+/* big number bg: position:absolute font-size:300px font-weight:900 color:rgba(255,255,255,0.02) */
+/* name: clamp(52px,9vw,120px) weight:900 tracking:-5px leading:0.9 */
+/* word rotate: inline-block animation:rotateWord 3s infinite */
+/* @keyframes rotateWord: 0% translateY(0) opacity:1 / 45% translateY(-100%) opacity:0 / 55% translateY(100%) opacity:0 / 100% translateY(0) opacity:1 */
+/* available badge: flex align:center gap:8px dot:8px bg:#10b981 border-radius:50% animate:pulse */
+/* case study: horizontal scroll snap */
+/* case card: min-width:380px border-radius:24px overflow:hidden */
+</style>
+
+<!-- == PATTERN 4: MINIMAL LIGHT == -->
+<style id="po4">
+/* MINIMAL CLEAN LIGHT */
+/* bg:#fafafa font:Inter */
+/* nav: sticky bg:#fafafa/90 backdrop-filter:blur(10px) border-bottom:1px solid #f0f0f0 */
+/* hero: text-center padding:120px 24px */
+/* avatar: 80px w/h border-radius:50% ring:3px solid #6366f1 ring-offset:3px */
+/* name: 40px weight:900 tracking:-2px color:#111 */
+/* tagline: 18px color:#666 */
+/* work list: divide-y border-color:#f0f0f0 */
+/* work row: flex align:center justify:space-between padding:24px 0 */
+/* work row hover: bg offset highlight */
+/* year: 12px tracking:2px uppercase color:#999 */
+/* work title: 18px weight:600 color:#111 */
+/* work arrow: opacity:0 translateX(-5px) transition:0.2s */
+/* work row hover arrow: opacity:1 translateX(0) */
+</style>
+
+<!-- == PATTERN 5: DESIGNER EDITORIAL == -->
+<style id="po5">
+/* EDITORIAL DESIGNER PORTFOLIO */
+/* bg:#fff font:editorial serif (Playfair) + Inter */
+/* hero: full bleed bg:linear-gradient(to right, #111 50%, #fff 50%) */
+/* left: text padding:80px dark side */
+/* right: main project image light side */
+/* h1: clamp(36px,5vw,64px) weight:400 italic color:#fff */
+/* about: asymmetric layout image offset */
+/* project number: 80px weight:900 color:rgba(0,0,0,0.06) absolute */
+/* hover cursor: custom 40px circle that follows mouse */
+/* contact: full-bleed bg:#111 padding:120px text-center */
+/* email: clamp(24px,4vw,52px) weight:300 letter-spacing:-1px color:#fff hover:color:#6366f1 */
+</style>