Astro
This, the 2023 version of my digital abode is built with Astro. I had originally I started making it with Eleventy (11ty) as I had used 11ty successfully for version 2 of my Code Notes 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 branch on the zander.wtf repo.
Typography
Headings, the navigation and the footer are set in Alpha Lyrae, 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, 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, then Recursive Mono Casual, Comic Code and JetBrains Mono, 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 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 and they are added to Tailwind’s config (see here). If you haven’t used Utopia before, I highly recommend it. My Utopia config for this site can be found here, and I use it like so:
font-size: var(--step-1);
margin-block-end: var(--space-s);