This site

Every page has a form of its own

A portfolio usually describes the work in words. Here a page is built like the work itself: home is a stage that scrolls down and sideways, Flow looks like Obsidian because that case was a base of notes, and Projects looks like an editor because I am a designer.

The price of that form is an engine per page. To keep them from growing together, pages are split by boundaries: a feature does not import another, and what they share moves down to ui/ and lib/. It is an ESLint rule rather than an agreement: an import across a boundary fails the check.

One component, four themes

Each page declares a theme, and the theme changes colours, typefaces and the look of controls. There are two modes, so eight combinations. A component knows nothing of themes: it reads tokens, and the values live in the theme's file. A new theme is one file.

A colour outside the contract does not compile: the Tailwind palette is off. A test measures contrast, and that is why a theme has two accents. accent is the exact brand colour for fills, accent-strong is the one for text. White on the product's blue gives 3.7:1, too little for text.

The theme is declared in the markup and read through :has(), so it is in the first HTML and the page does not flash. \Get in touch on home and [[Get in touch]] on Flow are one component, and the capsule changes its skin on the fly when a chapter of another theme arrives on home. The values below are read from the sample at every switch.

Design and code on one screen

The first screen is two layers: the design and its blueprint, with sizes and real lines of code. A test finds those lines in the sources, so the blueprint cannot drift from the code.

The layers match to the pixel: every block of the blueprint stands where the real one does, because the block itself lies inside it, hidden, and sets its size. The lens only opens the second layer with clip-path. It reaches the capsule too, though that lies outside the first screen: a script writes it the same variables in its own coordinates.

The first screen never waits for animation. The name is in the HTML and drawn from the first frame, and the assembly only wipes an outline off it. The real controls lie under the code layer and take the clicks, and keyboard focus lifts them above it.

A page change along the slash of the logo

Each tool has its zone: CSS does hover and focus, ViewTransition the page change, GSAP the scenes on scroll, canvas the graphs and lines. Durations and curves live in tokens, so an effect's code holds no numbers.

The first page change looked bad. A ViewTransition around the page makes one layer as tall as the page, 34,678 px on home on 03.11.2026, and the browser squeezes it to the screen. Now only the screen is captured, and the new page arrives along a 20.2° line, the lean of the slash in the logo. A step back in the capsule runs the other way.

In Firefox the shape stood at its end for the whole change: it does not interpolate a registered @property variable on these pseudo-elements. So the shapes are written out in polygon keyframes. WebDriver's screenshot does not show this, so that frame comes from a system capture of a real browser window.

14 checks, one command

python3 scripts/check.py runs before every commit, and CI runs the same command on a PR. Below is a real run of 03.11.2026: 300 unit tests and 257 browser tests.

The browser checks run behind a real Caddy, the same image digest as the server: addresses, headers, CSP, accessibility in both modes, scenes with reduced motion and without JavaScript. A check must be able to fail: the scaffold was tested with a deliberate import across a boundary and with text in the markup.

The decision first, the code next

Whatever is expensive to undo is written down before the code: the context, the options, the choice and when to revisit it. An accepted record is never rewritten, a different decision is a new record.

Static was not chosen to save money: the server had room. It is faster, more reliable and safer for the neighbour on that server, and the animation lives in the browser anyway. The repository has been open since the first commit, because what enters a history stays in old commits. The code is MIT, the texts and images are reserved, and GSAP stays a dependency that is never copied in.

A release is one switch

The site is a folder of files on a shared server, beside another product. A release touches neither Caddy nor the containers: a new build lands in a folder of its own, then one operation switches the current link. There is no downtime.

The last three releases are kept, and --rollback returns the previous one in a second. GitHub holds no key to the server: CI only checks, and a release runs from the laptop. That is a price paid on purpose: there is one developer, and the site can be rebuilt from any commit.

What is not done yet

The site is a work in progress, and the plan in the repository shows it.