Colophon

This is the 5th version of my website, and I thought it would be interesting to take a second and talk about how it was made.

Tech Stack

The core of my website is built using PHP and nginx to run my server-side logic. And it’s hosted via a virtual Linux machine on DigitalOcean.

The front-end is built with HTML and only uses JavaScript to add client-side functionality as needed. And everything is styled with CSS (compiled from SCSS).

Most of the data and content for my website is stored in JSON. But my longform writing is also stored as Markdown as well. And I use both Obsidian and Notion to work on my writing.

I’m also proud to say that the only dependency in my stack is PHP-Markdown, which helps simplify the process of writing/publishing to multiple platforms. Everything else has been written by me, from the PHP logic, to the interactive components, to the fully featured audio player that delivers my music.

The Design

I conceptualized and designed my website in FigJam, Figma, and the browser. And the experience is built from the ground-up to support everyone’s needs (e.g. it's highly accessible).

The typesetting includes Lexend for the main body font, Crimson Pro for italics, and Cascadia Code for code snippets.

Size and scale are built around a recursive logic. There is a single core unit (which is also the base font-size) from which every other size is derived from via a geometric series.

All of the animations were designed in the browser and use CSS keyframes or transitions, and respond to user preferences.

Finally, the theme of this website automatically adjusts (light or dark) based on a user’s OS preferences.