数字总监

Recreate this exact full-viewport portfolio landing page — pixel-perfect match.

═══════════════════════════════════════
TECH / STACK
═══════════════════════════════════════
- React + TypeScript + Tailwind CSS + Vite
- Icons: lucide-react (`Play`, `Menu`, `X`)
- Single full-screen page: `h-screen w-full overflow-hidden`
- Root: `relative h-screen w-full overflow-hidden bg-black text-white`

═══════════════════════════════════════
FONTS (exact)
═══════════════════════════════════════
Load in <head>:

1) Inter (Google Fonts) — body/default:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

2) basis33 (pixel/bitmap monospace) — for `.font-pixel`:
<link href="https://db.onlinewebfonts.com/c/d08bafd725a4cfc309efb5a88e0b63a5?family=basis33" rel="stylesheet">

CSS:
- body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- .font-pixel { font-family: 'basis33', monospace; }

Where basis33 (font-pixel) is used:
- "ROBERTS" under ADAM
- "ENGINEERING" under DESIGN &
- Brand blurb under name
- Labels "What I Do" and "Services"
- Words "UNEXPECTED" and "EXPERIENCES" inside the hero headline (1.25em size)

Where Inter is used:
- Everything else (nav, ADAM, DESIGN &, body copy, showreel button, awards, footer)

Page title: "Adam Roberts - Design & Engineering"

═══════════════════════════════════════
BACKGROUND VIDEO (exact URL — do not substitute)
═══════════════════════════════════════
Full-bleed background <video>:
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260725_114042_d2ed2a89-f2fa-449b-9609-da456344257b.mp4"

Attributes: autoPlay muted loop playsInline
Classes: absolute inset-0 h-full w-full object-cover lg:scale-[1.2]
(On large screens, video is scaled 120% for a slight crop/zoom)

All UI sits above video at z-10. No dark overlay — white text over the video.

═══════════════════════════════════════
LOGO (exact SVG)
═══════════════════════════════════════
White geometric “GP / Grilled Pixels” mark, 28×28, viewBox="0 0 256 256":
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none">
  <path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" />
</svg>
Used in top-left navbar AND inside the mobile menu header.

═══════════════════════════════════════
LAYOUT STRUCTURE (top → bottom)
═══════════════════════════════════════
Outer content wrapper (above video):
relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14

── 1. NAVBAR ──
flex items-center justify-between py-6

Left: logo SVG
Right desktop (md+): horizontal links, gap-8, text-sm tracking-wide
  ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK
  Each: href="#", hover:opacity-70 transition-opacity
Right mobile (<md): hamburger button (Menu icon size 24), p-2 hover:opacity-70

── 2. FOUR-COLUMN META GRID ──
mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8

COL 1 (left):
  h2 text-lg md:text-xl tracking-wide leading-tight
    Line1: "ADAM" (font-normal Inter)
    Line2: "ROBERTS" (font-pixel text-2xl md:text-3xl)
  Then: * asterisk at text-[10px] text-white/50 mt-3
  Then brand blurb font-pixel mt-1 text-xs text-white/60 leading-relaxed, line breaks EXACTLY:
    Grilled Pixels is my
    personal brand - I came up
    with it in 2004 based on
    "cooking up ideas"

COL 2 (text-right on mobile 2-col, text-left on lg):
  h2 same sizing
    Line1: "DESIGN &" (Inter font-normal)
    Line2: "ENGINEERING" (font-pixel text-2xl md:text-3xl)

COL 3:
  Label: "What I Do" — text-base tracking-widest text-white/50 uppercase mb-3 font-pixel
  Body: text-sm text-white/90 leading-relaxed max-w-[220px]
    "I create the top 1% of experiences for brands and digital products"

COL 4 (text-right on mobile 2-col, text-left on lg):
  Label: "Services" — same label styles as What I Do
  ul text-sm text-white/90 leading-relaxed space-y-0.5:
    - Branding
    - Creative Direction & Strategy
    - UX/UI Design
    - Web Development (React/Nextjs)
    - 3D, WebGL / Photography
    - Video & Animation

── 3. FLEX SPACER ──
<div className="flex-1" />  ← pushes bottom block to viewport bottom

