Astro
This, the 2023 version of my digital abode is built with Astro (external site). I had originally I started making it with Eleventy (external site) (11ty) as I had used 11ty successfully for version 2 of my Code Notes (external site) project and loved its simplicity and speed, but whilst building the 11ty site I became more and more interested in Astro. After trying out the Astro blog example I decided to rebuild the site with it - even though I was nearly finished with that version but still hadn’t released it 🙃.
Astro is great because, like 11ty, it’s a static site generator, but .astro components use JSX syntax, which I’m very familiar with – I write React apps for a living so it was a natural fit. The component and data fetching model was extremely easy to pick up and I was able to rebuild the site in a few days.
n.b. The code for the 11ty version is on the eleventy-version (external site) branch on the zander.wtf (external site) repo.
Typography
Headings, the navigation and the footer are set in Alpha Lyrae (external site), a Helvetica-ish grotesque that Fontfabric drew for Vega Protocol. It comes with pixelated and glitched alternate glyphs (ss01 through ss05) - hover the letters in the intro on the home page to break them. Body copy is Mozilla Text (external site), the text face from Mozilla’s brand family, designed by Studio DRAMA. Both are OFL-licensed and self-hosted. The site used Mona Sans and Hubot Sans from GitHub until August 2026.
Code blocks and a lot of the small print - tags, dates, the commit hash down in the footer - use a monospace stack rather than a single font: Geist Mono (external site), then Recursive Mono Casual (external site), Comic Code (external site) and JetBrains Mono (external site), falling back to SF Mono, Menlo, Monaco and finally Courier New. None of these are self-hosted, so you get the first one you happen to have installed and I get to see my own preferences without making anyone download a fourth webfont.
CSS
For CSS processing, I use PostCSS (external site) with Tailwind and Autoprefixer. Tailwind is used sparingly when I need to add a utility class to an element without adding a specific classname.
Utopia
Spacing and type sizes use the custom properties defined by the excellent Utopia.fyi (external site) and they are added to Tailwind’s config (see here (external site)). If you haven’t used Utopia before, I highly recommend it. My Utopia config for this site can be found here (external site), and I use it like so:
font-size: var(--step-1);
margin-block-end: var(--space-s);