Rebuilding this site

The reason for this site is dull. The university page it replaces is being retired, and a publication list needs one address that survives the next reorganisation.

It is built with Astro from content collections, publications and notes, which compile to static HTML at build time. No backend, no database, and nothing on the site needs JavaScript to work. The map on the homepage comes out of the same collections, so it grows on its own as entries are added instead of being redrawn by hand.

A channel system, not a template

Before starting I looked at a handful of well-regarded personal and lab sites — piccalil.li, labora.com, cloudflare.com among them — and found the same recipe everywhere: a slab or serif display face against a sans body, one warm accent colour, typography carrying the whole page. None of them had a visual system of their own, just well-executed type layouts. That gap became the actual design problem.

The site’s structure is parallel channels running over time, interrupted by a bottleneck. It comes straight out of the two fields it covers: in the cognitive work, several task streams competing for limited capacity, with interference where they collide; in energy, the standard way to plot load or generation by source over time. The same shape carries both without forcing them into one topic. Everything sits on an 8-pixel module — channel height, block length, spacing — and the bottleneck, a single vertical line crossing every channel, appears at most once per screen. It marks a section break, and it’s the only place the page allows itself to look dramatic.

Colour with one job

Three accent colours mark the two fields plus anything that spans both — a brick red for cognition, a petrol blue for energy, a dark mustard for general or cross-topic content — against a warm, slightly cooled paper background and near-black text. The rule that keeps it from turning into an infographic: colour appears only in the small marks at the start of a block and in the bottleneck line, never as a text colour, a fill, or a background. An earlier, warmer palette had to go for a duller reason than the concept behind it: cream paper with brick red turned out to be close to the most common palette in this kind of design right now, however well the reasoning behind it held up.

Typography, self-hosted

Body text is Inter, headings are Zilla Slab, both openly licensed and shipped from this server — no Google Fonts, no external request, no cookie banner as a result. It’s a deliberately unglamorous pairing; both faces are heavily used elsewhere, a real trade-off against something more distinctive, made in favour of legibility over a signature look.

The one moving part

Everything else on the page is static, on purpose — it fits a page with no JavaScript and keeps it close to something you could print. The one exception is a small wind turbine on the homepage, animated as four fixed rotor positions cycled through in CSS, no interpolation, no script. A turbine that doesn’t turn says the opposite of what the page is trying to say before a visitor has read the first sentence, so it’s allowed to move. Nothing else on the page is.