Nick Ho: scroll-driven motorsport portfolio

Build a single-page portfolio website for a racing driver, inspired by broadcast graphics. Dark, black and white, one yellow accent. Desktop first, fully responsive.

DESIGN SYSTEM
- Background #0A0A0A, surfaces #171D14, primary text #FAFAFA, secondary text #C8C8C8, hairlines rgba(255,255,255,0.12), accent #FED60A used ONLY for the menu button, active states and the one primary CTA.
- Fonts: "Anton" from Google Fonts for all headings and big numbers (uppercase, letter-spacing 0.01em, line-height 0.9). "Inter" from Google Fonts for body and captions (14 to 16px, line-height 1.5).
- Type scale: hero number 18vw, section headlines clamp(48px, 8vw, 140px), manifesto paragraph clamp(28px, 3.2vw, 56px), captions 13px uppercase with 0.08em tracking.
- Spacing: 8px grid, section padding 160px top and bottom on desktop, 96px on mobile. Max content width 1440px with 48px side gutters.
- All photography is converted to grayscale with CSS filter: grayscale(1) contrast(1.1). Use free motorsport photos from Unsplash and a free looping race video from Pexels as placeholders.

GLOBAL BEHAVIOUR
- Smooth scrolling (Lenis or equivalent) and scroll-triggered animations (GSAP ScrollTrigger or Framer Motion).
- Fixed top bar: small monogram logo top left, a 40x40 yellow square menu button top right that opens a full-screen black menu listing ABOUT, HISTORY, GALLERY, CALENDAR, CONTACT plus Instagram and LinkedIn.
- Buttons: uppercase 13px, two stacked copies of the label; on hover the top copy slides up and the duplicate slides in from below (vertical text swap).
- Nine fixed vertical hairlines across the viewport behind the hero content.

SECTIONS, IN ORDER
1. Preloader: full black screen, the number 98 counts up with rolling odometer digits (each digit is a vertical strip 0 to 9 that slides), SKIP button bottom right, auto-dismisses after 2.5s with a fade.
2. Hero (100vh): full-bleed grayscale driver portrait on the left half, car close-up on the right half, both with a subtle slow zoom. Left edge: three stats stacked (98 Car number, 17 Career podiums, 14 Circuits raced), big numbers in Anton 56px with 13px captions. Right edge, right aligned: a short quote, Rotterdam / The Netherlands, 10+ Years in motorsport, 21 Years old. Center: the number 98 at 18vw. Bottom left: NICK HO (replace with the driver name) in Anton 72px and a 3-line intro paragraph. Bottom right: Next race label and the value TBA in Anton. A small SOUND ON toggle bottom center controls a muted background video.
3. About: a single manifesto paragraph in Anton uppercase, left aligned, max 9 lines (clamp 28 to 56px), each line fading up on scroll with a 60ms stagger. Below it a BECOME PARTNER button.
4. History: a pinned section where the user scrolls through five chapters (The Foundation, First Victories, Proving Speed, Going International, Pole position). Left column: year in Anton 120px. Right column: chapter headline and a 2-sentence paragraph that swaps with a crossfade. Behind it, a 3D racing helmet (use a free CC licensed glTF helmet model or, if 3D is not available, a 36-frame grayscale image sequence) that rotates 360 degrees in sync with scroll progress through the section.
5. Gallery: horizontal drag-to-scroll strip of 8 grayscale images (aspect 4:5, 420px tall, 24px gap). Replace the cursor with a 96px circular label reading DRAG while hovering the strip; the label eases toward the mouse position.
6. Media and articles: heading MEDIA & ARTICLES, then a list of 5 headline rows separated by hairlines. Each row is a link; on hover the row background lifts to #171D14 and an arrow slides in from the right. A 1/5 counter sits in the heading and updates as rows scroll into view.
7. Race calendar: heading RACE CALENDAR 2026, then 10 rows in a 3-column grid: RACE n - CIRCUIT NAME (Anton 24px), series name (Inter 14px, gray), date range (Inter 14px, right aligned, tabular numbers). Hairline dividers only.
8. Sponsor guide CTA: two-line question headline in Anton, one paragraph, one DOWNLOAD SPONSORGUIDE button (this is the one yellow filled button on the page).
9. Contact: heading CONTACT with a sub line, a 2x2 form (First name, Last name, Email, Message full width) with bottom-border-only inputs on black, SUBMIT button.
10. Footer: four columns (Menu, Socials, Contact, Legal) in 13px uppercase, plus a small Web Credits link.

MOTION RULES
- Every section headline reveals with a clip-path wipe from bottom over 0.8s, ease power3.out.
- Images scale from 1.1 to 1.0 as they enter the viewport.
- Numbers use the rolling digit strip wherever they appear.
- Respect prefers-reduced-motion: disable pinning, rolling digits and the helmet rotation, keep simple fades.

CONTENT
- Use placeholder copy in the same structure: a driver name, car number 98, three stats, one manifesto paragraph, five history chapters, five press headlines, ten calendar rows. Keep all headings uppercase.
- Do not copy text, photos or video from any existing site. Use the free assets listed in the Free assets tab.