Studio › Candidates › Yohann Lesueur › /guide ← Back to the candidacy

How this was built.

Full transparency — because the posting asks for AI-tool fluency with known limits, and this page is where I show both.

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.
  • The analytics chart is hand-built SVG with animated path drawing; sparklines and thumbnails are pure CSS gradients — zero images on the page.
  • 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.