Colophon

Stack

The site is built with Astro (external website) and published as static files: there is no framework on the client and no server. The styles are plain CSS, written with design tokens and cascade layers. Three small scripts run in the browser: the one that applies your display settings before the first paint, the settings panel itself, and the one that decodes the mark on the home page out of noise, once, after the page has loaded. Everything works with JavaScript off, and the mark is simply there.

Type

The text is set in Atkinson Hyperlegible Next (external website), designed by the Braille Institute for legibility, including for people with low vision. The large headings are set in Bricolage Grotesque (external website). Both are self-hosted as three subset files covering Latin and the punctuation the site uses, so nothing is fetched from a font service.

Colour and the focus ring

There are light and dark themes, drawn from one set of tokens, and every pairing of text and background in both is tested at a contrast of at least 7:1, with 3:1 for edges. One yellow does three jobs and no others: the primary button, the focus indicator, and the R on the card that appears when someone shares a link to the site. The focus ring is two colours, a band and a ring, so it shows on any surface, including the yellow button.

Budgets

The build enforces limits rather than reporting scores. JavaScript and CSS are each held to 30 kilobytes compressed, the three fonts to 150 kilobytes together, and the first view of the home page to 450 kilobytes including the portrait. In Lighthouse’s mobile test the largest contentful paint has to land within two seconds and the layout shift at or under 0.05. A change that goes over any of these is not published.

The checks

Before a change is published, a set of checks runs against the built site: axe-core over every page, and in both themes on a page of each kind, keyboard scripts for the skip link and the settings panel, a 44 pixel minimum on every control, the text-spacing override from the Web Content Accessibility Guidelines, line length, no requests to any other site, interaction latency, valid HTML, a hashed content security policy, and a check that the CV PDF is tagged and carries no phone number. Every check is broken on purpose once before it is trusted, so a check that could never fail is never relied on. A change that fails a check is not published.

Fonts and privacy

The site makes no requests to other sites: no analytics, no cookies, no tracking of any kind, and no font service, because the fonts are self-hosted. Your display settings are kept in your own browser and sent nowhere. A content security policy allows only this site’s own files, so nothing else can be loaded, even by mistake.

The mark

The monogram is my own, redrawn as one SVG file. The favicon is built from the same file, and a test checks that the social card’s copy of the R matches it, so the mark cannot drift between the header, the browser tab and a shared link. On the home page the whole mark is drawn again as text, a grid of fifty by thirty characters sampled from the same file at build time, and a smaller copy of that sits in front of the portrait while a large faint one sits behind it.