Skip to main content
1 min read

Building a portfolio with Astro 6

Why I chose Astro 6 for my personal site, and what the setup looks like in practice.

astro web

This site is built with Astro 6, Tailwind CSS v4, and a handful of carefully chosen tools.

Why Astro

Static-first, zero JS by default, islands architecture for interactivity where needed. The Content Layer API makes working with Markdown and MDX type-safe through Zod schemas.

The stack

  • Astro 6 with TypeScript strictest
  • Tailwind CSS v4 with custom OKLCH color tokens
  • Expressive Code for syntax highlighting
  • Pagefind for client-side search
  • Biome for linting and formatting

What I learned

Setting up exactOptionalPropertyTypes with Astro components required careful attention to how optional props interact with destructured defaults. Worth it for the type safety.