← back to blog
2026-04-07tutorialastroweb dev

Building my portfolio with Astro

Why I chose Astro for my developer portfolio and how I set it up with content collections, a dark theme, and GitHub Pages deployment.

When I decided to build a proper portfolio site, I had a few requirements: it had to be fast, content-driven, and something I’d actually maintain long-term.

Why not Next.js?

Don’t get me wrong — Next.js is fantastic for web apps. But for a content-heavy portfolio with a blog and daily notes, it felt like overkill. I didn’t need server components, API routes, or a Node.js runtime. I needed a static site that loads instantly and lets me write in Markdown.

Enter Astro

Astro checked every box:

  • Content collections give me type-safe frontmatter and easy querying
  • Zero JS by default means my pages are lightning fast
  • Markdown/MDX support means I can write blog posts and notes in my editor
  • Component islands let me add interactivity only where I need it

The setup

The site structure is simple:

src/
  content/
    projects/    # .md files for each project
    blog/        # .md files for blog posts
    notes/       # .md files for daily notes
  pages/         # Astro page routes
  components/    # Reusable UI components
  layouts/       # Page layouts
  styles/        # Global CSS

Each content type has its own collection with a typed schema. Adding a new blog post is literally just creating a new .md file.

What’s next

I’ll be adding more projects, writing about things I learn, and eventually hooking up a custom domain. For now, GitHub Pages does the job perfectly.