── 4. BOTTOM SECTION (pb-4) ──

ROW A — grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end

LEFT — Hero headline:
  h1: text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]
      tracking-wide uppercase font-normal
      inline style: lineHeight: 0.72
  Exact line breaks:
    I BRING THE
    UNEXPECTED TO     ← "UNEXPECTED" is font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline
    BRAND & DIGITAL
    EXPERIENCES       ← "EXPERIENCES" same pixel treatment as UNEXPECTED

RIGHT — column flex flex-col gap-4 sm:gap-6 justify-end:
  A) PLAY SHOWREEL button (self-start):
     flex items-center gap-3
     border border-white/30 px-6 py-3
     backdrop-blur-sm bg-white/5
     hover:bg-white/10 transition-colors
     Play icon: lucide Play size={14} fill="white"
     Label: text-sm tracking-wider "PLAY SHOWREEL"

  B) Awards row (self-start on mobile, lg:self-end):
     flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80
     Three dark chips, each: bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2
       1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs
       2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs
       3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs

ROW B — footer strip:
  mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4
  Left: text-xs text-white/60
    "Open to freelance, contract or full-time. "
    then link "Schedule a call" — text-red-500 hover:text-red-400 transition-colors href="#"
  Right: text-xs text-white/60 sm:text-right
    "5 full cases • 82 archive fragments • 22 catalog items"
    (use • or • between parts)

═══════════════════════════════════════
MOBILE FULLSCREEN MENU
═══════════════════════════════════════
State: menuOpen boolean

Overlay: fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col
Transition: transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  open:  opacity-100 pointer-events-auto
  closed: opacity-0 pointer-events-none

Header: flex items-center justify-between px-6 py-6
  Left: same logo SVG
  Right: X button (size 24) closes menu — p-2 hover:opacity-70

Nav: flex flex-col items-center justify-center flex-1 gap-8
  Same 6 links as desktop, text-2xl tracking-widest
  Staggered entrance when opening:
    transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
    open:  opacity-100 translate-y-0
    closed: opacity-0 translate-y-4
    transitionDelay when open: `${100 + i * 60}ms` (i = 0..5) → 100,160,220,280,340,400ms
    when closed: delay 0ms
  Clicking a link closes the menu

═══════════════════════════════════════
ANIMATIONS / INTERACTIONS SUMMARY
═══════════════════════════════════════
1. Background video: continuous autoplay loop, muted
2. Nav link hover: opacity → 70%
3. Showreel button hover: bg white/5 → white/10
4. Schedule a call hover: red-500 → red-400
5. Mobile menu overlay: 500ms cubic-bezier(0.16,1,0.3,1) fade
6. Mobile menu links: staggered fade+slide-up (60ms steps, start 100ms)
7. Hamburger / close icon hover: opacity 70%
8. NO scroll (overflow-hidden, h-screen) — single locked viewport composition
9. NO page load entrance animation on desktop content (static on paint)
10. Video scales to 1.2× at lg breakpoint

═══════════════════════════════════════
COLOR TOKENS
═══════════════════════════════════════
- Page bg: #000000 (black)
- Primary text: #ffffff
- Muted: white/90, white/80, white/60, white/50
- Accent link: Tailwind red-500 (Schedule a call)
- Award chips: #0B0B0B
- Showreel button: border white/30, fill white/5, blur
- Mobile overlay: black/95 + backdrop blur

═══════════════════════════════════════
RESPONSIVE BREAKPOINTS (Tailwind defaults)
═══════════════════════════════════════
- < md: hamburger + 2-col meta grid; awards/showreel stack under headline
- md+: desktop nav links
- lg+: 4-col meta grid; 2-col bottom (headline | showreel+awards); video scale 1.2
- sm/md/lg/xl: progressive padding and headline size as listed above

═══════════════════════════════════════
DO NOT
═══════════════════════════════════════
- Do not add cards, purple gradients, cream backgrounds, or extra sections
- Do not change copy, award counts, or line breaks
- Do not replace the CloudFront video URL
- Do not use Inter for pixel words — must be basis33
- Do not add scrolling or a second viewport section
```