How (and why) I built my portfolio with Astro

Why I decided to create a portfolio

For a few years now I’ve had in mind to build a personal portfolio (a business card of sorts), a place to showcase the projects I work on in my spare time, talk about things I discover, and share thoughts and technical guides related to my work as a software developer. I finally decided to make time for it.

What’s the purpose?

I’ve been working as a software developer for years and have always pushed myself to keep up with new technologies through courses and personal experiments, but I always stopped at experimentation for its own sake, without ever really engaging with the community or sharing what I was building. So I decided to change that: to put myself out there, and start sharing my discoveries, experiments, and thoughts.

The plan has been decided, now what?

I planned out what I wanted to build and sketched a couple of rough drafts of how I’d like the portfolio to look. Then came the real question: how to build it.

I’ve always been a fan of Next.js (and React in general) for its declarative approach to components and its built-in support for routing, SSG and SSR, etc. But since this is a website with mostly static content, I started wondering if there was a better approach, something with less overhead, sitting somewhere between Next.js and plain HTML/CSS.

Astro

Among the endless stream of frameworks, libraries, and tools that each promise to solve every problem you have, I came across (or rather, rediscovered) Astro: a framework for building content-driven websites that still leaves plenty of room for interactivity and customization (more on that later).

I wanted to step out of my comfort zone, so I spent a couple of hours exploring its features and decided it was exactly what I needed.

This post isn’t meant to be a step-by-step tutorial on building a website with Astro, it’s a rundown of the key steps and main features I adopted.

Setup

Following the usual getting started guide, within a couple of minutes you have a web application up and running on localhost:4321.

CSS and styling

The idea of writing dedicated styles for each page (and the general lack of consistency that comes with it) has never sat well with me. Neither has styling components with plain CSS.

I’ve been a fan of TailwindCSS for years: I centralize recurring rules in global.css, and scope styles to individual pages or components only when needed through Tailwind’s utility classes. One of Astro’s advantages is its native integration with several libraries, including TailwindCSS. A quick pnpm astro add tailwind and you’re good to go.

Routing

Much like Next.js, Astro uses a file-system based routing: /src/pages/blog.astro maps, for example, to the URL https://your-app-name/blog. This makes managing pages straightforward, including through dynamic routing (like /src/pages/blog/[...slug].astro), which lets you render multiple pages sharing the same layout via the slug placeholder.

Astro Islands

One of the most interesting concepts in Astro is island architecture: handling isolated parts of the UI that require interactivity or are highly dynamic. The result is a page served statically from the server, with the exception of those “islands” that are selectively hydrated where needed.

In practice, these are components written with an external framework (React, Preact, Vue, Svelte, etc.), embedded in the page and configured as required. This also makes it easy to reuse code you’ve already written without having to rewrite it for Astro.

The result speaks for itself: I built and refined a retro terminal-style theme that reflects the overall feel of the portfolio, with a fair amount of help from AI.

Speaking of AI…

I know my HTML, I know my CSS, and I know how to place things where and when they belong. I made extensive use of AI to build this portfolio, not to generate it from scratch with a single prompt, but to automate the more tedious parts of development: element positioning, color configuration, fonts, and UI work in general. Every stylistic choice, every feature, every section was first thought through and sketched out, and only then brought to life with AI assistance.

I won’t get into the ethical debate around AI or how well a developer needs to understand something before using AI to fill the gap. I’ll just say this: a React component written by hand and the same component written by AI have equal value if you understand how they work, the difference is that the second one saves you a lot more time.

Conclusions

This portfolio is a continuous work in progress: it will be refactored, new features will come, old ones will go. This post is just a recap of a couple of weekends spent having fun.

What about you? Do you have a portfolio? Had you heard of Astro before? What’s your take on using AI?