zfengyuu zfengyuu

zfengyuu — Nguyen Phong Vu Portfolio

Personal portfolio for Nguyen Phong Vu (zfengyuu), built with Astro, TypeScript, Tailwind CSS v4, MDX, and the Graphite / Signal aesthetic.

npm ci
npm run dev

npm run check
npm run build
npm run preview

Design System: Graphite / Signal aesthetic with curated tokens (--background, --foreground, --accent, --line, --muted, --hover, --soft).
Typography: Geist Sans (UI/Body), Redaction with IBM Plex Serif fallback (Headings/Serif accents), Commit Mono (Code & Metadata).
Navigation & Lifecycle: Astro ClientRouter with View Transitions (vt-fade-out / vt-fade-in), theme preservation across DOM swap, and active route detection (/blog/[slug] correctly activates writing).
Theme Engine: data-theme="dark" (default) and light, applied before paint via inline script, synced to localStorage key portfolio-theme with fallback, zero flash on reload or navigation.
Ambient Motion: 5 concentric arcs (AmbientBackground.astro) with subtle 24fps pointer easing (max 8px amplitude), scroll-driven fade (max(0, 1 - scrollY / 800)), and auto-pause on hidden tab, scroll >= 800px, or prefers-reduced-motion.
Accessibility: Focus-visible outlines, "Skip to content" keyboard link, touch-friendly mobile navigation, full functionality when JavaScript is disabled, and immediate static rendering under prefers-reduced-motion.

Route	Purpose	SEO Status
`/`	Homepage with hero reveal, 4 verified projects, latest writing	`index, follow`
`/about`	Background, areas of interest, profile schema	`index, follow` (`ProfilePage`)
`/projects`	Verified projects with source code & demo links	`index, follow`
`/developers`	Developer resources, repository guides, contributing	`index, follow`
`/agents`	Practical 4-step workflow for working with coding agents	`index, follow`
`/writing`	Writing archive sorted by publication date	`index, follow`
`/blog/[slug]`	Articles with TOC, reading time, author, adjacent articles	`index, follow` (`BlogPosting`)
`/press`	Short & extended bios, official links, copy buttons	`index, follow`
`/mentoring`	Technical conversation guidance (issue trackers)	`noindex, follow` (excluded from sitemap)
`/bookshelf`	Reading notes (empty state)	`noindex, follow` (excluded from sitemap)
`/uses`	Verified tech stack for projects & tools	`index, follow`
`/contact`	Contact channels (GitHub & repository issues)	`index, follow`
`/privacy`	Website preference storage & external link notice	`index, follow`
`404`	Custom not-found error page	`noindex, follow` (excluded from sitemap)

Site Configuration & Social Links: src/config/site.ts
Projects & URLs: src/data/projects.ts
Developer Resources: src/data/resources.ts
Bookshelf Entries: src/data/books.ts
Uses & Technologies: src/data/uses.ts
Blog Articles: src/content/blog/ (.md, .mdx)
Avatar Asset: public/avatar.svg
Social Card (Open Graph): public/og/zfengyuu.png (regenerate via python3 scripts/generate-og.py)

The following fields are optional or currently use the empty state per specification:

Email Address: Set in src/config/site.ts (email: null).
Social Profiles (LinkedIn, X/Twitter): Set in src/config/site.ts (linkedin: null, twitter: null).
Formal Location & Work Status / Availability: In src/config/site.ts (location: null, availability: null, bookingUrl: null).
Bookshelf Items: Add books to src/data/books.ts when ready. Adding items will automatically remove noindex and include /bookshelf in the sitemap.
Mentoring / Booking Service: Update src/pages/mentoring.astro and astro.config.mjs when booking options are announced.