Back to Projects

Digital Garden

This website! A personal space for learning in public, built with Astro and Tailwind CSS.

Astro Tailwind CSS MDX TypeScript

This is the website you’re currently viewing! It’s my digital garden — a place to share what I’m learning, explore ideas, and grow in public.

Why I Built It

I wanted a space that felt personal and intentional. Most blog templates felt generic, so I built something custom that reflects how I think about learning:

  • Learning is iterative — Some notes are rough, and that’s okay
  • Questions are valuable — The “Reader” character represents curiosity
  • Code should be clear — Annotated code blocks explain the why, not just the what

Technical Highlights

Dark Forest Theme

The design uses a custom color palette inspired by forest aesthetics — deep greens, warm beige tones, and amber accents. It’s easy on the eyes for long reading sessions.

Content-First Architecture

Built with Astro, the site ships zero JavaScript by default. Interactive elements like the code copy button hydrate only when needed.

Rich MDX Components

Custom components make writing technical content enjoyable:

  • <Reader> — A curious character asking questions
  • <Callout> — Tips, warnings, and important notes
  • <AnnotatedCode> — Code with numbered explanations

What’s Next

  • Search functionality
  • RSS feed generation
  • Dark/light mode toggle
  • Newsletter integration

The site is open source — feel free to use it as inspiration for your own digital garden!