khuong.dev

· 1 min read

Personal engineering hub built with Astro 5.x - multi-style x multi-theme system with 8 layouts and 8 color palettes

github | demo

tags: portfolio, engineering-hub, astro, ssg, multi-theme

stack: astro, typescript, css-variables, view-transitions, vite, biome, playwright

What

Personal engineering hub at khuong.dev - a portfolio site showcasing builds, CV, and technical identity.

Built with Astro 5.x (SSG, zero UI frameworks). Features a multi-style x multi-theme system: 8 layout styles (terminal, minimal-blog, modern-card, brutalist, bento-grid, glassmorphism, oled-dark, aurora) resolved at build time, and 8 color themes (nord-dark, dracula, etc.) switchable at runtime via localStorage.

Bilingual (EN/VI) with per-entry locale fallback. CV auto-generates PDF via Typst.

Why

A single site to represent everything I build and who I am as an engineer - without depending on third-party platforms.

The multi-style system exists because design is part of engineering. Each style is a self-contained experiment in CSS architecture, and the theme layer proves the styles are truly decoupled from color.

Notes

  • Build-time style isolation via custom Vite plugin (singleStylePlugin) - only the active style’s CSS/components are bundled
  • Runtime theme switching with CSS variables (--bg, --fg, --accent, etc.) and data-theme attribute
  • Factory pattern for component exports - pages never import style-specific components directly
  • Astro View Transitions for SPA-like navigation without a JS framework
  • Content collections with Zod schema validation for builds and CV entries
  • CV PDF generation via Typst typesetting (scripts/build-cv.sh)
  • i18n: skills and contact data driven by skills.yaml, labels by locale JSON files
  • CI/CD: GitHub Actions for build, lint (Biome), format (dprint), unit tests (Vitest), E2E tests (Playwright)