Technical Deep Dive

This site is built using a modern “unbundled” architecture. Here is how I implemented the core features:

1. Mise-en-place (Environment)

Instead of relying on global binaries or npx, I use mise to embed tools like eslint and prettier directly into the project environment. This ensures that npm install is handled automatically via the [prepare] hook.

2. Astro Content Collections

I use the astro:content module to manage data.

• Type Safety: Using Zod schemas to validate project frontmatter.
• Performance: Astro builds these into a local data store, meaning zero runtime overhead for fetching projects.

3. Tailwind CSS v4

I’m using the latest Tailwind CSS with the @tailwindcss/vite plugin. This allows for:

• CSS-only configuration (no tailwind.config.js).
• Native CSS variables for theming.

4. MDX & Islands

Interactive components are written in SolidJS and hydrated only when necessary using client:load or client:visible.