I Remade my Portfolio Website in Astro, Here’s What I Learned

Today I’m happy to launch the newest version of my personal website. Remade from the ground up using all I’ve learned in the three years since I created my old personal site, this new one is faster and better in every way.

The first big change I made was migrating from Gatsby to Astro. Back in 2021 Gatsby was still considered the goto for all things static site, but over the years a lot of competition has shown up in this space and Astro has really propelled itself to the front of the pack. Astro’s popularity is largely credited to its simple design. It sets out to be a framework centered on the core part of any website, the HTML. An Astro template is largely HTML, and Astro tries its hardest to only deliver HTML to the client. This combination of familiar developer experience and excellent performance for the end user made it my choice for this redesign.

Though to be honest, my favorite part of using Astro wasn’t its HTML syntax, but instead what it copied from React. Unlike many frameworks focused on a custom templating language, Astro doesn’t try to reinvent the wheel. Any time you want to use code to generate your markup, Astro lets you use plain old Javascript. As someone who’s experimented with Go Templates, Handlebars, and other HTML focused templating languages, the ability to use familiar javascript syntax in my templates was what made the experience so enjoyable.

Would you rather do this?

<ul>
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Or this?

<ul>
  {people.map((person) => (
    <li>{person}</li>
  ))}
</ul>

Coupled with this developer experience comes the promise of great performance through shipping 0 javascript to the client by default. Of course, in the real world things aren’t always so easy. Even on my relatively simple portfolio site client side javascript eventually became a necessity, and here I was faced with a decision. Astro allows you to work with pretty much any other javascript framework you can think of for adding interactivity–React, Svelte, Vue and all the others. But, as is always the case, these come with the downside of shipping framework code to the client. Even when the framework code is minimal like with Svelte, it still felt like I would be sacrificing the Astro philosophy of as little javascript as possible by choosing any of these frameworks. Thankfully though, Astro has another solution available. One that requires no framework and ships only the bare minimum of javascript: Web Components.

Web Components are all over Astro’s documentation site, and they feel like the preferred solution to interactivity in the framework so I went with them. But to be honest, using them made me remember why React exists in the first place. The constant use of query selectors and going back and forth from the Astro HTML to the javascript made the whole developer experience feel clunky. That being said, working more with the native standards felt right. Even if the abstractions of frameworks and libraries make life easier, working more with the native APIs exposed me to how things work under the hood. Or at least it felt like that…I hope…maybe. Honestly, just use React and call it a day™.

In keeping with this focus on performance I chose to use Tailwind for my CSS. Atomic CSS is honestly genius for decreasing the amount of CSS shipped to the client, but I think I’m ready to move on from Tailwind. As someone who’s had to implement some very complex responsive designs recently, I can say Tailwind is good for the basics but when trying to use modern CSS it can really get in the way. Modern CSS grids have made so much possible that just wasn’t before and I wouldn’t be able to do my job without them, but Tailwind’s approach to them is frankly outdated. Tailwind’s grid system is still largely inspired by Bootstrap’s 12 column flexbox. All columns and rows are equal size by default and require going into the tailwind config file to do anything more complex. This hiding of the awesomeness that is CSS grid is just frustrating for anyone doing complex layout shifts for responsive designs. Even for this relatively simple site I needed to use a custom grid to get what I wanted out of Tailwind. For the longest time this was just a sacrifice you had to make for the benefits of atomic CSS, but now it looks like Tailwind might actually have some competition in the form of StyleX. StyleX looks to have all the performance of Tailwind with all the flexibility of normal CSS and I’ll be trying it for future projects.

Overall, I really enjoyed my experience with Astro and redesigning this site. I’d really recommend pairing it with a framework you’re familiar with for interactivity despite the performance cost. I think that combination would make for an amazing developer experience with still a lot more performance than your typical SPA or hydrated server rendered app. It’s probably not the best choice for highly interactive sites, but it doesn’t advertise itself as such. For what it tries to do it does it well and I’d recommend it, especially for personal sites like this one.