tech

Building My Modern Portfolio with Astro

A deep dive into creating a fast, responsive portfolio website using Astro 5, TypeScript, Tailwind CSS v4, and modern web technologies

Modern portfolio website built with Astro

My portfolio at rezajafar.com is a living experiment in modern web tooling. Here’s the quick tour.

Stack Used

  • Astro 5 for static-first performance and component islands.
  • TypeScript everywhere for confidence.
  • Tailwind CSS v4 with CSS-first theming.
  • Cloudflare Pages for edge-deployed hosting.

Highlights

  1. Zero-JS by default – pages ship as plain HTML/CSS unless they need interactivity.
  2. Dark mode remembers your preference and prevents flashes of unstyled content.
  3. Content collections give me type-safe MDX blogging.
  4. 100/100 Lighthouse scores across the board.

Lessons Learned

  • Astro’s island architecture hits the sweet spot between static and reactive.
  • CSS variables beat JS config for theming.
  • Small design flourishes (avatar glow, smooth transitions) matter.

If you’re considering Astro for your own site, give it a spin—you might never look back.