How this site is built

Astro builds one HTML file per page and language. Cloudflare serves the files; no code runs on a server.

Colour

GitHub’s colours: one blue accent, a yellow and a green band. Every colour is declared once for both themes with light-dark(). A test checks every text and background pair for WCAG AA contrast in both themes.

Type

Inter for text, Martian Mono for labels and figures. Both are served from this site, cut to the letters it uses, one file each, and requested with the page’s first bytes. A font that is not there within 100 ms is skipped for that page, so the text never jumps.

Motion

Lines are drawn and blocks appear as they scroll into view, in CSS. The name on the start page settles out of its own letters, a photograph opens from its place and a theme change fades, each with a small script. Pages change at once, without a transition. With reduced motion on, nothing moves across the screen or grows; fades and drawn lines stay.

Weight

A text page is five requests and 65 KB on a first visit: the HTML with the theme script inside it (4 KB), one stylesheet (10 KB), one script (1 KB) and the two fonts (50 KB). Photographs are converted to WebP at build time, and the browser picks the size its screen needs. A recording loads only when played.

Content

A project, a report, a note: one Markdown file, its facts in the front matter, checked against a schema at build time. An entry’s address is its title up to any colon: “Emler, solo” is /emler-solo.

Checks

Before every push: lint, types, unit and component tests, the build, checks of the built pages, and browser tests at four widths, the motions also on an iPhone’s engine. Speed is measured by hand with Unlighthouse.