A designer-y word for “how it’s made”.
I designed and built this site myself.
This is a home or digital graden (read: A Brief History & Ethos of the Digital Garden) to share the things I explore in both my on-screen and off-screen worlds. All code is open source and available on Github .
The first commit was September 17, 2022. Damn, I’ve grown a lot since then—and the technology around me has grown, too.
This site is built using Astro
Astro handles the content-heavy views (written in MD format), but for more interactive components I use Svelte framework integration sweetness. Code is edited using VS Code on a MacBook Pro.
My terminal of choice is Warp .
My go-to coding font is Fira Code and Geist from Vercel. E2E testing are written in... wait, i dont run any test for it, and I use Polyplane to preview devices, test accessibility, and toggle user preferences like (prefers-color-scheme). Domain registration via Domainesia , hosting, and deployment are via Vercel . Email forwarding is through ImprovMX . To handle data interaction such as on dynamic page i.e: bookmark, secreto and etc, I use Supabase with PostgresSQL dna.
Headings and components are set in Basement Display Variable. As the name suggests, it’s a variable font, meaning I can stretch character widths and fine-tune weights for different uses. Body text is set in Neue Montreal Regular.
Typography is scaled using a lot of math and a fluid type scale by Utopia, meaning that font sizes will interpolate between mobile and desktop to optimize for the current browser width.
Type inspiration can be found anywhere, from comic art and video games to bodega window displays, but I often return to a handful of resources:
• The Elements of Typographic Style by Robert Bringhurst
• Butterick’s Practical Typography
• Bethany Heck's Font Review Journal
• Fonts In Use
I use Radix Colors to apply palettes consistently, ensure accessibility, and seamlessly switch between light and dark mode, but unfortunately, currently the toggle theme has been disabled. Icons are from Astro Icon. Also, I don’t use a grid.
If you spot a typo, encounter a broken feature, or have a recommendation for an improvement, file an issue on this repository issue section.