Nathan Dallaire: scroll-indexed developer portfolio

Build a two-theme personal portfolio website for a freelance frontend developer. Dark charcoal for the work, warm off-white for the About page, with a diagonal wipe between the two. Minimal UI, type-led, scroll-indexed. Desktop first, fully responsive. Content lives in a small CMS-like data file so projects can be added without touching layout.

DESIGN SYSTEM
- Themes as CSS variables on body[data-theme]. Dark: --bg #141414, --fg #F9F7F7. Light: --bg #F9F7F7, --fg #141414. Secondary text uses --fg at 55% opacity.
- Page padding: 4.3rem on desktop, 2rem under 900px. Vertical padding 3rem.
- Fonts (Google Fonts): "Outfit" 600 for display type (project names, project titles, the giant About headline); "Inter" 500 for everything else, always uppercase, letter-spacing 0.04em, 11px to 12px.
- Display sizes: project list 6rem on desktop, 4.5rem under 900px, line-height 1. Project title in project view: 6rem. About headline: clamp(160px, 22vw, 340px), line-height 0.85, two words with the photo pile between them.
- Film grain: a fixed full-screen pseudo-element with a tiling noise PNG at 6% opacity, animated with @keyframes grain over 6s using steps(10) that jitters the background position.
- Cursor: hide the native cursor on desktop, draw a 10px --fg dot that follows the mouse with a 0.15s ease; scale to 3x over links and project names.

HEADER (fixed, both themes)
- Top-left: a hand-drawn signature SVG at 56px wide, then a vertical list PROJECTS, ABOUT, CONTACT in 11px uppercase; a 6px dot sits left of the active item.
- Top-right, right aligned, two lines: FREELANCE FRONTEND and AVAILABLE Q1 2027 (editable in settings).
- Right edge, vertically centered: a 24x72px rounded pill with up and down chevrons that acts as the scroll indicator; chevrons pulse gently.

LOADER
- Full-screen off-white overlay. Center: a counter from 0 to 99 in 11px uppercase Inter. Behind it, a stack of 12 to 24 PNG doodle frames flips every 80ms. At 99 the overlay performs a diagonal clip-path wipe (polygon from the bottom-left corner) over 0.9s, ease power3.inOut, revealing the dark theme.

PROJECTS (home, dark theme)
- Data: 8 projects, each with title, brand, year, role, agency, awards (multi-line text), link, cover (16:9), and 4 to 10 media items (video url + mobile url, or image with aspect ratio).
- Layout: left column at page padding holds the 8 project titles stacked in Outfit 6rem. The ACTIVE title is full --fg; titles one step away are 55% opacity, two steps 35%, three or more 18%. The stack translates vertically so the active title always sits at the vertical center.
- Center column, 35vw wide (75vw under 900px), horizontally centered: the cover media for every project stacked vertically with 1.5rem gaps, translated in sync with the list so the active cover is centered. Videos autoplay muted, loop, playsinline, and pause when off screen.
- Input: wheel, touch drag and arrow keys change the active index by one step with a 0.8s power3.out tween; no native scrollbar. Clicking a title or cover opens the project view.

PROJECT VIEW (no route change)
- Transition: the list slides left and fades, the cover column fades, then a horizontal media strip slides in from the right over 0.8s.
- Media strip: items 47vh tall (29vh under 900px), width = height x aspect ratio, 1.5rem gaps, starts at page padding, scrolls horizontally with wheel and drag. Videos autoplay muted.
- Top-left: ROLE: {role} and AGENCY: {agency} in 11px uppercase. Top-center: a 52px round outlined BACK button with a left chevron and the word BACK beside it. Top-right, right aligned: one line per award.
- Bottom-left: the brand name as an 11px eyebrow above the project title in Outfit 6rem, with the scroll pill to its left. Bottom-right: VIEW SITE linking to the project URL (hide if none).
- If a project is flagged password protected, open a small centered modal (dark card, 11px uppercase copy, a password input and CLOSE) instead of the strip.

ABOUT (light theme)
- Entering About triggers a full-screen diagonal wipe from dark to light (two stacked full-screen layers, clip-path polygon animated over 0.9s). Leaving reverses it.
- Center: a giant two-word headline in Outfit 600, e.g. THAT'S IT., set as two separate words so the photo pile sits between them.
- Photo pile: 6 to 8 photos (mixed landscape and portrait, 420 to 640px wide) stacked with random rotations between -6 and 6 degrees and small offsets, 12px drop shadow. On scroll or every 4 seconds the top photo slides to the back with a 0.6s ease and the others shuffle forward. Each photo carries a tiny uppercase caption ("TOKYO, JAPAN").
- Bottom-left: two-line invitation in 11px uppercase ("I LOVE TO COLLABORATE AND KEEP BUSY. HAVE SOMETHING COOL TO WORK ON? MESSAGE ME.") with MESSAGE ME underlined as a mailto link, then the email on its own line.
- Bottom-right: a four-line bio, 11px uppercase, max 34ch wide.
- Stickers: 6 to 8 tiny uppercase opinion lines with an emoji ("TANK TOPS = 🤘") absolutely positioned around the page, each drifting 20px on a slow sine loop and parallaxing slightly with the mouse.

CONTACT
- The nav item scrolls to the email line on About (navigating to About first if needed) and briefly highlights it.

RESPONSIVE
- Under 900px: header items stay, project titles 4.5rem, cover column 75vw, project strip items 29vh, About headline wraps to two lines with the pile overlapping the second word, bio and invitation stack at the bottom.
- Respect prefers-reduced-motion: disable grain animation, pile shuffling, sticker drift and the loader frame flip; keep wipes as simple fades.

CONTENT
- Use your own name, your own signature SVG, your own project covers and clips, and your own travel photos. Do not reuse any imagery or copy from existing portfolios. Placeholder project names: Project One through Project Eight, with brand, year, role, agency and awards fields filled with your own data.