Everything is open source and published on Github if you’d like to poke around. Is this tech stack overkill for a personal website? Almost certainly. However, building bespoke tools for my own thoughts provides a level of agency and customization that off-the-shelf platforms cannot match. It is a living project that I enjoy tinkering with as much as I enjoy writing in.

Technologies & Techniques

Astro 5 does most of the heavy lifting – it’s a modern static site generator with island architecture. It does lots of useful things for me like typed collections, image optimisation, transition animations, and routing. It also minimises the amount of TypeScipt shipped to the client using islands architecture .

I use TypeScript as my primary development language, with React used sparingly for interactive components. All the individual notes, essays, and research papers are written in MDX – a souped-up version of markdown that makes it easy to design and reuse custom components and interactive TypeScript elements.

Mathematical notation is supported via KaTeX , allowing for beautiful rendering of complex equations.

Vercel takes care of hosting. Animations are mostly CSS, with some more complex ones done in Motion .

Major Credit: Maggie Appleton

This digital garden is based on the open-source codebase created by Maggie Appleton . Her implementation of wiki-style linking and content growth stages serves as the architectural foundation for this project.

Although I have extended the code to support research papers, LaTeX, and other custom requirements, the core framework remains rooted in her approach to personal knowledge management.

Full credit goes to Maggie for providing the original structure and resources that made this site possible.

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 DM Serif Display and body copy is set in DM Sans . I love the clean, modern feel of these typefaces. Monospace text uses DM Mono .

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.