I’m designing and growing this website myself, drawing inspiration from Maggie Appleton’s Digital Garden for it’s structure, design and components. The source code is open source and available on Github for you to explore. My blogging journey spans over a decade, during which I’ve experimented with more than five technologies, from WordPress in the mid-2010s to Gatsby, Jekyll, Quartz, and Sphinx. After trying various options, I’ve found Astro to be the ideal fit, blending Markdown simplicity with MDX’s customizable components to suit my needs.
Technologies & Techniques
Astro powers this site, enabling me to create everything from concise notes in Markdown to intricate, content-rich pages that push beyond standard Markdown limits. I value its content collection management, interface optimizations, and visual effects, along with its islands architecture for modular JavaScript.
I keep the interface lightweight using plain HTML, CSS, and JavaScript, while MDX allows seamless text writing with interactive custom components. For animations, I primarily use CSS, following Maggie Appleton’s approach, with more complex effects crafted in Motion .
I host this site on a VPS via Hetzner Cloud , appreciating its flexibility and cost-effectiveness for a fully customizable virtual machine.
Writing and Editing Content
My CMS consists of flat files and folders, where I edit content directly in MDX files using Neovim. I use Obsidian for daily notetaking, nurturing my notes, ideas, and connections before they evolve into public content. Before publishing, I refine these in a code-like process, adding visual components, effects, animations, and non-Markdown elements to create engaging articles or detailed web pages, especially for Innovations and Discoveries and Exploration Notes .
Typography
Headers are set in Source Serif 4 , and body text uses Noto Sans , both open-source fonts that perfectly complement the academic and tech focus of my site.
I implement a fluid type scale from Utopia , leveraging advanced CSS calculations to adjust font sizes dynamically based on browser width.
Growth Stages
Each post here features a growth stage, reflecting its development level—starting as seedlings, progressing to buddings, and maturing into evergreens. You’ll find many notes and articles in progress, as I aim to complete them over time, though some remain half-baked until I revisit and deepen them.
Custom Components
I build on Maggie Appleton’s custom components as a foundation, adapting and creating my own to enhance my content with unique interactivity and design.