khuong.dev

· 1 phút đọc

Personal engineering hub xây dựng bằng Astro 5.x - hệ thống đa giao diện x đa chủ đề với 8 layout và 8 bảng màu

github | demo

thẻ: portfolio, engineering-hub, astro, ssg, multi-theme

công nghệ: astro, typescript, css-variables, view-transitions, vite, biome, playwright

What

Engineering hub cá nhân tại khuong.dev - nơi tổng hợp mọi thứ mình build: projects, CV và technical identity.

Build bằng Astro 5.x (SSG, không dùng UI framework). Tính năng nổi bật: hệ thống multi-style x multi-theme - 8 kiểu layout (terminal, minimal-blog, modern-card, brutalist, bento-grid, glassmorphism, oled-dark, aurora) được chọn lúc build, và 8 bảng màu (nord-dark, dracula, v.v.) chuyển đổi runtime qua localStorage.

Song ngữ (EN/VI) với fallback theo từng bài viết. CV tự động tạo PDF qua Typst.

Why

Một website duy nhất để đại diện cho toàn bộ những gì mình build và mình là ai với tư cách một engineer - không phụ thuộc platform bên thứ ba.

Hệ thống đa giao diện tồn tại vì thiết kế là một phần của kỹ thuật. Mỗi style là một thử nghiệm độc lập về kiến trúc CSS, và lớp theme chứng minh rằng style thực sự tách biệt khỏi màu sắc.

Notes

  • Isolate style lúc build bằng custom Vite plugin (singleStylePlugin) - chỉ bundle CSS/components của style đang active
  • Chuyển đổi theme runtime bằng CSS variables (--bg, --fg, --accent,…) và thuộc tính data-theme
  • Áp dụng Factory pattern cho component exports - các trang không import trực tiếp component theo style
  • Astro View Transitions cho điều hướng mượt kiểu SPA mà không cần JS framework
  • Content collections với Zod schema validation cho builds và CV
  • Tạo PDF CV qua Typst typesetting (scripts/build-cv.sh)
  • i18n: skill và contact data từ skills.yaml, label từ file JSON theo locale
  • CI/CD: GitHub Actions cho build, lint (Biome), format (dprint), unit tests (Vitest), E2E tests (Playwright)