Rebuilding my portfolio with Astro, Tailwind v4, and no animation library
Why this site ships almost no JavaScript, how Tailwind v4 changed the way I write CSS, and what I removed to keep it fast.
- astro
- tailwindcss
- typescript
- performance
Most portfolio sites are heavier than the work they present. I wanted the opposite: a site that loads before the visitor decides whether to keep reading.
Ship HTML first
Astro renders every page to static HTML at build time. The only interactive piece on this
site is the project filter, which is a single Preact island hydrated with client:visible.
Everything else (navigation, theme toggle, language switch) works with plain links and a
few lines of CSS.
Tailwind v4 removed the config file
Version 4 moved configuration into CSS. Design tokens live in a @theme block, and dark
mode is a @custom-variant rule instead of a JavaScript config object. There is now exactly
one place to look when a colour is wrong, and it is the same file that defines the styles.
What I removed
A list of things that did not earn their weight: an animation library, an SEO package, an icon package, a component library, and a second accent colour. Each removal made the site smaller and the decisions simpler.
The result is a site with no runtime framework, no hydration for reading, and no build step that takes longer than a second.
Contact
Interested in working together?
Tell me what you are building and what you need. A short note is enough.