Why I Chose Astro for My Portfolio

When it came time to rebuild my portfolio, I had the usual suspects lined up: Next.js, Nuxt, SvelteKit, or maybe even going fully custom with Vite. But after weeks of deliberation and a few false starts, I landed on Astro — and I haven’t looked back since.

The Problem with SPAs for Content Sites

Single-page applications are fantastic for interactive web apps. But a portfolio site? It’s fundamentally a content site with some interactive sprinkles on top. Shipping a full JavaScript runtime to display what is essentially static HTML felt wrong. I’d been down that road before — a React-based portfolio that scored poorly on Lighthouse, had unnecessary bundle sizes, and felt sluggish on mobile devices despite showing mostly text and images.

The core issue is architectural mismatch. When your framework assumes everything needs to be interactive, you end up fighting against it to make things simple. You add 'use client' or 'use server' directives, you configure SSR vs SSG per route, you install plugins to optimize images. It’s death by a thousand configuration cuts.

What Makes Astro Different

Astro’s mental model clicked for me immediately: ship zero JavaScript by default, and opt in where you need it. This isn’t just a performance optimization — it changes how you think about building pages. Every component is server-rendered by default. If you need a carousel or a modal, you bring in exactly that interactive island and nothing more.

The content collections API is another standout feature. I can define schemas for my projects and posts with Zod validation, get full TypeScript inference, and query everything with a clean async API. No external CMS, no GraphQL layer, no build-time data fetching ceremony. Just markdown files with frontmatter and a type-safe way to consume them.

The Developer Experience

What surprised me most was how productive I felt from day one. The file-based routing is intuitive. The .astro component syntax is basically HTML with a frontmatter script block — no JSX quirks, no template syntax to learn. Scoped styles work exactly as you’d expect. And the build times are genuinely fast.

I was able to build a scroll-driven project showcase, view transitions between pages, and a full contact form with server-side validation — all without reaching for a UI framework. When I did need client-side JavaScript for scroll-driven animations, I wrote vanilla TypeScript in a <script> tag and it just worked.

Trade-offs I Accepted

Astro isn’t perfect for every use case. If I were building a dashboard with complex state management or real-time updates, I’d reach for something else. The ecosystem, while growing rapidly, is still smaller than React’s or Vue’s. Some niche integrations require more manual work.

But for a portfolio — a site that needs to be fast, accessible, beautifully designed, and easy to maintain — it’s the best tool I’ve found. The constraints it imposes are exactly the constraints that lead to better websites.

Building this portfolio with Astro reminded me that the best technology choices aren’t about picking the most powerful tool. They’re about picking the most appropriate one.