Vertex Portfolio

# Vertex — Interactive 3D Portfolio Site

## Goal
Build a production-ready interactive 3d portfolio site called "Vertex". Overall vibe: a designer-engineer's playground — technical precision with a sense of wonder; the 3D is the interface, not decoration. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: void black #08090C base, off-white #EDEDEF text, single electric blue #3B82F6 for wireframes and active states
- **Typography**: mono display for headings (tracked-out uppercase), grotesque sans for body; coordinates and labels in 11px mono
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Hero** — full-viewport R3F canvas: a slowly rotating icosahedron wireframe (glow at vertices); headline overlays; drag to orbit, scroll to proceed.
2. **Work gallery** — each of 4 projects is a 'station': scrolling drives the camera along a spline to a new 3D primitive representing the project, while a DOM panel slides in with case details.
3. **About** — DOM section with the 3D canvas dimming to a corner; bio, skill meters rendered as thin animated bars.
4. **Lab** — grid of 3 experiments, each card has a small live WebGL preview (low-poly, paused until hover).
5. **Contact** — the centerpiece geometry reassembles into a torus; mail CTA and socials.

## Motion
- Scroll-linked camera via a damped lerp (never raw scroll mapping — always smoothed); section transitions crossfade wireframes over 600ms.
- Vertex glow pulses at 2s intervals; drag-orbit has inertia and clamped polar angles.
- DOM panels enter with clip-path reveals synced to camera arrival (±100ms tolerance).
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Strict perf budget: DPR clamp 1.5, no shadows, single directional light; target 60fps on mid-tier mobile — degrade to static SVG isometric fallback if WebGL unavailable.
- Preload the hero geometry only; station assets lazy-init on approach.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.