Why I Chose Astro for My Portfolio

When I decided to build my portfolio website, I knew I wanted something that was easy to work with, fast, and perfect for content-driven sites. After exploring various options, I landed on Astro and I’m really happy with that choice.

Why Astro?

Astro is a JavaScript web framework optimized for building fast, content-driven websites. It’s designed specifically for sites like portfolios, blogs, and documentation where content is king.

What drew me to Astro was its simplicity. I didn’t want to deal with complex build processes or unnecessary JavaScript. I just wanted to write content, style it nicely, and have it work fast. Astro delivers exactly that.

Perfect for Content-Driven Sites

One of Astro’s biggest strengths is how well it handles content. Whether you’re writing blog posts, showcasing projects, or building documentation, Astro makes it effortless. You can write in Markdown, organize content with collections, and everything just works.

For my portfolio, this means I can easily add new projects or blog posts without wrestling with complex configurations. The content collections feature keeps everything organized and type-safe, which is a huge plus.

The Astro Dev Toolbar

One feature that really impressed me is the Astro Dev Toolbar. It’s a built-in development tool that makes debugging and understanding your site structure so much easier.

The Dev Toolbar gives you insights into your page performance, shows you which components are being used, and helps you understand how your site is structured. It’s one of those features that makes development a joy rather than a chore.

Server-Side vs Client-Side Code

One thing that makes Astro unique is how it handles server-side and client-side code. By default, everything runs on the server during build time, which means zero JavaScript is sent to the browser unless you explicitly need it.

Here’s a simple example of how this works:

// Server-side code (runs at build time)
import { getCollection } from "astro:content";

const projects = await getCollection("projects");

// This runs on the server, not in the browser
---

<div>
{projects.map((project) => (
  <ProjectCard project={project} />
))}
</div>

If you need interactivity, you can add client-side JavaScript to specific components:

---
// Server-side code
const data = await fetchData();
---

<!-- Client-side interactivity -->
<button client:load>Click me</button>

<script>
// This runs in the browser
document.querySelector('button').addEventListener('click', () => {
  console.log('Clicked!');
});
</script>

This approach means you get the best of both worlds: fast static pages with zero JavaScript overhead, and the ability to add interactivity only where you need it.

A Framework Built for Content

Astro is a JavaScript web framework optimized for building fast, content-driven websites.

This quote perfectly captures why Astro is such a great fit for portfolio sites. It’s not trying to be everything to everyone. Instead, it focuses on doing one thing really well: making content-driven websites fast and easy to build.

My Experience So Far

Building my portfolio with Astro has been a smooth experience. The learning curve is gentle, the documentation is excellent, and the community is helpful. Most importantly, the site is fast, and adding new content is straightforward.

If you’re building a portfolio, blog, or any content-focused website, I’d highly recommend giving Astro a try. It strikes the perfect balance between simplicity and power, making it ideal for developers who want to focus on content rather than configuration.