Why I Switched to Astro for My Portfolio
The problem
My old portfolio was overengineered. It used a full React framework with client-side routing, a CSS-in-JS library, and took 8 seconds to build. For a static site with zero interactivity, that’s absurd.
Why Astro
Astro ships zero JavaScript by default. Components render to HTML at build time. You only add JS where you need interactivity. For a portfolio site, this is perfect.
Build performance
| Metric | Before | After |
|---|---|---|
| Build time | 8.2s | 0.6s |
| Bundle size | 245KB | 12KB |
| Lighthouse | 82 | 100 |
The migration
The migration was straightforward:
- Set up a new Astro project
- Convert React components to
.astrofiles - Replace CSS-in-JS with scoped
<style>blocks - Move static content into component frontmatter
Results
The site now builds in under a second, scores 100 on Lighthouse, and requires zero client-side JavaScript for the main portfolio sections. The only JS is a small scroll handler for the sticky header.
Ship HTML. Add JavaScript only when you have to.