The Building Blocks of This Site

Colours live in exactly one place: as CSS variables on the root selector, overridden once more for the dark theme. Tailwind reads them through rgb(var(--surface) / <alpha-value>), so opacity modifiers like bg-surface/80 keep working.

The payoff shows up in component code, which reads bg-surface text-text — not a single dark:. There used to be 54 of those prefixes, and every one of them was a place where an element could be correct in only one theme.

The values are not picked by feel. The worst contrast for body text sitting over the coloured fields in the background is 6.7:1 in dark and 7.5:1 in light — measured at the brightest point of each field, not at its average.

The old version had enlarged the Tailwind scale globally: text-base was 19px instead of 16px. On a desktop you barely noticed; on a phone every page felt inflated and headings broke in awkward places.

The standard scale is back, and only the three display sizes are fluid: clamp(2.25rem, 6vw, 4rem) for a page heading. Between a phone and a large monitor it scales continuously, with no rule per breakpoint.

The monospace face carries dates, categories and small labels. It marks what is technical and keeps it visually separate from running text.

A portfolio needs no more than three button variants: one for the primary action, one for anything of equal weight, one for navigation in the header.

All three carry min-height: 44px. That is the size a fingertip reliably hits — the usual cause of mis-taps on mobile is targets that are too small, not text that is too small.

A single rule defines the focus ring for everything interactive, fed from --ring. Anyone navigating by keyboard sees the same ring everywhere, and no new component can forget it.

A card carries a title, two or three sentences of outcome, the stack as chips, and the links. Nothing more — someone scanning projects reads the title and the stack; the rest is supporting detail.

At first the leading tile was twice the size of the others. It looked more dynamic, but it asserted a ranking that does not exist: every project here is equally real. Now all tiles are the same size, the grid is calm, and order alone sets the emphasis.

On hover only the border colour changes. Cards that lift or grow make the text jump, and with six tiles side by side that turns restless fast.

The technologies first sat next to the projects in the same row. That read as if the two belonged together, when they answer a different question: not what did I build, but what do I work with.

Now they have a section of their own, one card per category: DevOps, databases, backend, frontend, tooling. Grouping says more than an alphabetical list, because it makes the centre of gravity visible.

Deliberately without stars or percentage bars. Ratings like that claim a precision nobody can verify; the context comes from the experience section and the projects.

Experience is the only place where order genuinely carries meaning, so it gets the only line on the page.

Date ranges sit in monospace above each role. They are short enough to fit on one line at any width, and the fixed character width keeps them aligned down the column.

The dots sit on the line and are hidden from screen readers: they carry no information the text does not already state.

Because everything lives on one page, there are three ways in. The header leads to sections and to the CV. Below 768px the links move into the menu; the brand, theme, language and the CV button stay visible.

On the right, a column of dots marks the current section. An IntersectionObserver watches a narrow band around the middle of the viewport — without that band the marker jitters between long sections. It appears from 1024px up; below that it would only be in the way.

Every anchor target has scroll-margin-top. Without it the sticky header parks itself exactly over the heading you just jumped to.

Its predecessor was a starfield: 654 lines of canvas, a draw loop on every page, noticeable on battery. A radial-gradient pattern replaced it as a dot grid — plain CSS, no draw loop.

Above it, three colour fields drift slowly across. Only transform is animated, so the compositor does the work and layout and paint stay untouched. In the dark theme they use deep rather than light hues: they tint the ground without lifting it, and the text over them stays readable.

The grid shifts slightly as you scroll, and a soft glow follows the pointer — the latter only under pointer: fine; on touch devices the listener is never registered. Under prefers-reduced-motion: reduce everything holds still.