Building this site with Astro
Why I chose Astro + Tailwind for my portfolio, and how the whole thing comes together.
I’ve rebuilt my personal site a few times over the years. This time I wanted something that felt like a permanent home — fast, easy to write for, and something I actually understand end-to-end.
Why Astro
Astro is a static site generator with a twist: it ships zero JavaScript by default. Every page is rendered to plain HTML at build time. For a blog and portfolio, that’s ideal — there’s nothing dynamic that needs JavaScript.
The other big reason is content collections. Blog posts live as .md files in src/content/blog/. Frontmatter is typed with Zod, so if I forget to add a date, the build fails loudly instead of silently publishing broken metadata.
Writing in Markdown
Every post is just a file. To publish something new:
# Create the file
touch src/content/blog/my-new-post.md
# Push to GitHub — Vercel deploys automatically
git add . && git commit -m "new post" && git push
No CMS login. No database. Just files.
The design
I wanted something warm and calm — earthy tones that wouldn’t feel out of place alongside hiking content. Lora for headings, DM Sans for UI. Colours inspired by forest greens and bark browns.
What’s next
- Search with Pagefind
- Dark mode
- Photo galleries for hiking posts
The source is on GitHub if you’re curious.