Why I Rebuilt My Portfolio with Astro: Speed, Simplicity, and Developer Joy

Every developer reaches that point: the portfolio needs a refresh. Maybe it’s looking dated, maybe your skills have evolved, or maybe, like me, you’re always eager to explore promising new tools. When I came across Astro, its unique approach immediately caught my eye. With my own site needing an update anyway, it felt like the perfect chance to dive in.

My goals were clear: showcase my projects effectively and integrate a blog section to share insights (like this very post!). This meant I needed a tool capable of blending static content delivery with dynamic interactivity where necessary. Astro seemed tailor-made for this hybrid approach.

Why Astro Over Other Frameworks?

Of course, Astro isn’t the only player in this space. I considered established options:

• Gatsby: While powerful, Gatsby has always felt a bit more configuration-heavy than I prefer for a personal project. Its GraphQL data layer, while robust, can add complexity upfront.
• Next.js: A fantastic framework, no doubt, but potentially overkill for a content-focused portfolio and blog. Pairing it with a headless CMS like Payload (which is interesting!) adds another layer. Honestly, the web has plenty of Next.js sites; I wanted to try something different that felt right-sized for this project.

Astro stood out with its promise of simplicity and performance by default. Its “content-first” philosophy resonated with the core purpose of a portfolio and blog.

What Makes Astro Shine? The Core Concepts

Astro describes itself as the “all-in-one web framework for building fast, content-focused websites.” But what does that really mean?

1. Performance First: Zero JavaScript By Default

This is Astro’s superpower. Unlike many modern frameworks that ship a significant JavaScript bundle to the client to render the page, Astro does most of the work during the build process. It renders your UI components to static HTML ahead of time.

The result? Websites load incredibly fast because the browser receives pre-rendered HTML and CSS, with zero client-side JavaScript by default. This directly translates to:

• Better User Experience: Faster load times, especially on mobile or slower networks.
• Improved SEO: Search engines love fast sites. Astro helps nail Core Web Vitals like Largest Contentful Paint (LCP) and First Input Delay (FID) right out of the box.

2. Astro Islands: The Best of Both Worlds

“Zero JavaScript by default” doesn’t mean no JavaScript ever. When you need interactivity – like for an image carousel, a mobile menu, or complex UI elements – Astro uses a concept called Astro Islands.

Think of your static HTML page as the ocean. Any interactive UI component becomes an “island” in that ocean. Astro automatically isolates the JavaScript needed for just that island, loading it independently without affecting the rest of the page.

This brilliant architecture means you get the speed of a static site and the rich interactivity of a JavaScript framework, but only where you explicitly need it. It avoids the “all-or-nothing” approach of many Single Page Applications (SPAs).

3. Familiar Syntax & Simple Structure

Getting started with Astro feels intuitive.

Astro Components (.astro files): They look like HTML but with superpowers. You have a “code fence” (---) at the top for JavaScript/TypeScript that runs at build time (fetching data, defining variables) and a template section below for your HTML structure.

---
// Component Script (runs at build time)
const siteTitle = "My Awesome Astro Site";
const posts = await Astro.glob('./posts/*.mdx'); // Fetch content
---

<!-- Component Template (HTML + JS expressions) -->
<header>
  <h1>{siteTitle}</h1>
</header>

<main>
  <h2>Blog Posts</h2>
  <ul>
    {posts.map(post => (
      <li><a href={post.url}>{post.frontmatter.title}</a></li>
    ))}
  </ul>
</main>

<style>
  /* Scoped CSS by default */
  h1 {
    color: rebeccapurple;
    font-size: 2rem;
  }
</style>

What about the project folder structure? It’s clean and logical, making navigation easy. Key folders include public (static assets), src/components, src/layouts, and src/pages (where files map directly to routes).

4. UI Framework Flexibility

Love React? Prefer Vue or Svelte? Astro lets you bring your favorite tools! Integrating frameworks is straightforward:

# Example: Add React integration
npx astro add react

Then, you can import and use your framework components within .astro files, deciding exactly when and how they become interactive using client directives:

---
import MyReactCounter from '../components/MyReactCounter.tsx';
---

<p>Here's a static page with an interactive counter:</p>
<MyReactCounter client:visible />

For example,client:visible tells Astro to load and hydrate the React component only when it scrolls into the viewport – another performance win!

Managing Content Seamlessly: Content Collections & MDX

For a blog and project showcase, managing content efficiently is key. Astro’s Content Collections feature is fantastic for this. It allows you to:

1. Organize: Keep your Markdown (.md) or MDX (.mdx) files neatly in the src/content/ directory.
2. Validate: Define schemas using Zod in src/content.config.ts to ensure your frontmatter (like titles, dates, tags) is consistent and correct.
3. Query: Easily fetch and work with your content using Astro’s built-in APIs.

For example, this is the content collection for the blog posts on this site:

// src/content.config.ts example
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content', // Use 'content' for Markdown/MDX
  schema: ({ image }) => z.object({ // Astro's image helper for optimization
    title: z.string(),
    description: z.string(),
    publishDate: z.string().transform(str => new Date(str)), // Transform string to Date
    image: image().optional(), // Optional optimized image
    tags: z.array(z.string()).optional(),
    featured: z.boolean().optional().default(false),
  }),
});

export const collections = {
  'blogs': blogCollection, // Collection named 'blogs'
};

This provides type safety and a structured way to handle content, which is a huge improvement over manually managing frontmatter. Using MDX also allows embedding components directly within your Markdown content – perfect for richer articles. This can be also expanded further to use CMS with your Astro project.

The Stack for nicobatalla.com

For this specific site, the stack reflects Astro’s flexibility:

• Core Framework: Astro JS (obviously!)
• Content: MDX with Content Collections for blog posts and work details.
• UI Components: Primarily native Astro components, with React components sprinkled in via Astro Islands for specific interactive elements (like the 3D background and work slider).
• Styling: Tailwind CSS (using the latest v4 features via the @tailwindcss/vite plugin).
• UI Primitives/Components: Shadcn UI for foundational UI elements, built on Radix UI.
• 3D: Three.js for the geometric background animation on the hero section.

Integrating these was surprisingly smooth, largely thanks to Astro’s excellent tooling and clear documentation.

Final Thoughts: Why Astro Was the Right Choice

Building my portfolio with Astro has been a genuinely enjoyable experience. It delivered exactly what I needed:

1. Blazing Fast Performance: The speed is noticeable, contributing to a great user experience and strong SEO foundations.
2. Developer Experience: Astro strikes a fantastic balance between simplicity and power. Writing .astro components feels natural, and the framework flexibility is liberating.
3. Content Focus: Content Collections make managing blog posts and project details straightforward and type-safe.
4. Modern Tooling: Excellent integration with tools like TypeScript, Tailwind, and MDX.

If you’re building a content-focused website – whether it’s a portfolio, blog, documentation site, or marketing page – and prioritize performance and a great developer experience, I highly recommend giving Astro a try. It’s a powerful, modern framework that lets you build efficiently without sacrificing speed or flexibility. Plus, deploying an Astro site is incredibly easy on virtually any platform.

Check out the rest of the site to see it in action!