Site overhaul

March 2, 2024

It is an inevitability for an engineer to write their portfolio site a few times, and this site is no exception.


I was introduced to Astro recently by a friend. It's a fantastic developer experience for building sites, and I plan on using it a lot more here on out. My first mini "project" using this new tech was a HackerNews frontend, which I host under this domain. Check it out!

Thus, it was only natural to rewrite this site using Astro. I was previously using Zola for the old site, which I still have no problems with, but the design was becoming a bit dated. I was drawn to Astro's Content Collections feature, which makes static content trivial to add, maintain, and render.


This is also my second small project in which I am using Tailwind. It's an interesting developer experience; I'm not fully sold on it yet, but I get the appeal.

One of Tailwind's primary objectives is to reduce the usage of increasingly complicated CSS classes, like post-container, post-container-container, and so on. Being able to cleanly write CSS properties directly in your HTML classes is something I replicate often with Flexbox, using classes like flex flex-column flex-align-center for example.

That said, I don't fully agree with Tailwind's approach to reusing styles. If you aren't using a templating engine, you're forced to use their @apply approach. If you are, though, they recommend you make templates or components or whatever else that wrap your content and embed your styles. If only there were some sort of styling mechanism for this...

There are cases where usage of raw CSS and CSS classes genuinely outshine Tailwind's approach to composition. This, for example, is awful:

  class="prose prose-headings:font-bold prose-h1:text-3xl
  prose-h2:text-2xl prose-h3:text-xl
  prose-a:border-b-2 prose-a:border-slate-300 prose-a:border-dashed
  prose-a:font-bold prose-a:no-underline prose-a:transition
  hover:prose-a:border-slate-600 prose-img:rounded-lg prose-img:shadow-md
  prose-slate max-w-full prose-code:font-normal prose-code:text-slate-700
  before:prose-code:content-none after:prose-code:content-none
  prose-code:text-sm prose-code:bg-slate-200 prose-code:px-1
  prose-code:py-0.5 prose-code:rounded"
  <slot />

This is some configuration for Tailwind's typography plugin. This is exactly what CSS was made for: selecting elements relative to a container class. Embedding my prose styling into class names is mildly ridiculous, and somehow it's recommended to do it this way.

That's my main complaint. Other than that, iterating with Tailwind has been a breeze. I can throw layouts together much quicker. My HTML has become slightly more ugly as a result, but who cares; my HTML was never pretty anyway.