Building with Astro

astro webdev javascript

After running a single-page portfolio for years, I decided to rebuild with Astro. Here’s why.

The Old Site

The previous site was:

  • Single index.html file
  • jQuery 1.12.4 (from 2016)
  • Bootstrap 3
  • Hand-rolled canvas animations
  • No blog, no content system

It worked, but it was stuck in 2018.

Why Astro?

Astro checked all the boxes:

  1. Zero JavaScript by default — Only ships JS when needed
  2. Markdown-first — Write blog posts in markdown
  3. Component-based — Reusable UI without framework lock-in
  4. Fast builds — Static site generation
  5. Great DX — TypeScript support, content collections, built-in routing

What I Built

The new site has:

  • Homepage with hero + latest posts + featured projects
  • Blog with markdown posts
  • Project archive with individual project pages
  • About page with experience/education/skills
  • Contact page
  • RSS feed
  • Proper SEO meta tags

All deployed to Netlify with automatic builds.

Performance Wins

The biggest win was rewriting the Voronoi canvas animation. The old version:

  • Created new objects every frame (massive GC pressure)
  • 700 points (overkill)
  • No pause when off-screen
  • Recreated gradients every frame

The new version:

  • Object pooling (zero allocations per frame)
  • 250 points (still looks great)
  • Pauses when tab is hidden or scrolled off-screen
  • Cached gradients

Result: Silky smooth 60fps animation with minimal CPU usage.

Takeaways

If you’re building a dev blog or portfolio in 2026, Astro is a solid choice. It’s the right balance of modern features and simplicity.

No React overhead, no complex build config, just fast static sites with great DX.