Leica Florian Robert

<< Back to projects

My website V3 — case study

Role: Design and development. Year: 2026.

Website: leicaflorianrobert.dev

The redesign of my portfolio: a site that doesn't just show projects, but tells first-hand the move from the old web to modern rendering.

You are viewing this case study with the Legacy engine. To see it as it was designed, enable native rendering below.

Clear, but quiet

V2 was tidy and functional: a light, warm palette, wordy copy, no previews of my work on the home page. It presented the services well, but didn't show what I can do.

The goals for V3: a more modern, higher-contrast look, more images, and an identity that speaks like a developer.

The Dual Engine

The site opens in Legacy mode: Times New Roman, underlined blue links, a black-and-white photo in a grey frame. A 90s hypertext.

A button, Enable Native Rendering, starts a short boot sequence with a glitch and leads to the Native version: dark, monospaced, with orange accents. The choice is remembered across pages.

Few elements, lots of contrast

A soft black instead of pure black, a single accent colour and a single typeface: JetBrains Mono, from the headline to the form.

• #111113 background
• #18181B surface
• #EDEBE6 text
• #FF5B14 accent

The new logo: lowercase initials with a cursor, like a terminal command. It replaces the FR monogram with the two flipped Ls.

Motion and room to breathe

• Spring-curve hover on cards and buttons instead of linear transitions.
• Subtle parallax on the photo, glow and code snippet in the hero.
• Generous vertical spacing between sections, a 1120px column.
• Projects shown in laptop and smartphone mockups, services with images.
• On mobile, the services become a horizontal slider.

Under the hood

• A static site. Nuxt generates every page as ready-made HTML, in all three languages: there's no server to keep running, and pages arrive instantly.
• Block-based content in Directus. Every page is a sequence of blocks (texts, galleries, timelines, projects) that I put together from the panel. When content changes, Directus rebuilds and publishes the site by itself.
• Every block exists twice. A Legacy and a Native version read the same data: switching mode doesn't reload the page, it only changes how it's drawn.
• It always starts in Legacy. The server prepares the '90s version, simple and readable anywhere; Native switches on in the browser, and the choice is remembered for the next visits.
• Animation in moderation. Widgets, timers and the ASCII portrait stop when they leave the screen, so as not to waste resources, and smooth scrolling is on only in Native.
• The CV generates itself. On every publish a headless browser prints the CV to PDF in all three languages; if it doesn't fit on one page, publishing stops instead of putting a cut-off CV online.

Directed by me, written with AI

The design took shape in Claude Design; the code and the copy, in three languages, were written by Claude Code under my direction, with the Superpowers method: every change starts from a plan, goes through my approval, is checked in the browser in both modes and ends with a small, readable commit.

Directing an AI is a craft of its own: you need to know what to ask for, recognise a fragile solution and say no at the right moment. The goals, the architecture and the content are mine, and so is the last word on every step. Many ideas come from me, like the experience timeline taken from the old site, which stays put as you scroll and lights up the year you're reading; just as many corrections, from the rhythm of the spacing between sections to the data aligned with my CV.

It isn't a site generated with one click, but the sum of many choices, each one weighed and decided by me.

More room for who I am

Compared with V2 the site says much more, and says it as a developer.

• More content: services, projects, experience and my story, in three languages.
• Projects up front: those with a dedicated case study have a page that tells the work in full, reachable from the home page.
• About me and my story stand out more, with a page that tells where I come from.
• A look that speaks about me: Legacy mode recalls the web I started from, Native the one I work in today. Even my oldest experience becomes part of the story.
• More room for work experience: the timeline goes through it year by year.