About dung87.io.vn

dung87.io.vn is a personal hub — a homepage that doubles as a directory of standalone subdomain projects. Each project lives at its own subdomain (e.g. mbti.dung87.io.vn, blog.dung87.io.vn, cv.dung87.io.vn).

Unlike a traditional portfolio that lists everything on a single site, this hub points outward — it lists projects like a directory, and each click takes you to an independent subdomain.

Key features

• 🎨 Dark theme — #0F0F13 background + coral #FF6B81 accent, glass-morphism cards, animated gradient orbs.
• 🌐 Bilingual vi / en — vi at /, en at /en. Switcher in header. Full hreflang tags for SEO.
• 📂 Project directory — data from src/data/projects.json. Each project has status (live / coming_soon / ideating / archived).
• 🔍 Skill filter — click skill tag to filter grid by tech. URL persists ?skill=react for sharing.
• 📅 Now timeline — short “what I’m doing” log, latest 3 entries from src/data/now.json.
• 🏷️ Tags + tech — each project has tags (user-facing category) + tech (stack). Flexible sort/filter.
• 🚀 Lazy favicon — live cards auto-load favicon from the subdomain to 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 on push.
• 📋 Daily healthcheck — cron workflow probes every live subdomain, opens issue on failure.

Tech stack

Layer	Choice
Static site generator	Astro 5 (output: "static")
Styling	Tailwind CSS 3 via @astrojs/tailwind
Type system	TypeScript (strict)
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+ (see .nvmrc)

Current subdomains

Subdomain	Status	Stack	Description
mbti.dung87.io.vn	🟢 Live	React + TypeScript + Vite	MBTI Personality Test — 16 personality types
blog.dung87.io.vn	🟡 Coming soon	Astro + MDX	Personal blog — dev & tools notes
lab.dung87.io.vn	🟣 Ideating	—	Playground for small experiments
cv.dung87.io.vn	🟣 Ideating	Astro	Web-based CV / resume

Always-up-to-date list: see CLAUDE.md on 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)      │
└──────────────────────────────────────────────────┘

Next:

• Setup guide →
• Usage guide →