I designed and built this site myself. Everything is open souce and published on 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
does most of the heavy lifting – it's a static site builder that takes care of a lot of otherwise cumbersome optimisations like server-side rendering, image loading, and routing.
I used and to build and design the interface. All the individual notes and essays are written in – a souped-up version of markdown that makes it easy to design and reuse custom components and interactive JavaScript elements. takes care of hosting. Animations are built with .
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 and syntax into MDX and JS files in VS Code. There's no fancy pipeline shuttling content directly from my personal knowledge management database (eg. or ). 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 and body copy is set in , both from . I love its semi-serifs and classical feel. Supporting sans-serif type is set in .
I use a developed by , 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:
Coming Soon
Feel free to bug me on twitter to finish writing this.
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:
This is an alert
Stay vigiliant to the threat of typography that is too small and low contrast to read.
Some are nicely styled callouts for books:
Addiction By Design
Natasha Dow SchullAddiction 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.