Skip to content
WM. Willian Minatto, home
Back to work

02Editorial Web ExperienceLive

Verstappen

Motion-driven editorial experience exploring Max Verstappen's career through scroll-led storytelling and current Formula 1 data.

Home screen of the Verstappen fan experience: a driver in a navy race suit and helmet raising both arms, behind the word VERSTAPPEN in large type and an orange number 3
Role
Design & Development
Year
2026
Stack
Next.js, React, TypeScript, Tailwind CSS, GSAP, ScrollTrigger, Lenis, Vitest, Vercel
Source
Private

Overview

Verstappen is an unofficial, fan-made web experience built around motion, editorial storytelling and Formula 1 data. It is a personal project: designed, built and deployed independently.

It follows Max Verstappen's career through a sequence of full-screen sections: his trajectory, career-defining races, the four championship helmets, the numbers, and life beyond Formula 1.

Rather than a conventional information site, the aim was a narrative one, closer to a digital magazine than a dashboard, where typography, photography, motion and data all carry part of the story.

Problem

Balancing an animation-heavy visual experience with a front-end that stays maintainable, responsive and reliable. Motion had to serve the narrative without getting in the way of reading, and the current season data had to hold up even when the external API does not.

Solution

Built on the Next.js App Router with strict TypeScript, as independent sections with GSAP, ScrollTrigger and Lenis driving the motion. Editorial content is kept apart from the Formula 1 data, which is fetched on the server through a dedicated layer that normalises responses, enforces timeouts and falls back gracefully when data is partial or missing.

Result

A production site on Vercel that combines scroll-led storytelling, current Formula 1 information and responsive motion design, with unit tests on the F1 data layer, a public image credits page and basic metadata.

Features

  1. Motion: GSAP, ScrollTrigger and Lenis coordinate section entrances and a scroll-driven sequence that plays in both directions, with a simpler version on small screens.

  2. Season data: the next race, championship standing, points, wins and last result come from the Jolpica F1 API. They are fetched on the server, cached there and revalidated at most every 30 minutes. No database, cron job or client polling.

  3. Fallbacks: each request is handled independently, with a 6-second timeout, and responses are normalised into typed models before reaching the interface. Partial data still renders, with a fallback for what is missing; with no season data the status strip is omitted, and the build does not depend on the API being reachable.

  4. Testing: 26 unit tests with Vitest cover parsing, selection logic, formatting and fallback behaviour in the F1 data layer.

  5. Accessibility: every animated section has a reduced-motion path. Pinned and scroll-driven sequences become static layouts, and smooth scrolling is disabled. Keyboard navigation, visible focus and touch-sized targets are also covered.

  6. Production: deployed on Vercel with automatic deployments from main, with basic metadata, Open Graph tags, sitemap, robots.txt and a public image credits page.

Unofficial fan-made project created for portfolio and educational purposes. Not affiliated with or endorsed by Max Verstappen, Red Bull Racing, Formula 1 or the FIA.