Why I Chose Astro for My Portfolio (and Why You Should Too)

When I decided to rebuild my portfolio from scratch, I evaluated several frameworks. Here’s why Astro won — and what I learned along the way.

The Contenders

Framework	Build Time	Bundle Size	Learning Curve	Content Support
Plain HTML	None	Minimal	None	Manual
Gatsby	Slow	Medium	High	Good (GraphQL)
Next.js	Medium	Large	Medium	Good
Astro	Fast	Minimal	Low	Excellent

What Makes Astro Different

Zero JavaScript by Default

Astro renders everything to static HTML. Unlike Next.js or Gatsby, there’s no client-side framework shipped by default:

<!-- This Astro component renders to pure HTML -->
<!-- No React, no Vue, no framework runtime -->
<article>
  <h1>{post.title}</h1>
  <p>{post.description}</p>
</article>

The result? Lighthouse scores of 100 across the board.

Content Collections

For a blog, Astro’s Content Collections are unbeatable:

// Define your schema once
const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    description: z.string(),
    heroImage: image().optional(),
  }),
});

Then query your content with full type safety:

---
const posts = await getCollection('blog');
const sorted = posts.sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---

Island Architecture

When you do need interactivity, Astro’s island architecture keeps things lean:

<!-- Only this component loads JavaScript -->
<SnakeGame client:idle />

<!-- Everything else is static HTML -->
<Header />
<BlogPost />
<Footer />

My Portfolio Stack

Here’s what I’m using:

• Astro 5 — framework and SSG
• Tailwind CSS 4 — utility-first styling
• TypeScript — type safety
• MDX — interactive blog posts
• Canvas API — Snake mini-game

The entire site weighs less than 50KB of JavaScript (mostly the game).

The Developer Experience

What I love most about Astro:

1. File-based routing — src/pages/blog.astro → /blog
2. Component imports — use .astro, .tsx, .vue, or .svelte
3. Hot module reload — instant feedback during development
4. Built-in image optimization — via astro:assets
5. Markdown just works — with frontmatter validation

Performance Results

After deploying to Netlify:

Performance:   100
Accessibility: 100
Best Practices: 100
SEO:           100

No other framework gave me these scores without significant optimization work.

Conclusion

For a developer portfolio, Astro is the clear winner. It gives you the best of both worlds — the simplicity of static HTML with the power of a modern component framework.

If you’re building a portfolio, blog, or any content-focused site, start with Astro. You’ll ship faster, your site will be faster, and your users will thank you.