I designed and built this site myself. Everything is open source and published on Github if you’d like to poke around. The whole thing is frankly overengineered for a personal website, but playing with transient web technologies is an indulgent hobby I don’t want to relinquish. I started building it in late 2021 and tinker on it regularly.

Technologies & Techniques

Astro does most of the heavy lifting – it’s a static site builder designed for content-heavy websites. It does lots of useful things for me like typed collections, image optimisation, transition animations, and routing. It also minimises the amount of JavaScript shipped to the client using islands architecture .

I use plain HTML, CSS, and some JavaScript to build and design the interface. All the individual notes and essays are written in MDX – a souped-up version of markdown that makes it easy to design and reuse custom components and interactive JavaScript elements. Vercel takes care of hosting. Animations are mostly CSS, with some more complex ones done in Motion .

Previous versions of this website were built in Gatsby (v1) and Next.js (v2) , neither of which I would recommend. They’re overkill for personal websites and introduce unnecessary complexity. I learned a lot building both, but if you’re not making a dynamic web app with lots of user interaction, you don’t need them. Static site generators like Astro, Eleventy, Hugo, and Jekyll are a better fit.

Writing and Editing Content

My CMS is just a bunch of flat files and folders. When I edit content on here I’m just typing text into MDX files in VS Code. There’s no fancy pipeline shuttling content directly from my personal knowledge management database (eg. Roam or Tana ). All my ideas start and marinate in my Tana, but I wait for them to mature a bit before they move over to this garden.

I know other people prefer setups where they can click one button and push content from personal notes to the web. I personally like having more control over how the material is displayed and laid out. Working directly in the native medium of the web – HTML, CSS, and JavaScript – gives me fine-grained control. It allows me to play with typography, illustrations, graphic design, videos, animations, and interactive elements that pure text pipelines can’t support. Text isn’t the only way to represent ideas.

Typography

Headers are set in Canela Display and body copy is set in Canela Text , both from Commercial Type . I love its semi-serifs and classical feel. Supporting sans-serif type is set in Lato .

I use a fluid type scale developed by Utopia , which uses some wild CSS calculations to continuously adjust the font size relative to your browser’s width.

Growth Stages

Every post on this site has a growth stage indicating how complete and comprehensive it is. They start as seedlings, grow into buddings, and finally end up as evergreens. You’ll often find notes and essays that are unfinished or in progress. In an ideal world I’d finish everything I started. But we don’t live there and I’m notoriously bad at leaving things half baked. I do cycle back though. Sometimes months or years later. What goes around comes around.

Custom Components

I’ve built a number of reusable custom components for various situations.

There’s the coming soon component that signals a post is half-written and needs to be finished in the future:

There’s an assumed audience component that I put at the top of some posts to make explicit who I’m writing for:

I occasionally need to alert readers to dangers and threats:

Some are nicely styled callouts for books:

Addiction By Design

Natasha Dow Schull

Addiction by Design takes readers into the intriguing world of machine gambling, an increasingly popular and absorbing form of play that blurs the line between human and machine, compulsion and control, risk and reward.