Building heissanjay.me

Source

A deep dive into the architecture of my personal portfolio built with Astro, Tailwind v4, and minimal JavaScript.

Introduction

I decided to rebuild my portfolio to focus on performance and simplicity. This project explains the architectural choices behind using Astro as the meta-framework and Tailwind CSS v4 for styling.

Architecture

The site uses Astro’s Island Architecture to strip away unused JavaScript. Most pages are static HTML, with hydration occurring only for interactive components like the theme toggle.

Key Features

  • Zero JS by default: The core site loads no client-side frameworks.
  • Content Collections: Type-safe markdown/MDX management.
  • View Transitions: Seamless navigation between pages.
// Example of type-safe content fetching
import { getCollection } from 'astro:content';
const projects = await getCollection('projects');

Styling

I’m using the alpha version of Tailwind v4, which offers a simplified configuration and faster build times using the new Rust-based engine.

Comments