Giới thiệu dung87.io.vn

dung87.io.vn là personal hub — trang chủ cá nhân kiêm directory cho một hệ thống các dự án con. Mỗi dự án là một subdomain riêng (vd mbti.dung87.io.vn, blog.dung87.io.vn, cv.dung87.io.vn).

Khác với một portfolio truyền thống liệt kê tất cả dự án trong cùng một site, hub này trỏ đi — liệt kê các project như một directory, mỗi click mở ra một subdomain độc lập.

Tính năng chính

• 🎨 Dark theme — identity tối #0F0F13 + accent coral #FF6B81, glass-morphism cards, animated gradient orbs.
• 🌐 Song ngữ vi / en — vi ở /, en ở /en. Switcher trong header. hreflang tags đầy đủ cho SEO.
• 📂 Project directory — data từ src/data/projects.json. Mỗi project có status (live / coming_soon / ideating / archived).
• 🔍 Skill filter — click skill tag → lọc project grid theo tech. URL persist ?skill=react để share được.
• 📅 Now timeline — nhật ký ngắn “đang làm gì”, 3 entries gần nhất từ src/data/now.json.
• 🏷️ Tags + tech — mỗi project có tags (category user-facing) + tech (stack). Sort/filter linh hoạt.
• 🚀 Lazy favicon — card live tự load favicon từ subdomain để prove liveness.
• ♿ Accessibility — skip-link, ARIA roles, focus rings, prefers-reduced-motion guard.
• ⚡ Fast — ~50KB HTML, ~3KB inline JS. Lighthouse mobile ≥95.
• 🤖 Auto CI/CD — GH Actions validate → build → deploy tự động khi push.
• 📋 Daily healthcheck — cron workflow probe mọi live subdomain, mở issue nếu fail.

Tech stack

Layer	Choice
Static site generator	Astro 5 (output: "static")
Styling	Tailwind CSS 3 qua @astrojs/tailwind
Type system	TypeScript (strict mode)
Data validation	Zod (runtime + build-time)
Deployment	Cloudflare Pages (free tier)
DNS	Cloudflare (zone dung87.io.vn)
CI/CD	GitHub Actions (CI + Deploy + Healthcheck)
Node	20+ (xem .nvmrc)

Subdomains hiện tại

Subdomain	Status	Stack	Mô tả
mbti.dung87.io.vn	🟢 Live	React + TypeScript + Vite	MBTI Personality Test — 16 nhóm tính cách
blog.dung87.io.vn	🟡 Coming soon	Astro + MDX	Personal blog — ghi chú về dev & tools
lab.dung87.io.vn	🟣 Ideating	—	Playground cho ý tưởng nhỏ
cv.dung87.io.vn	🟣 Ideating	Astro	Web-based CV / resume

Danh sách always-up-to-date: xem CLAUDE.md trên GitHub.

Architecture

┌──────────────────────────────────────────────────┐
│ GitHub: vuhuudung/dung87.io.vn                  │
│   └─ push to main                                │
│       ↓                                          │
│   GitHub Actions: deploy.yml                     │
│       ├─ npm ci                                  │
│       ├─ npm run validate                        │
│       ├─ npm run check-claude-md                 │
│       ├─ npm run build                           │
│       └─ cloudflare/pages-action@v1              │
│              ↓                                   │
│   Cloudflare Pages project 'dung87-io-vn-hub'    │
│       ├─ Custom domain: dung87.io.vn             │
│       ├─ Custom domain: www.dung87.io.vn         │
│       └─ Auto SSL                                │
│              ↓                                   │
│   https://dung87.io.vn/* (CDN-cached, fast)      │
└──────────────────────────────────────────────────┘

Xem tiếp:

• Cài đặt từ đầu →
• Hướng dẫn sử dụng →