How this was built.

The workflow

This site was designed and coded end-to-end by Claude Code (Fable 5), directed by Yohann Lesueur, then reviewed line by line like any code review. Three full critique passes on Playwright screenshots (desktop + mobile) before deploy. It is one of two variants built for this application (the other is a cinematic cut) on top of ten earlier portfolio sites in ten different design languages.

The concept

A candidacy shaped like the product it applies to: the layout borrows Studio's grammar (sidebar, content library, analytics, monetization) and you arrive at a curtain of light threads (a canvas of ~120 shimmering strands with traveling beads) that parts center-out to let you into the studio, and the centerpiece inside is a scrubbable career player: a decade rendered as a video timeline with chapters, because the fastest way to show product empathy for a video platform is to speak its UI language fluently.

Under the hood

• Static HTML/CSS/vanilla JS: no framework, no build step, so the craft is inspectable at View Source level.
• The entrance transition is choreography, not a library: threads sweep to the wings with an expo ease staggered from the center, the lobby copy exits upward, a 24fps timecode starts ROLLING, and the studio assembles behind (sidebar slide, staggered panels). Skipped automatically for anchor deep-links and prefers-reduced-motion.
• The player is a real slider (pointer + keyboard accessible, ARIA slider semantics) driving chapter state; the screen is an ambient canvas whose palette follows the chapter.
• That screen is not a video: each career chapter renders a bespoke procedural canvas scene (terminals, signal charts, agent swarms, wave patterns) tinted to the chapter's theme, and the whole sequence is skipped for users on prefers-reduced-motion.
• The analytics section demonstrates aggregation in real time: a year of sensor readings (525,600 points, seeded and deterministic) pre-computed into an interactive four-level pyramid (minute, hour, day, month). Canvas 2D rendering with runtime-measured meters (memory, points on screen, frame cost) that show a blank dash instead of a made-up number when a tab is throttled. Zero images, pure geometry.
• That year-view is a data-generation story: 365 days × 1,440 minutes, generated in the visitor's browser on first render, seeded so every visitor sees the same year. Twelve unit tests cover the generative model, the aggregation pyramid, and the NaN-aware outage handling. Every meter is measured at runtime, never hard-coded.
• Type: Instrument Sans (UI) + Fragment Mono (data). Palette anchored on Dailymotion blue #0066DC over studio black.
• Every animation respects prefers-reduced-motion; shipped as a static nginx container behind Traefik (automatic Let's Encrypt TLS), deployed by a GitLab CI pipeline.

The honest part

Everything factual on the main page comes from my CV and from a real, verifiable codebase (the clean-architecture refacto, the TDD harness, the aggregation strategy). Where I don't tick a box (GraphQL), the page says so plainly. AI helped me build faster; it didn't decide what's true.