I’ve wanted to rebuild my portfolio for a while. The old one had accumulated enough cruft that starting fresh felt more productive than continuing to patch it. This time I wanted something fast, easy to maintain, and visually distinct. I landed on Astro, and I’m glad I did.

The Stack

The site is built with:

  • Astro 5 — the core framework
  • React — for interactive components where needed
  • Tailwind CSS — for styling
  • Three.js — for the 3D scene in the hero

Astro is the piece I want to talk about most, because it’s the one that most shaped how the site is built.

Why Astro

Astro’s selling point is its island architecture. By default, it renders everything to static HTML at build time and ships zero JavaScript. When you do need interactivity — a React component, a counter, a form — you opt in explicitly with directives like client:load or client:visible. Everything else stays as lightweight HTML.

For a portfolio site, this is exactly the right model. Most of what you want to show is content: text, images, a bit of layout. There’s no reason to ship a full client-side React bundle for that. Astro lets you use React where it earns its place and keeps everything else as simple, fast static output.

The developer experience is also excellent. Astro components use a format that feels like a natural extension of HTML — a frontmatter block for your logic, then a template below. It’s easy to reason about, easy to compose, and the build tooling is fast.

Astro at Work

This isn’t just a personal preference — it’s a choice I’ve made professionally too. Astro is the framework we use for both the Haysto and Picnic marketing websites. Both are content-focused sites where performance matters and the requirements are well-suited to static generation. Astro has been a reliable, low-friction choice in both cases.

The Design

The visual design takes cues from Apple’s design language — soft whites, rounded cards, subtle blur effects, and a clean typographic hierarchy. Tailwind made it straightforward to build this out consistently.

The 3D scene in the hero uses Three.js rendered inside a React component. It’s one of the few places on the site that justifies client-side JavaScript, and using client:load makes that intention explicit in the markup.

Wrapping Up

If you’re building a portfolio, a marketing site, or anything content-heavy, I’d genuinely recommend giving Astro a try. It gets out of your way, the output is fast, and the model of opting into JavaScript rather than opting out of it leads to better habits.

The source for this site is on GitHub if you want to dig into the specifics.