Developer & Designer•
This Portfolio Website
A dark-first, glassmorphic developer portfolio built with Astro 7 and Tailwind CSS v4. Zero-JS baseline, zero-FOUC dark mode, and content-collection-driven project case studies.
Production Impact: Static build in under 1.4s. Zero JavaScript shipped to the browser by default. Strict TypeScript — 0 errors, 0 warnings on astro check.
AstroTailwindJavaScript
Overview
This portfolio site is itself a project — a demonstration that I can build clean, fast, and visually distinctive static sites using the Astro framework.
Architecture Highlights
- Zero-JS by default: Every component renders to static HTML. No React, no Vue shipped to the browser.
- Zero-FOUC dark mode: A blocking inline script in
<head>applies thedarkclass before the first paint, preventing white flash on reload. - Tailwind v4 CSS-first tokens: Design tokens defined in
@themeusing OKLCH color space for perceptually uniform glassmorphic palette. - Content Collections with Zod: Project case studies and experience entries are validated at build time via Zod schemas — no runtime schema mismatch possible.
- Asymmetric Bento Grid: Project cards use CSS grid spanning to create visual hierarchy without JavaScript.
Tech Stack
- Framework: Astro 7
- Styling: Tailwind CSS v4 (
@tailwindcss/vite) - Type-checking:
@astrojs/check— strict TypeScript - SEO: Auto-generated sitemap + RSS feed via
@astrojs/sitemap