Hệ thống thiết kế portfolio và UI spec (Parker)

Chỉ design và planning. Doc này là nguồn cho tab LAB của plan 30 ngày (plans/study-plan-30d-redesign.md): lab trở thành một project xuyên suốt, portfolio full-stack của Parker.

• Stack: Next.js App Router + TypeScript (apps/web) với shadcn/ui (Radix + Tailwind v4) và TanStack Query, Table, Form và Virtual; NestJS (apps/api); MySQL 8 trong Docker Compose; Prisma là ORM duy nhất; server-side session cho auth; shared zod schema, type và query key trong packages/contracts; component trong packages/ui.
• Nguyên tắc: typography first (3.2); không hard-code content, mọi thứ hiện trên UI đều đến từ API/CMS (1.5, 4.5); quyết định backend được giải thích cho backend beginner và build từ dưới lên (1.6, 6).
• Bản sửa v2: sau khi review mockup v1 ("quá trần"), lớp visual được làm dày hơn, lấy longpham.tech làm reference: phân tích ở 2.1–2.2, token mới ở 3.1–3.1b, motion ở 3.4, component ở 4.7, wireframe ở 5.1–5.6, phần thêm cho admin ở 5.11, rebuild brief ở 7.
• Source: CV của Parker (đã cũ, ghi "4+ years"; hiện anh có ~5 năm với Vue/Nuxt/TypeScript).
• Privacy: thông tin liên hệ là <email> / <phone> ở mọi nơi, kể cả seed và fixture. Bản thân file CV không được commit.
• § refs: Heading là <h2 id="s-N">N. Title</h2> (chapter) và <h3 id="s-N-M">N.M Title</h3> (section; cho phép hậu tố chữ, ví dụ 3.1b). §1.5 map tới heading có text bắt đầu bằng 1.5 , và tới HTML id tường minh s-1-5 (s- + chữ/số, . → -). Ưu tiên #s-1-5 hơn GitHub auto-slug, vì auto-slug bỏ dấu chấm (15-content-model-dbcms).

---

1. Phân tích CV

Trong chương này: các mục đánh số bên dưới.

1.1 Định vị

Headline (en): Senior Frontend Engineer. 5 years shipping data-dense product UIs in Vue, Nuxt and TypeScript, now building with Next.js. Headline (vi): Senior Frontend Engineer. 5 năm xây dựng giao diện sản phẩm nhiều dữ liệu với Vue, Nuxt và TypeScript, hiện phát triển với Next.js.

Sub-line: Fintech (Web3/ReFi) · enterprise (Samsung SDS) · e-commerce tooling. Hà Nội, làm việc với team Hàn, Mỹ và Anh.

Tên hiển thị: Parker Vu, kèm tên pháp lý Vu Van Hung (Vũ Văn H…ng: confirm dấu với Parker trước khi seed) trên About và trong JSON-LD. GitHub: parker2808.

1.2 Câu chuyện portfolio kể

Mỗi role trên CV đều là một migration: chuyển cart giữa Shopify/BigCommerce/WooCommerce/Magento (LitGroup), chuyển logic MSP App sang MSP Advanced mới (Samsung SDS), lead Particula từ v1 (Vue 2) sang v2 (Nuxt 3, Vue 3, PrimeVue, TanStack Query). Sợi dây xuyên suốt là:

"Mình đẩy product tiến lên mà không làm gãy chúng."

Ba hồi:

1. Gốc backend (2021): API và data integrity cho migration xuyên 4+ platform e-commerce; nói chuyện với khách US/UK khi data gãy.
2. Frontend enterprise (2022–2024): platform Samsung SDS với team Hàn, 5–15 người, độ tin cậy nhờ test và bug triage.
3. Ownership (2024–nay): main frontend developer tại Particula, lead rewrite v1→v2, build core component, đưa Playwright spec vào.

Bản thân portfolio là hồi 4, đồng thời là câu trả lời cho dòng yếu nhất trên CV ("React/Next JS (a bit)", "Backend (basic)"): một app production Next.js + NestJS có CMS, build công khai.

1.3 Case study đưa lên (theo thứ tự)

1.4 Gap cần bổ sung (hỏi Parker, hoặc đánh TODO trong CMS)

1. Không có metric nào. Thu thập ít nhất một con số cho mỗi case study: số page/route đã migrate, số component trong library v2, LCP hoặc bundle size trước/sau, số Playwright spec và thời gian CI, xu hướng số bug, số record hoặc store migrate mỗi tháng, tỉ lệ migration thành công, số support ticket đã resolve.
2. Số năm và title đã cũ. "4+" → "5 years"; Objective → một câu định vị (1.1). Chỉ dùng "Senior Frontend Engineer" nếu Parker ổn với cách gọi đó; không thì "Frontend Engineer (5 yrs)".
3. Date chồng nhau. CMC Global kết thúc tháng 6/2024, Kobizo bắt đầu tháng 2/2024, và Particula ghi "main frontend since July 2024". Confirm ngày thật; timeline hiện theo tháng nên overlap sẽ nhìn thấy.
4. Typo và naming. "Particular" vs "Particula"; "we also using", "specifictly", "sometime". Giải thích tên nội bộ ("Lego framework" = UI framework nội bộ của Samsung; "MSP").
5. Skills list phẳng. Đổi thành skill nhóm theo độ sâu: Daily (Vue 3, Nuxt 3, TypeScript, Pinia, TanStack Query, Tailwind, PrimeVue, Playwright), Shipped before (Vue 2/Vuex, Vitest, REST/GraphQL/OAuth, Flask, Laravel, MySQL), Growing (React, Next.js, NestJS). Bỏ GPA và boilerplate "Version control".
6. Thiếu bằng chứng seniority: mentoring, code review, quyết định design, RFC. Xin 2 câu chuyện cụ thể (cũng feed lab Day 25–27).
7. Không có link. URL product live (site public của Particula), GitHub repo, và sau này là blog. Thêm <email> và LinkedIn làm placeholder.
8. Trách nhiệm, không phải outcome. Viết lại bullet theo verb + what + result ("Led the Vue 2 → Nuxt 3 rewrite of Particula's investor app; shipped N core components; replaced Axios with TanStack Query, cutting duplicate requests by X%").

1.5 Content model (DB/CMS)

Quy tắc: nếu visitor đọc được, và nội dung đó nói về Parker hoặc site, thì nó là một row trong database và edit được trong admin. Chỉ những thứ này ở lại trong code: design token, chuỗi UI chrome (label button và form, validation và empty/error message generic, aria label, "min read", format date và number) trong apps/web/messages/{en,vi}.json, và danh sách route. Mục 4.5 giải thích UI enforce rule này thế nào.

Quy ước (cố ý làm đơn giản). Một table cho mỗi thứ trên page; không dùng pattern khôn lỏi.

Shorthand field bên dưới: title{En,Vi} nghĩa là hai cột titleEn và titleVi. ? = optional. Mọi table còn có id, createdAt, updatedAt.

Bổ sung v2 (lớp rich). Mọi thứ section mới hiện ra vẫn là một row; không có gì decorative mang content. Table mới theo cùng quy ước (sortOrder, isVisible, cặp En/Vi).

Quan hệ nhìn nhanh:

SiteSettings(1) Profile(1) NavItem* SocialLink* PageSection* Principle* Education*
ProfileStat* ProcessStep* (v2)
SkillCategory 1──* Skill *──* Project 1──* ProjectMetric
 Domain 1──* Project (v2)
 *──* Experience 1──* Project (optional link)
 Project 1──* ProjectImage *──1 Media
Post *──* Tag ContactTopic 1──* ContactMessage
User 1──* Session User 1──* AuditLog User 1──* Media (uploadedBy)

Ví dụ quy ước trong apps/api/prisma/schema.prisma:

model Project {
 id Int @id @default(autoincrement())
 slug String @unique
 titleEn String
 titleVi String?
 taglineEn String
 taglineVi String?
 problemEn String @db.Text
 problemVi String? @db.Text
 status ContentStatus @default(DRAFT)
 publishedAt DateTime?
 sortOrder Int @default(0)
 metrics ProjectMetric[]
 skills Skill[]
 createdAt DateTime @default(now())
 updatedAt DateTime @updatedAt
 @@index([status, sortOrder])
 @@map("project")
}

Hai shape API. Public endpoint (GET /public/...?locale=vi) chọn ngôn ngữ trên server và trả field phẳng (title, không phải titleEn/titleVi), fallback sang English với lang: "en" trên nhóm field để UI set lang trên element đó. Admin endpoint trả cả hai cột để edit. Component vì thế không chứa logic locale.

Seed (prisma/seed.ts) load content từ CV: site settings, profile (placeholder cho <email> / <phone>), nav, social link, page section, 4 row experience, education, ~25 skill trong 5 category, 4 project ở DRAFT, 3 principle, contact topic, user owner. 0 post. v2 thêm 4 domain (mỗi project được link), 4 profile stat, 5 process step, showInMarquee trên ~10 skill, keyFacts/factChips nháp cho Particula, và các PageSection key mới.

1.6 Lộ trình backend cho backend beginner (một cách làm cho mỗi thứ)

Các mảnh nói chuyện với nhau thế nào:

Browser ──► Next.js (apps/web, :3000) ──/api/* rewrite──► NestJS (apps/api, :4000) ──Prisma──► MySQL (:3306, Docker)
 Server Components fetch controllers → services data on a Docker volume

Khi dev, chỉ MySQL và Adminer (web UI để nhìn vào DB) chạy trong Docker; Next và Nest chạy với pnpm dev để restart và debug vẫn nhanh. Day 21 cả ba chạy trong Compose, đúng cách chúng sẽ chạy trên production.

Glossary backend (dùng trong các ngày lab):

Thang backend (mỗi bậc chỉ cần các bậc dưới nó; số ngày nằm ở mục 6):

1. Docker: chạy MySQL + Adminer, hiểu volume, port, .env.
2. SQL bằng tay: tạo một table, insert, select, join, rồi bỏ đi.
3. Nest cơ bản: một module, controller và service, GET /health.
4. Prisma: model đầu, một migration, một seed; đọc SQL được generate.
5. Read API: Nest + Prisma, public GET endpoint, error handling, validation.
6. Relation: 1-to-many và many-to-many, include vs select.
7. Write API: create, update, archive, reorder trong một transaction; lỗi unique-constraint → 409.
8. Performance cơ bản: index, EXPLAIN, tránh N+1 query.
9. Auth: user, password hashing, session, guard, role.
10. Feature: contact + rate limit, upload, publish → revalidate, SSE, audit log, analytics.
11. Ops: mọi thứ trong Compose, health check, prisma migrate deploy, backup bằng mysqldump.

---

2. Hướng design

Trong chương này: Concept (v2): "Readable release notes, with atmosphere." Interface lấy typography làm trục, Linear-calm, mỗi project đọc như một changelog entry đã edit kỹ: version tag, diff before → after và metadata mono.

Concept (v2): "Readable release notes, with atmosphere." Interface lấy typography làm trục, Linear-calm, mỗi project đọc như một changelog entry đã edit kỹ: version tag, diff before → after và metadata mono. v2 thêm một lớp atmosphere nhẹ (surface nhuốm jade, grid có mask, glow mềm, scroll reveal) và loại section giàu hơn (stats, tech marquee, domain card, diagram migration-flow) để page sống mà không hại việc đọc.

• Typography vẫn là design. Atmosphere nằm phía sau content và không bao giờ nằm dưới body text; page long-form (case study, post) giữ nền trơn phía sau measure 66ch. Recruiter lướt heading và số trong 10 giây; engineer đọc 2.000 từ case study mà không mỏi (mục 3.2).
• Vì sao release notes: sợi xuyên suốt của CV là migration (v1 → v2). Motif version và diff biến điều đó thành ngôn ngữ visual, và cùng mức kiềm chế đó scale được sang admin dày đặc.
• Accent: jade/teal. Gật đầu với Vue green (gốc của anh) và domain ReFi/carbon của Particula. v2 dùng đậm hơn, nhưng chỉ ở ba chỗ: cụm accent trên hero, số stat, và CTA primary (kèm glow ở dark mode). Mọi chỗ khác giữ tiết chế: link, focus, một highlight mỗi card.
• Reference: longpham.tech (atmosphere, nhịp section, stats + marquee, domain card, cấu trúc card và page case study; xem 2.1), Linear (mật độ admin, command palette, status pill), Vercel Geist và Stripe docs (type hierarchy, prose, code block), Practical Typography (measure, line-height), changelog Raycast và Linear (entry có version), GitHub diff view.
• Tone: tự tin, cụ thể, trầm. Câu ngắn, số thật, không "passionate developer". Motion mang tính functional hoặc ambient-và-chậm, không bao giờ giật mắt, và luôn tắt dưới prefers-reduced-motion. Light và dark đều first-class; lớp atmosphere có biến thể light (2.2).

2.1 Phân tích reference: longpham.tech (chụp 1440 và 390, Oct 2026)

Nó là gì. Một site Next.js + Tailwind v4 (Geist + Geist Mono), dark-only, nhuốm xanh (#06110C background, #4ADE80 primary), khoảng 5.000px cao trên desktop. Header sticky, rồi: hero → stats band → tech marquee → domain card → principle đánh số → feature split kèm flow diagram → certification card → card case study featured → CTA band → footer tối giản. Page case study và list blog dùng cùng ngôn ngữ card.

Vì sao nó giàu trong khi bản mình trần (cùng mức kiềm chế, khác mật độ):

Điểm yếu cần tránh: dark-only (không có light mode); nhiều text xanh-xám muted 12–14px; placeholder {{TODO: …}} hiện trên case study live (cần check lúc publish); animation trang trí (icon bob, ring pulse) chạy mãi; email hiện dạng plain text; page rất dài mà không có in-page navigation; ảnh certification là screenshot PDF.

2.2 Cái nào lấy, chỉnh lại, hoặc bỏ cho Parker

---

3. Design tokens

Trong chương này: Token dùng tên biến của shadcn/ui (--background, --primary, --muted-foreground, …) làm lớp semantic, kèm vài extension (--subtle-foreground, --success, --warning, --info, --primary-subtle).

Token dùng tên biến của shadcn/ui (--background, --primary, --muted-foreground, …) làm lớp semantic, kèm vài extension (--subtle-foreground, --success, --warning, --info, --primary-subtle). Một naming scheme nghĩa là component shadcn chạy không sửa, và custom component của mình dùng cùng utility (bg-primary, text-muted-foreground).

Mọi cặp color bên dưới đã đo bằng công thức relative luminance WCAG 2.x. Text cần ≥ 4.5:1 (normal) và ≥ 3:1 (≥ 24px, hoặc ≥ 18.66px bold). Border input và focus ring cần ≥ 3:1 (SC 1.4.11). Divider trang trí (--border) được miễn và không bao giờ là ranh giới duy nhất của một control.

3.1 Color (semantic, tên shadcn)

Thay đổi v2: neutral dark được nhuốm về jade (hue ≈ 165°) thay vì gray thuần, cho độ sâu mà không thêm màu. Light giữ warm neutral. Mọi cặp dark đã đo lại.

Chuyển theme: next-themes với attribute="class" (mặc định shadcn, .dark trên <html>), default system, disableTransitionOnChange. Chọn theme là UI preference, không phải content.

3.1b Atmosphere và hue theo domain (v2)

Token atmosphere (trang trí; không bao giờ mang text, không bao giờ nằm sau body copy):

Hue theo domain (cho Domain.hue, dùng trên domain card, pill case study và accent cạnh trên của card). Pill luôn hiện icon + text label; hue không bao giờ là cue duy nhất. Tint = hue 10% trên #FFFFFF (light) / 14% trên --card (dark).

3.2 Typography (cốt lõi của design)

Mục tiêu, theo thứ tự: (1) mọi dấu tiếng Việt render sạch ở mọi size, (2) case study và note long-form đọc thoải mái 10+ phút, (3) hierarchy rõ với ít size, (4) code không mơ hồ.

Family (3, mỗi cái một việc).

Load bằng next/font/google, subsets: ['latin', 'latin-ext', 'vietnamese'], display: 'swap', adjustFontFallback bật (fallback khớp metric, không layout shift). Expose thành --font-heading, --font-sans, --font-mono. Không load gì khác; tổng ≤ 5 file font.

Scale: 8 size public (mỗi cái một việc), 3 size admin. v2 thêm text-display (chỉ hero home) và text-eyebrow (chỉ label mono). Hierarchy dùng size và weight và space; đừng thêm size, hãy đổi weight hoặc spacing.

Markdown #### trở xuống render thành text-prose 600 (không size mới). Post và case study bắt đầu từ ##; title page là H1 duy nhất.

Rule long-form (component Prose).

• Measure: max 66ch (≈ 680px ở Inter 18px); không bao giờ rộng hơn 75ch, không bao giờ hẹp hơn 45ch trên mobile (padding page 20px).
• Spacing: paragraph cách 1.1em; ## nhận 2.2em trên và 0.6em dưới; ### 1.6em / 0.5em. Space trên heading luôn lớn hơn dưới, để nó dính với content của chính nó.
• List: 0.4em giữa item, bullet treo (padding-inline-start: 1.25em).
• Link: --primary, underline luôn bật trong prose (text-underline-offset: 0.2em, text-decoration-thickness: 1px, 2px lúc hover). Color không bao giờ là cue duy nhất.
• Emphasis: bold 600, italic là italic thật; không paragraph ALL CAPS.
• Number: font-variant-numeric: tabular-nums trong metric, table và date.
• Quote và callout: border trái 3px, cùng size với body, text --muted-foreground; không pull quote oversized.
• Image: rộng bằng measure, caption text-meta phía dưới.

Code.

• Block: JetBrains Mono 15px (0.875em của prose 17–18px), line-height 1.65, background --muted, rounded-lg (8px), padding 16px, thanh filename optional, scroll ngang (vùng focusable với aria-label), toggle wrap. Max width thiết kế ~80 character. Shiki với theme light và dark chỉnh theo palette (comment dùng --subtle-foreground, ≥ 4.5:1).
• Inline: 0.9em, background --muted, padding 0.15em × 0.35em, rounded-sm (4px), không đổi màu.

An toàn tiếng Việt.

• Line-height không bao giờ dưới 1.2 (heading) hoặc 1.5 (text UI); dấu chồng (Ỗ, ặ) bị cắt nếu thấp hơn.
• Letter-spacing ≥ -0.015em trên heading, 0 trên body; không bao giờ track body text tiếng Việt.
• Mọi container overflow: hidden hoặc line-clamp nhận padding-block: 0.15em để dấu trên và dưới không bị cắt.
• lang được set trên <html> theo locale, và trên mọi element hiện English fallback trong page vi.
• Chuỗi vi dài hơn ~10–15%: button, nav và table header phải chứa được vi ở 360px mà không truncate.
• Chuỗi QA dùng trong mọi type story: Hưởng ứng - Ở Đồng Tháp, những người thợ xây đã hoàn thành ngôi nhà mới. 0O 1lI {}.

3.3 Spacing, radius, elevation

Dark mode thể hiện elevation bằng surface sáng hơn kèm hairline trong 1px, không phải chỉ bằng shadow.

3.4 Motion

Rule (v2):

• Chỉ animate opacity và transform (kèm box-shadow/border-color lúc hover). Không scroll-jacking, không parallax gắn vị trí scroll, không effect cursor-follow.
• Mọi effect dưới đây là CSS-only trừ reveal và count-up, dùng một hook IntersectionObserver dùng chung (useInView, once: true). Không animation library.
• Animation ambient chạy chỉ trên hero home và CTA band, pause khi ra khỏi màn (animation-play-state: paused qua cùng observer) và khi tab bị ẩn.

• Không bao giờ animate: body text, prose, code, table row, UI admin (admin chỉ giữ transition menu/dialog/toast từ shadcn).
• @media (prefers-reduced-motion: reduce): mọi effect trên fallback như đã liệt kê; duration → 0.01ms trừ fade opacity ở --dur-fast; timeline render bung hết.
• @media (prefers-reduced-transparency: reduce): --card-glass → --card đặc, ẩn orb.

3.5 Breakpoints và z-index

3.6 Theme shadcn: CSS variables (`packages/ui/src/styles/globals.css`)

shadcn/ui (Tailwind v4, style new-york, baseColor: neutral, cssVariables: true) được init trong packages/ui với setup monorepo (components.json ở cả packages/ui và apps/web). globals.css được generate sẽ bị thay bằng block dưới; component shadcn lúc đó nhận palette của mình mà không sửa màu từng component. Dùng hex thay OKLCH mặc định của shadcn để giá trị khớp đúng bảng contrast.

@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));

:root {
 --radius: 0.5rem;

 --background: #FAFAF9; --foreground: #18181B;
 --card: #FFFFFF; --card-foreground: #18181B;
 --popover: #FFFFFF; --popover-foreground: #18181B;
 --primary: #0F766E; --primary-foreground: #FFFFFF;
 --secondary: #F2F2EF; --secondary-foreground: #18181B;
 --muted: #F2F2EF; --muted-foreground: #52525B;
 --accent: #F2F2EF; --accent-foreground: #18181B;
 --destructive: #B42318; --destructive-foreground: #FFFFFF;
 --border: #E4E4E0; --input: #8A8A93; --ring: #0F766E;
 --chart-1: #0F766E; --chart-2: #1D4ED8; --chart-3: #93370D; --chart-4: #6B6B74; --chart-5: #067647;
 --sidebar: #F4F4F2; --sidebar-foreground: #18181B;
 --sidebar-primary: #0F766E; --sidebar-primary-foreground: #FFFFFF;
 --sidebar-accent: #EAEAE6; --sidebar-accent-foreground: #18181B;
 --sidebar-border: #E4E4E0; --sidebar-ring: #0F766E;

 /* extensions */
 --subtle-foreground: #6B6B74;
 --primary-hover: #115E59;
 --primary-subtle: #E3F2EF; --primary-subtle-foreground: #115E59;
 --success: #067647; --success-subtle: #E6F1EC;
 --warning: #93370D; --warning-subtle: #F4EBE7;
 --info: #1D4ED8; --info-subtle: #E8EDFB;
 --destructive-subtle: #F7E9E8;

 /* v2: bands, atmosphere, domain hues */
 --band: #F3F5F3; --border-strong: #CFCFC9;
 --grid-line: rgb(15 118 110 / .06); --glow: rgb(15 118 110 / .10);
 --glow-button: var(--shadow-1); --card-glass: rgb(255 255 255 / .72);
 --hue-jade: #0F766E; --hue-jade-subtle: #E7F1F1;
 --hue-amber: #8A4B08; --hue-amber-subtle: #F3EDE6;
 --hue-blue: #1D4ED8; --hue-blue-subtle: #E8EDFB;
 --hue-violet: #6D28D9; --hue-violet-subtle: #F0EAFB;
 --hue-rose: #B4235A; --hue-rose-subtle: #F8E9EF;

 --shadow-1: 0 1px 2px rgb(16 24 40 / .06);
 --shadow-2: 0 4px 12px -2px rgb(16 24 40 / .10), 0 2px 4px -2px rgb(16 24 40 / .06);
 --shadow-3: 0 16px 40px -8px rgb(16 24 40 / .18);

 --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms;
 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
 --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

 --z-raised: 10; --z-header: 100; --z-sidebar: 200; --z-dropdown: 300;
 --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-skip: 700;

 --container: 1120px; --measure: 66ch;
}

.dark {
 --background: #0A0F0E; --foreground: #E8EFED;
 --card: #111817; --card-foreground: #E8EFED;
 --popover: #172120; --popover-foreground: #E8EFED;
 --primary: #2DD4BF; --primary-foreground: #042F2B;
 --secondary: #172120; --secondary-foreground: #E8EFED;
 --muted: #172120; --muted-foreground: #9DB0AB;
 --accent: #172120; --accent-foreground: #E8EFED;
 --destructive: #F97066; --destructive-foreground: #0A0F0E;
 --border: #233230; --input: #62807A; --ring: #2DD4BF;
 --chart-1: #2DD4BF; --chart-2: #7AA2F7; --chart-3: #FDB022; --chart-4: #809590; --chart-5: #47CD89;
 --sidebar: #0C1211; --sidebar-foreground: #E8EFED;
 --sidebar-primary: #2DD4BF; --sidebar-primary-foreground: #042F2B;
 --sidebar-accent: #172120; --sidebar-accent-foreground: #E8EFED;
 --sidebar-border: #233230; --sidebar-ring: #2DD4BF;

 --subtle-foreground: #809590;
 --primary-hover: #5EEAD4;
 --primary-subtle: #0F2E2B; --primary-subtle-foreground: #5EEAD4;
 --success: #47CD89; --success-subtle: #1A2F25;
 --warning: #FDB022; --warning-subtle: #3A2F18;
 --info: #7AA2F7; --info-subtle: #1B2540;
 --destructive-subtle: #3A1F1F;

 --band: #0D1412; --border-strong: #2F4542;
 --grid-line: rgb(45 212 191 / .08); --glow: rgb(45 212 191 / .18);
 --glow-button: 0 0 24px -6px rgb(45 212 191 / .55); --card-glass: rgb(17 24 23 / .72);
 --hue-jade: #2DD4BF; --hue-jade-subtle: #15322F;
 --hue-amber: #FBBF24; --hue-amber-subtle: #322F19;
 --hue-blue: #7AA2F7; --hue-blue-subtle: #202B36;
 --hue-violet: #C4B5FD; --hue-violet-subtle: #2A2E37;
 --hue-rose: #FDA4C4; --hue-rose-subtle: #322C2F;

 --shadow-1: 0 0 0 1px rgb(255 255 255 / .06);
 --shadow-2: 0 0 0 1px rgb(255 255 255 / .08), 0 8px 24px rgb(0 0 0 / .5);
 --shadow-3: 0 0 0 1px rgb(255 255 255 / .10), 0 24px 48px rgb(0 0 0 / .6);
}

@media (prefers-reduced-motion: reduce) {
 :root { --dur-instant: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; }
 *, *::before, *::after { scroll-behavior: auto !important; }
 .marquee-track, .orb, .diagram-pulse { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
 :root, .dark { --card-glass: var(--card); }
 .orb { display: none; }
}

3.7 Mapping Tailwind v4 (cùng file, `@theme inline`)

@theme inline biến mọi variable thành utility theo theme đang active: bg-background, text-muted-foreground, text-subtle-foreground, bg-primary-subtle, border-input, ring-ring, rounded-lg, shadow-2, font-heading, text-prose, bg-band, border-border-strong, bg-hue-amber-subtle text-hue-amber, text-display, text-eyebrow, z-modal, duration-base, ease-out.

@theme inline {
 --color-background: var(--background); --color-foreground: var(--foreground);
 --color-card: var(--card); --color-card-foreground: var(--card-foreground);
 --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground);
 --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground);
 --color-primary-hover: var(--primary-hover);
 --color-primary-subtle: var(--primary-subtle);
 --color-primary-subtle-foreground: var(--primary-subtle-foreground);
 --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground);
 --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground);
 --color-subtle-foreground: var(--subtle-foreground);
 --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground);
 --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground);
 --color-destructive-subtle: var(--destructive-subtle);
 --color-success: var(--success); --color-success-subtle: var(--success-subtle);
 --color-warning: var(--warning); --color-warning-subtle: var(--warning-subtle);
 --color-info: var(--info); --color-info-subtle: var(--info-subtle);
 --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring);
 --color-band: var(--band); --color-border-strong: var(--border-strong);
 --color-card-glass: var(--card-glass);
 --color-hue-jade: var(--hue-jade); --color-hue-jade-subtle: var(--hue-jade-subtle);
 --color-hue-amber: var(--hue-amber); --color-hue-amber-subtle: var(--hue-amber-subtle);
 --color-hue-blue: var(--hue-blue); --color-hue-blue-subtle: var(--hue-blue-subtle);
 --color-hue-violet: var(--hue-violet); --color-hue-violet-subtle: var(--hue-violet-subtle);
 --color-hue-rose: var(--hue-rose); --color-hue-rose-subtle: var(--hue-rose-subtle);
 --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3);
 --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5);
 --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground);
 --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring);

 --radius-sm: calc(var(--radius) - 4px); /* 4px badges, kbd, inline code */
 --radius-md: calc(var(--radius) - 2px); /* 6px buttons, inputs */
 --radius-lg: var(--radius); /* 8px cards, menus, code blocks */
 --radius-xl: calc(var(--radius) + 4px); /* 12px dialogs, media */

 --font-heading: var(--font-be-vietnam-pro), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
 --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
 --font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;

 --text-display: clamp(2.5rem, 1.5rem + 4vw, 4rem); --text-display--line-height: 1.1;
 --text-title: clamp(2.125rem, 1.6rem + 2.2vw, 3rem); --text-title--line-height: 1.2;
 --text-heading: clamp(1.625rem, 1.5rem + 0.5vw, 1.875rem); --text-heading--line-height: 1.3;
 --text-subheading: 1.25rem; --text-subheading--line-height: 1.4;
 --text-prose: 1.125rem; --text-prose--line-height: 1.75;
 --text-body: 1rem; --text-body--line-height: 1.6;
 --text-meta: 0.875rem; --text-meta--line-height: 1.5;
 --text-eyebrow: 0.75rem; --text-eyebrow--line-height: 1.4; --text-eyebrow--letter-spacing: 0.08em;
 --text-ui-title: 1.25rem; --text-ui-title--line-height: 1.4;
 --text-ui: 0.875rem; --text-ui--line-height: 1.5;
 --text-ui-meta: 0.78125rem; --text-ui-meta--line-height: 1.4;

 --shadow-1: var(--shadow-1); --shadow-2: var(--shadow-2); --shadow-3: var(--shadow-3);
 --shadow-glow: var(--glow-button);
 --ease-out: var(--ease-out); --ease-in: var(--ease-in); --ease-in-out: var(--ease-in-out);
 --z-index-raised: var(--z-raised); --z-index-header: var(--z-header); --z-index-sidebar: var(--z-sidebar);
 --z-index-dropdown: var(--z-dropdown); --z-index-overlay: var(--z-overlay);
 --z-index-modal: var(--z-modal); --z-index-toast: var(--z-toast); --z-index-skip: var(--z-skip);

 --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem;
 --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem;
}

@layer base {
 * { @apply border-border outline-ring/50; }
 body { @apply bg-background text-foreground font-sans text-body antialiased; font-feature-settings: "cv05", "cv08"; }
 h1, h2, h3 { @apply font-heading; letter-spacing: -0.015em; }
 :lang(vi) .text-display { line-height: 1.2; }
 code, kbd, pre { font-variant-ligatures: none; }
 :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
}

Size mặc định của Tailwind vẫn dùng được vì component shadcn dùng text-sm (14px, bằng text-ui / text-meta) và text-xs (12px, badge và kbd). App code và product component chỉ được dùng 11 size có tên (8 public + 3 admin); một lint rule gắn cờ text-(xs|sm|base|lg|xl|[2-9]xl) bên ngoài components/ui/, nên size public thứ 9 không lọt được. Component không bao giờ dùng class palette thô (teal-700); eslint-plugin-tailwindcss với allowlist enforce điều này.

---

4. Components và layout

Trong chương này: Primitive là shadcn/ui (behavior của Radix, token của mình) như list ở 4.0; product component compose chúng.

Primitive là shadcn/ui (behavior của Radix, token của mình) như list ở 4.0; product component compose chúng. Mọi component interactive đều có default / hover / focus-visible / active / disabled kèm các state thêm được liệt kê, và một story Storybook hoặc Ladle cho từng state (light + dark).

4.0 Base layer: shadcn/ui + TanStack

Primitive là component shadcn/ui (Radix UI + Tailwind), copy vào packages/ui/src/components/ui/* bằng pnpm dlx shadcn@latest add … và mình chịu trách nhiệm phần source đó. Behavior và a11y lấy từ Radix; styling lấy từ token ở section 3. Product component (ProjectCard, Timeline, DataTable, …) nằm ở packages/ui/src/components/* và compose các component shadcn. TanStack lo data layer: Query (server state gọi Nest API), Table (admin table, headless), Form (contact form và admin editor, dùng zod qua Standard Schema), Virtual (chỉ list dài).

Không lấy từ shadcn (custom, build trên các primitive ở trên): Prose, CodeBlock (Shiki), MarkdownEditor (CodeMirror 6), Timeline, DiffStat, VersionTag, StatusPill, SaveStatus, SectionBoundary, DataTable (TanStack Table + shadcn table), MediaLibrary.

4.1 Primitive contract: variant, state, a11y (`packages/ui`)

4.2 Public site

4.3 Admin (kiểu Linear)

4.4 Layout và quy tắc grid

• Public container: max-width: var(--container) (1120px), page padding 20px → 32px (md) → 40px (lg). Prose max var(--measure) (66ch). Grid: 4 / 8 / 12 column, gutter 16 / 24 / 32px.
• Band (v2): section Band full-width (--band + border-y) xen kẽ với background thường để page dài có nhịp; content bên trong vẫn nằm trong container. Không bao giờ hai band liền nhau; không bao giờ band nằm trong prose. Atmosphere (grid/orb) chỉ ở home hero và CTA band.
• Vertical rhythm: gap section 64px mobile, 96px desktop (trong band: padding 64/80px); trong một section, heading → content 24px; gap card grid 24px.
• Home và list: project grid 1 col (base), 2 col (md), project featured span full width trên lg (cover trái 7 col, text phải 5).
• Case study / post: 12-col trên lg: content col 1–8, TOC sticky col 10–12. Media full-bleed được phép tràn ra tới width của container, không bao giờ ra viewport.
• Admin: fluid; sidebar 240 + content. List là table full-width. Editor: lg = editor + properties pane (320px); 2xl = editor + live preview + properties. Không bao giờ scroll ngang cả page, chỉ region table (focus được, aria-label).
• Touch: mọi target ≥ 44×44px trên coarse pointer (@media (pointer: coarse) phóng admin control lên 40px và hit area lên 44px).
• Content width theo locale: text vi dài hơn ~10–15%; button và nav phải chứa được label vi, không truncate ở 360px.

4.5 UI data-driven: không hard-code content

• Text lấy từ đâu. Content (mọi thứ ở section 1.5) lấy từ API. UI chrome lấy từ apps/web/messages/{en,vi}.json qua next-intl (t('contact.send')). Không còn nguồn nào khác. Enforce bằng react/jsx-no-literals (allowlist: punctuation, ·, →) trên apps/web/app/** và packages/ui/src/components/**.
• Component là pure. Product component nhận typed props từ packages/contracts (HeroSection({ profile, settings })) và không bao giờ fetch. Page và section container fetch rồi pass data xuống. Fixture trong packages/contracts/fixtures/* chỉ dùng cho story và test; seed data (section 1.5) là nguồn content thật duy nhất.
• Thứ tự và visibility. Home và About render sections.filter(s => s.isVisible).sort(bySortOrder).map(s => <SectionBoundary key={s.key} …>{registry[s.key](s)}</SectionBoundary>). registry map từng PageSection.key sang một container component trong code.
• Mọi section data-driven có 3 state ngoài happy path, wrap bởi một component, SectionBoundary = <ErrorBoundary> (với TanStack QueryErrorResetBoundary phía client) + <Suspense fallback={skeleton}> + check isEmpty:

• Data quan trọng. GET /public/site (settings, profile, nav, social link, section) cấp data cho layout. Nếu fail, app/[locale]/error.tsx render page chrome-only tối giản ("Something went wrong", Retry); không có fallback hard-code cho tên hay headline.
• SEO. generateMetadata đọc seoTitle/seoDescription của entity, fallback sang title/excerpt, rồi SiteSettings. OG image render từ cùng data đó.

4.6 Data fetching: Next App Router + TanStack Query

Quy tắc nhanh: public page server-render từ API rồi cache; admin là client app chạy bằng TanStack Query.

Default của query client (admin): staleTime: 30_000, gcTime: 5 * 60_000, refetchOnWindowFocus: true, retry: (n, err) => err.status >= 500 && n < 2 (không bao giờ retry 4xx), mutation retry: 0. Một QueryClient mỗi request phía server, một cái mỗi tab browser phía client (helper getQueryClient() theo guide TanStack Next.js).

Query key (packages/contracts/src/query-keys.ts), một factory để invalidation đoán được:

export const qk = {
 public: {
 site: (locale: Locale) => ['public', 'site', locale] as const,
 posts: (p: PostListParams) => ['public', 'posts', p] as const,
 },
 admin: {
 me: ['admin', 'me'] as const,
 list: (entity: Entity, p: ListParams) => ['admin', entity, 'list', p] as const,
 detail: (entity: Entity, id: number) => ['admin', entity, 'detail', id] as const,
 all: (entity: Entity) => ['admin', entity] as const,
 inbox: { unread: ['admin', 'inbox', 'unread'] as const },
 stats: (range: '7d' | '30d' | '90d') => ['admin', 'stats', range] as const,
 audit: (p: AuditParams) => ['admin', 'audit', p] as const,
 },
};

Pattern:

Cách dùng TanStack Form: contact form, login, mọi admin editor (profile, settings, project, post, experience, skill), và cell edit inline (nav label, sort). Field array cho row ProjectMetric và nav item. Validator là zod schema từ packages/contracts (validators: { onChange: schema, onSubmit: schema }), đúng bộ mà Nest ZodValidationPipe chạy.

4.7 Component rich-layer (v2)

Tất cả là product component trong packages/ui, nhận props (section 4.5), mỗi cái có skeleton / empty / error do SectionBoundary lo.

---

5. UI spec từng page

Trong chương này: Route: public dưới app/[locale]/(site)/… với locale ∈ {en, vi} (default en, vi gợi ý tự động từ Accept-Language, không bao giờ ép); admin dưới app/admin/(cms)/… (không localize, UI bằng en; field content edit theo locale).

Route: public dưới app/[locale]/(site)/… với locale ∈ {en, vi} (default en, vi gợi ý tự động từ Accept-Language, không bao giờ ép); admin dưới app/admin/(cms)/… (không localize, UI bằng en; field content edit theo locale).

Mọi public page: pattern <title> {page seoTitle} · {SiteSettings.siteName}, description từ CMS, canonical, hreflang alternate, OG image từ template, JSON-LD (Person trên home/about, CreativeWork trên case study, BlogPosting trên post, BreadcrumbList trên page detail). Sitemap và RSS theo locale.

5.0 Data, state và component theo từng screen

Mọi text trong wireframe bên dưới là seed data từ CV hoặc chrome string; không cái nào được gõ cứng vào component. "Ẩn" nghĩa là section và anchor của nó bị gỡ khi empty (section 4.5).

5.1 Home `/[locale]` (v2)

Mục đích: trong 10 giây, anh ấy là ai, ship cái gì, proof bằng số, và một cách để act. Thứ tự section mặc định (từ PageSection, admin có thể reorder/ẩn): hero → stats → marquee → featured case study → domains → selected work → how I migrate (process) → skills by depth → latest notes → CTA band. Band (--band) xen kẽ: stats+marquee, domains, process. Chú giải: ░ = grid đã mask, ◌ = orb/glow, [ ] = button, ‹› = pill.

Desktop (1440, container 1120):

┌────────────────────────────────────────────────────────────────────────────────────┐
│ ◆ parker.dev Work About Notes Contact [Search ⌘K] ‹EN|VI› ◐ │ sticky, blur
├────────────────────────────────────────────────────────────────────────────────────┤
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░◌◌◌░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ Atmosphere hero
│░ ‹>_ Senior Frontend · 5 yrs · Vue/Nuxt/TS› ┌──────────────────────────┐ ░│
│░ │ ┌────┐ ┌────┐ │ ░│
│░ I move products forward │ │ v1 │──┐ ┌──▶│ v2 │ │ ░│ MigrationDiagram
│░ without breaking them. ← accent in --primary │ │Vue2│ ├─┤ │Nuxt│ │ ░│ (nodes pulse on v2)
│░ (text-display 64px) │ └────┘ │ │ └────┘ │ ░│
│░ │ ○Pinia ○Query ○PrimeVue │ ░│
│░ Parker Vu · Senior Frontend Engineer. 5 years │ ○Tailwind ○Playwright │ ░│
│░ shipping data-dense product UIs… (text-prose) └──────────────────────────┘ ░│
│░ ● Open to senior roles · Hanoi, GMT+7 ░│
│░ [ View case studies → ]glow [ Download CV ] ░│
├════════════════════════════════════════════════════════════════════════════════════┤ band
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
│ │▣ │ 5+ │▣ │ 4 │▣ │ 3 │▣ │ 20+ │ StatBand
│ └──┘ YEARS └──┘ PRODUCTS └──┘ CLIENT └──┘ ASSET CLASSES │ numbers --primary
│ SHIPPING SHIPPED COUNTRIES RATED (PARTICULA) │ labels eyebrow
│ ───────────────────────────────────────────────────────────────────────────────── │
│ ‹Vue 3›‹Nuxt 3›‹TypeScript›‹Pinia›‹TanStack Query›‹PrimeVue›‹Playwright›‹Vitest› ⏸ │ TechMarquee (fades)
├════════════════════════════════════════════════════════════════════════════════════┤
│ ▣ Featured case study All work → │ SectionHeader
│ ┌───────────────────────────────────────────┐ ‹▣ Fintech / Web3› v1 → v2 │
│ │ cover 16:10 (project image or diagram) │ Particula v2 │
│ │ │ Rewriting an RWA ratings app │
│ │ │ without stopping delivery. │
│ └───────────────────────────────────────────┘ − bundle 412kB → 255kB │
│ + e2e specs 0 → 120 │
│ ‹Nuxt 3›‹TanStack›‹Playwright› │
│ Read case study ↗ │
├════════════════════════════════════════════════════════════════════════════════════┤ band
│ ▣ Domains Products I've shipped, grouped by the problem they solve │
│ ┌────────────────────────┐ ┌────────────────────────┐ ┌────────────────────────┐ │
│ │ ▣amber 1 project │ │ ▣blue 2 projects │ │ ▣violet 1 project │ │ DomainCard ×4
│ │ Fintech / Web3 (ReFi) │ │ Enterprise platforms │ │ E-commerce tooling │ │ (3+1 or 4-col)
│ │ RWA ratings, carbon… │ │ Samsung SDS ops tools… │ │ Cart migrations across │ │
│ └────────────────────────┘ └────────────────────────┘ └────────────────────────┘ │
├════════════════════════════════════════════════════════════════════════════════════┤
│ ▣ Selected work All projects → │
│ ┌──────────────────────────┐ ┌──────────────────────────┐ ┌──────────────────────┐│
│ │‹▣ Fintech› ↗ │ │‹▣ E-commerce› ↗ │ │‹▣ Enterprise› ‹NDA› ↗││ CaseCard ×3
│ │ Particula v2 │ │ Cart migration tool │ │ MSP Advanced ││ hover: lift, title
│ │ Nuxt 3 rewrite of… │ │ Flask APIs + Vue 2 UI… │ │ Re-platformed MSP… ││ → primary
│ │ − bundle 412→255kB │ │ + carts 4 platforms │ │ + team 15 · KR ││
│ │ ‹Nuxt 3›‹TanStack›‹+2› │ │ ‹Flask›‹Vue 2›‹Pinia› │ │ ‹Vue 2›‹Vuex› ││
│ └──────────────────────────┘ └──────────────────────────┘ └──────────────────────┘│
├════════════════════════════════════════════════════════════════════════════════════┤ band
│ ‹EYEBROW: PROCESS› │
│ How I migrate a frontend ┌────────────────────────────┐ │
│ Short intro (text-prose, muted, 2 lines) │ 01 Audit · tokens, states │ │ ProcessFlow
│ ┌───────────────────┐ ┌───────────────────┐ └─────────────┬──────────────┘ │
│ │▣ Migrate in slices│ │▣ Test the contract│ ┌─────────────▼──────────────┐ │
│ │ 2-line body │ │ 2-line body │ │ 03 Strangler routes ◉glow │ │ active step
│ └───────────────────┘ └───────────────────┘ └─────────────┬──────────────┘ │
│ ┌───────────────────┐ ┌───────────────────┐ ┌─────────────▼──────────────┐ │
│ │▣ Server state ≠ UI│ │▣ Write it down │ │ 05 Cut over · delete v1 │ │
│ └───────────────────┘ └───────────────────┘ └────────────────────────────┘ │
├════════════════════════════════════════════════════════════════════════════════════┤
│ ▣ What I work with Daily ‹…› · Shipped before ‹…› · Growing ‹…› │ 3 columns
├────────────────────────────────────────────────────────────────────────────────────┤
│ ▣ Latest notes All notes → │
│ ┌────────────────────────────────────────────────────────────────────────────────┐ │
│ │ OCT 12 · 6 MIN Vue → React: what transfers, what doesn't ↗ #react #vue │ │ PostCard rows ×3
│ └────────────────────────────────────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────────────────────────┤
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░◌◌◌◌◌░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ CtaBand (glow)
│ ✦ │
│ Have a product that needs to move forward? │
│ Senior frontend roles or a migration done right. │
│ [ ✉ Copy email ]glow [ in LinkedIn ] [ ⌥ GitHub ] │
├────────────────────────────────────────────────────────────────────────────────────┤
│ © 2026 Parker Vu · Hung Vu Van - Senior Frontend Work Notes CV ⌥ in ✉ · a1b2c3 │ mono footer
└────────────────────────────────────────────────────────────────────────────────────┘

Mobile (390):

┌──────────────────────────────┐
│ ◆ parker.dev ⌘K ◐ ☰ │
├──────────────────────────────┤
│░‹>_ Senior Frontend · 5 yrs›░│ atmosphere (1 orb)
│░ I move products ░│
│░ forward without ░│ text-display 40px
│░ breaking them. ░│ accent line in primary
│░ Parker Vu · Senior FE… ░│
│░ [ View case studies → ] ░│ full width
│░ [ Download CV ] ░│
│░ ┌─────────────────────────┐░│ MigrationDiagram
│░ │ v1 Vue2 ──▶ v2 Nuxt3 │░│ (compact, horizontal)
│░ └─────────────────────────┘░│
├══════════════════════════════┤ band
│ 5+ YEARS │ 4 PRODUCTS │ StatBand 2×2
│ 3 COUNTRIES │ 20+ CLASSES │
│ ‹Vue 3›‹Nuxt 3›‹TS›‹Pinia› ⏸ │ marquee
├══════════════════════════════┤
│ ▣ Featured case study │
│ [cover] │
│ ‹Fintech› Particula v2 v1→v2 │
│ − bundle 412kB → 255kB │
│ Read case study ↗ │
├══════════════════════════════┤ band
│ ▣ Domains │
│ [DomainCard] (stacked ×4) │
├──────────────────────────────┤
│ ▣ Selected work │
│ [CaseCard] (stacked ×3) │
├══════════════════════════════┤ band
│ PROCESS · How I migrate │
│ 01 → 02 → 03◉ → 04 → 05 │ vertical flow
│ [Feature] [Feature] (1 col) │
├──────────────────────────────┤
│ Skills · Notes (cards) │
├──────────────────────────────┤
│░ ✦ Have a product…? ░│ CTA band
│░ [ Copy email ] [in] [⌥] ░│
│ footer (2 lines, mono) │
└──────────────────────────────┘

Giá trị metric là placeholder đến khi Parker cung cấp số thật (1.4 item 1). Stat không có số thật thì giữ ẩn (isVisible=false), không bịa.

5.2 About + experience timeline `/[locale]/about` (v2)

Section: intro tách (avatar card + bio) → stats strip (tái dùng StatBand, compact) → timeline với year rail → principles (list 01 -) → skills theo depth → education → card download CV.

Desktop:

┌────────────────────────────────────────────────────────────────────────────────────┐
│ header │
├────────────────────────────────────────────────────────────────────────────────────┤
│ ‹EYEBROW: ABOUT› │
│ ┌─────────────────────┐ Hi, I'm Parker (Hung Vu Van). (text-title H1) │
│ │ avatar 1:1 │ Bio, 2–3 paragraphs, text-prose, 66ch. │
│ │ rounded-xl │ │
│ │ Hanoi · GMT+7 │ ‹Vietnamese› ‹English› ‹Works with KR · US · UK teams› │
│ │ [Download CV ↓] │ │
│ └─────────────────────┘ │
├════════════════════════════════════════════════════════════════════════════════════┤ band
│ 5+ YEARS · 4 PRODUCTS · 3 COUNTRIES · 20+ ASSET CLASSES (compact StatBand) │
├════════════════════════════════════════════════════════════════════════════════════┤
│ ▣ Experience │
│ 2024 ─ NOW ●━━ Kobizo · Frontend Developer ‹▣ Fintech› Case study ↗ │
│ (sticky) ┃ Particula: main frontend, led v1 → v2. │
│ ┃ ▹ highlight ▹ highlight ▹ highlight │
│ ┃ ‹Vue 3›‹Nuxt 3›‹PrimeVue›‹TanStack›‹Playwright› │
│ 2022 ─ 2024 ●━━ CMC Global · Frontend Developer ‹▣ Enterprise› ‹NDA› │
│ ┃ Samsung SDS: MSP Advanced, MSP App Expansion │
│ 2021 ─ 2022 ●━━ LitGroup · Fullstack Developer ‹▣ E-commerce› │
│ ┣ Frontend · 2022 · Vue 2, TS, Pinia │
│ ┗ Backend · 2021 · Flask, Laravel, store APIs │
├════════════════════════════════════════════════════════════════════════════════════┤ band
│ ‹EYEBROW: PRINCIPLES› How I work │
│ 01 - Migrate in slices 02 - Test the contract, not the pixels │
│ 03 - Server state is not UI state 04 - Write the decision down │
├────────────────────────────────────────────────────────────────────────────────────┤
│ ▣ Skills DAILY ‹…› SHIPPED BEFORE ‹…› GROWING ‹…› │
│ ▣ Education Hanoi University of Industry · Computer Science · 2017–2021 │
└────────────────────────────────────────────────────────────────────────────────────┘

Mobile:

┌──────────────────────────────┐
│ ABOUT │
│ [avatar 96] Hi, I'm Parker │
│ Bio (prose) │
│ ‹VI›‹EN›‹KR·US·UK teams› │
│ [ Download CV ↓ ] │
├══════════════════════════════┤
│ StatBand 2×2 │
├══════════════════════════════┤
│ ● 2024 - now │ year on top of each item
│ ┃ Kobizo · Frontend Dev │
│ ┃ ▹ … ▹ … ‹chips› │ highlights in accordion
│ ● 2022 - 2024 CMC Global │
│ ● 2021 - 2022 LitGroup │
├══════════════════════════════┤
│ 01 - … 02 - … (1 col) │
│ Skills · Education │
└──────────────────────────────┘

5.3 List projects `/[locale]/projects` (v2)

Header với eyebrow + H1 + intro, một hàng filter domain (domain pill kèm count, URL ?domain=) và một tech combobox; rồi một CaseCard featured rộng, rồi grid 2-col (desktop). Mỗi card hiện domain pill, ↗, DiffStat top, chip.

Desktop:

┌────────────────────────────────────────────────────────────────────────────────────┐
│ header │
├────────────────────────────────────────────────────────────────────────────────────┤
│ ‹EYEBROW: WORK› │
│ Case studies (text-title) │
│ Four products I moved forward, 2021 - now. (text-prose) │
│ ‹All 4› ‹▣ Fintech 1› ‹▣ Enterprise 2› ‹▣ E-commerce 1› [Tech: any ▾] │
├────────────────────────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────────────────────────────────────────┐ │
│ │ ┌───────────────────────────────┐ ‹▣ Fintech / Web3› v1 → v2 ↗ │ │ featured, wide
│ │ │ cover 16:10 │ Particula v2 │ │
│ │ └───────────────────────────────┘ Tagline (2 lines) · Kobizo · 2024 - now │ │
│ │ − bundle 412→255kB + specs 0→120 │ │
│ └────────────────────────────────────────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────┐ ┌───────────────────────────────────────┐ │
│ │‹▣ E-commerce› ↗ │ │‹▣ Enterprise› ‹NDA› ↗ │ │
│ │ Cart migration tool │ │ MSP Advanced (Samsung SDS) │ │
│ │ Flask APIs + Vue 2 UI for… │ │ Re-platformed MSP App logic… │ │
│ │ + platforms 4 · LitGroup · 2021–22 │ │ team 15 · CMC Global · 2022–24 │ │
│ │ ‹Flask›‹Laravel›‹Vue 2›‹Pinia› │ │ ‹Vue 2›‹Vuex› │ │
│ └───────────────────────────────────────┘ └───────────────────────────────────────┘ │
│ Empty filter: empty state "No case studies for Svelte" + [Clear filters] │
└────────────────────────────────────────────────────────────────────────────────────┘

Mobile: filter pill scroll ngang (có fade mép), tech combobox bên dưới, card xếp chồng, featured card = card thường với cover ở trên.

5.4 Project case study `/[locale]/projects/[slug]` (v2)

Thứ tự: back link → pill (domain, NDA) → H1 + tagline → meta grid (label eyebrow mono) → cover → key facts 2×2 → Outcome stats → từng section có eyebrow (SUMMARY Problem, LIMITS Constraints, SCOPE Requirements thành hai card, HOW Approach + diagram, TRADE-OFFS Key decisions thành card, RESULT Outcome, RETRO What I'd do differently) → fact chips → card "More in " → prev/next. TOC sticky + reading progress bar. Vùng hero có thể dùng grid mờ (không orb); vùng prose là --background thường.

Desktop:

┌────────────────────────────────────────────────────────────────────────────────────┐
│ header ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (2px reading progress) │
├────────────────────────────────────────────────────────────────────────────────────┤
│░ ← All case studies ░│ faint grid
│░ ‹▣ Fintech / Web3› ‹v1 → v2› ░│
│░ Particula v2: Vue 2 → Nuxt 3 (text-title) ░│
│░ Rewriting an RWA ratings app without stopping delivery. (text-prose) ░│
│░ CLIENT ROLE TEAM PERIOD STACK ░│ eyebrow labels
│░ Particula Main frontend 6 Feb 2024 - now Nuxt 3 · TanStack · … ░│
├────────────────────────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────── cover 21:9 (rounded-xl) ─────────────────────────┐ │
│ └────────────────────────────────────────────────────────────────────────────────┘ │
├───────────────────────────────────────────────────────────┬────────────────────────┤
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │ ON THIS PAGE │
│ │● Strangler migration: │ │● TanStack Query replaced│ │ ▌Key facts │ KeyFacts 2×2
│ │ Nuxt 3 beside Vue 2 │ │ Axios as server state │ │ Outcome │
│ └─────────────────────────┘ └─────────────────────────┘ │ Problem │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │ Requirements │
│ │● Core component library │ │● 120 Playwright specs │ │ Approach │
│ └─────────────────────────┘ └─────────────────────────┘ │ Decisions │
│ RESULT │ Retro │
│ ## Outcome ┌ − bundle 412→255kB ┐ ┌ + specs 0→120 ┐ │ │
│ SUMMARY │ STACK │
│ ## Problem prose 18px/1.75, 66ch, ▹ bullets │ ‹Nuxt 3›‹Vue 3›… │
│ SCOPE │ │
│ ## Requirements │ Live site ↗ │
│ ┌ Functional ─────────────┐ ┌ Non-functional ─────────┐ │ │
│ │ ▹ ratings dashboards │ │ ▹ no stale ratings │ │ │
│ └─────────────────────────┘ └─────────────────────────┘ │ │
│ HOW · ## Approach prose + diagram (figure + caption) │ │
│ TRADE-OFFS · ## Key decisions │ │
│ ┌ Axios → TanStack Query ─────────────────────────────┐ │ │
│ │ OPTIONS · CHOICE · WHY · COST (eyebrow labels) │ │ │
│ └─────────────────────────────────────────────────────┘ │ │
│ RETRO · ## What I'd do differently │ │
│ ‹fact chip›‹fact chip›‹fact chip› │ │
├───────────────────────────────────────────────────────────┴────────────────────────┤
│ More in Fintech / Web3 [CaseCard] [CaseCard] │
│ ← MSP Advanced Cart migration tool → │
└────────────────────────────────────────────────────────────────────────────────────┘

Mobile: meta grid thành 2 column; key facts 1 column; TOC thành collapsible sticky "On this page ▾" dưới header; requirement card xếp chồng.

5.5 List blog `/[locale]/notes` và post `/[locale]/notes/[slug]` (v2)

List: eyebrow WRITING + H1 + intro → search + tag chip → group theo năm các hàng PostCard (card với OCT 12, 2026 · 6 MIN mono, title + ↗, excerpt, chip #tag). Post featured (isFeatured) được card rộng hơn, cover nằm trên đầu list.

List desktop:

┌────────────────────────────────────────────────────────────────────────────────────┐
│ WRITING │
│ Notes [⌕ Search notes… ⌘K ] │
│ Things I learned shipping frontends. │
│ ‹all 12› ‹#vue› ‹#react› ‹#nuxt› ‹#testing› ‹#architecture› │
├────────────────────────────────────────────────────────────────────────────────────┤
│ 2026 ──────────────────────────────────────────────────────────────────────────── │
│ ┌────────────────────────────────────────────────────────────────────────────────┐ │
│ │ OCT 12, 2026 · 6 MIN │ │
│ │ Vue → React: what transfers, what doesn't ↗ (subheading) │ │
│ │ Excerpt, 2 lines, text-body muted… │ │
│ │ #react #vue │ │
│ └────────────────────────────────────────────────────────────────────────────────┘ │
│ ┌ SEP 30, 2026 · 8 MIN · TanStack Query in Nuxt 3 ↗ … ───────────────────────────┐ │
└────────────────────────────────────────────────────────────────────────────────────┘

Post: cột đọc giữ nguyên (66ch, background thường). v2 thêm eyebrow NOTE · #react, reading progress bar, bullet ▹, callout với icon tile, header code block với language badge + copy, card "Key takeaways" ở cuối (từ Post.takeaways, optional), và các PostCard related.

Post desktop:

┌────────────────────────────────────────────────────────────────────────────────────┐
│ header ━━━━━━━━━━━━━━ (progress) │
├────────────────────────────────────────────────────────────┬───────────────────────┤
│ ← Notes │ │
│ NOTE · #REACT #VUE │ ON THIS PAGE │
│ Vue → React: what transfers, what doesn't (text-title) │ ▌Reactivity │
│ Oct 12, 2026 · Updated Oct 14 · 6 min · Đọc bằng tiếng Việt│ Effects │
│ ───────────────────────────────────────────────────────── │ Data fetching │
│ prose 18/1.75, 66ch │ │
│ ┌ ▣ Callout ────────────────────────────────────────────┐ │ Copy link │
│ │ Treat React state as a value you replace… │ │ │
│ └───────────────────────────────────────────────────────┘ │ │
│ ┌ components/Counter.tsx ─────────── ‹tsx› [copy] ┐ │ │
│ │ code 15px JetBrains Mono, diff lines tinted │ │ │
│ └─────────────────────────────────────────────────┘ │ │
│ ┌ KEY TAKEAWAYS ────────────────────────────────────────┐ │ │
│ │ ▹ … ▹ … ▹ … │ │ │
│ └───────────────────────────────────────────────────────┘ │ │
├────────────────────────────────────────────────────────────┴───────────────────────┤
│ Related notes [PostCard] [PostCard] [PostCard] ← Prev Next → │
└────────────────────────────────────────────────────────────────────────────────────┘

Mobile (list và post): card full width; search trên tag; tag scroll ngang; TOC collapsible; code block scroll ngang trong region focus được.

5.6 Contact `/[locale]/contact` (v2)

Layout tách trên grid mờ: trái = eyebrow, H1, intro (SiteSettings.contactIntro), note thời gian reply, channel card (Copy email, LinkedIn, GitHub, mỗi cái có icon tile), availability badge; phải = form card trên --card-glass. Success thay form bằng status card (icon tile check, message, "Back to case studies").

Desktop:

┌────────────────────────────────────────────────────────────────────────────────────┐
│░ CONTACT ┌────────────────────────────────────┐░│
│░ Let's talk about your product. │ Name * Email * │░│
│░ Senior frontend roles or a migration │ [ ] [ ] │░│
│░ done right. (text-prose) │ Topic │░│
│░ ● Open to senior roles · replies in 2 days │ [ Job opportunity ▾ ] │░│
│░ ┌───────────────────────────────────────┐ │ Message * │░│
│░ │ ▣ Email [ Copy email ] │ │ [ ] │░│
│░ ├───────────────────────────────────────┤ │ [ ] │░│
│░ │ ▣ LinkedIn linkedin.com/in/… ↗ │ │ 0 / 2000 │░│
│░ ├───────────────────────────────────────┤ │ [ Send message → ]glow │░│
│░ │ ▣ GitHub github.com/parker2808 ↗│ └────────────────────────────────────┘░│
│░ └───────────────────────────────────────┘ ░│
└────────────────────────────────────────────────────────────────────────────────────┘

Mobile: channel card trước (xếp chồng), form bên dưới, submit full-width. Validation: error inline dưới field + summary alert lúc submit; input giữ value khi error.

5.7 Admin dashboard `/admin`

KPI (7/30/90 ngày): views, unique visitors, contact messages, published posts; chart views; top pages; inbox preview (realtime); recent activity (audit); content health (draft, thiếu bản dịch vi, image không có alt).

Mobile:

┌───────────────────────────────┐
│ ☰ Dashboard 🔔3 (P)│
├───────────────────────────────┤
│ [7d][30d][90d] │
│ ┌─────────────┐┌─────────────┐│
│ │Views 2,140 ││Visitors 980 ││
│ │▲ 12% ╱╲╱ ││▲ 4% ╱╲_ ││
│ └─────────────┘└─────────────┘│
│ ┌─────────────┐┌─────────────┐│
│ │Messages 6 ││Published 2 ││
│ └─────────────┘└─────────────┘│
├───────────────────────────────┤
│ Inbox (3 new) View all │
│ ● Ana · Job opportunity · 2m │
├───────────────────────────────┤
│ Content health │
│ 2 drafts · 3 missing VI · 1 alt│
├───────────────────────────────┤
│ Activity │
└───────────────────────────────┘

Desktop:

┌────────────┬─────────────────────────────────────────────────────────┐
│ ◆ Parker ▾ │ Dashboard [7d][30d][90d] 🔔3 (P)│
│ 🔍 Search ⌘K├─────────────────────────────────────────────────────────┤
│ │ ┌──────────┐┌──────────┐┌──────────┐┌──────────┐ │
│ Dashboard │ │Views ││Visitors ││Messages ││Published │ │
│ Inbox 3 │ │2,140 ▲12%││980 ▲4% ││6 ▼1 ││2 │ │
│ ─ Content │ └──────────┘└──────────┘└──────────┘└──────────┘ │
│ Projects │ ┌───────────────────────────────────┐┌────────────────┐ │
│ Posts │ │ Views (area chart, 30d) ││ Top pages │ │
│ Experience │ │ ││ /projects/pa… │ │
│ Skills │ │ ││ /notes/vue-… │ │
│ Media │ └───────────────────────────────────┘└────────────────┘ │
│ ─ Insights │ ┌───────────────────────┐┌──────────────────────────────┐│
│ Analytics │ │ Inbox View → ││ Recent activity ││
│ Audit log │ │ ● Ana Job opp. 2m ││ Parker published "Vue → R…" ││
│ ─ │ │ Minh Freelance 1d ││ Parker updated Particula v2 ││
│ Settings │ └───────────────────────┘└──────────────────────────────┘│
│ │ Content health: 2 drafts · 3 missing VI · 1 image no alt │
└────────────┴─────────────────────────────────────────────────────────┘
Realtime: new message → toast bottom-right "New message from Ana [Open]", Inbox badge 3→4.

Realtime: message mới → toast góc dưới phải "New message from Ana [Open]", Inbox badge 3→4.

5.8 Admin list/table `/admin/posts` (cùng pattern cho projects, skills, experience, media, inbox, audit)

Mobile (table thành list các row, filter trong sheet):

┌───────────────────────────────┐
│ ☰ Posts [+ New] │
├───────────────────────────────┤
│ [🔍 Search ] [Filter (2)] [⋯] │
│ Status: Draft ✕ Tag: react ✕ │
├───────────────────────────────┤
│ ○ Vue → React: what transfers │
│ Draft · EN ● VI ○ · 2h ago │
│ ───────────────────────────── │
│ ● TanStack Query in Nuxt 3 │
│ Published · EN ● VI ● · 3d │
└───────────────────────────────┘

Desktop:

┌────────────┬─────────────────────────────────────────────────────────┐
│ sidebar │ Posts [Views ▾] [+ New post C] │
│ ├─────────────────────────────────────────────────────────┤
│ │ [🔍 Filter posts… /] Status is Draft ✕ + Filter │
│ ├──┬──────────────────────────┬──────────┬───────┬───────┬─┤
│ │☐ │ Title ↓ │ Status │ Lang │Updated│⋯│
│ ├──┼──────────────────────────┼──────────┼───────┼───────┼─┤
│ │☐ │ Vue → React: what trans… │ ○ Draft │ EN VI○│ 2h │⋯│
│ │☑ │ TanStack Query in Nuxt 3 │ ● Publ. │ EN VI │ 3d │⋯│
│ │☑ │ Playwright at Particula │ ◷ Sched. │ EN │ 5d │⋯│
│ ├──┴──────────────────────────┴──────────┴───────┴───────┴─┤
│ │ 1–25 of 42 ‹ 1 2 › │
│ │ ┌──────── 2 selected · Publish · Archive · Delete · ✕ ─┐│
└────────────┴─────────────────────────────────────────────────────────┘
Keys: j/k move · x select · Enter open · C new · / search · ⌫ delete (confirm)

Keys: j/k di chuyển · x chọn · Enter mở · C tạo mới · / search · ⌫ xóa (confirm)

5.9 Admin editor `/admin/posts/[id]` (projects dùng cùng shell với field section case-study)

Mobile (editor full screen; properties trong bottom sheet):

┌───────────────────────────────┐
│ ← Saved 4s ago [⚙] [Publish]│
├───────────────────────────────┤
│ [EN ●] [VI ○] │
│ Title │
│ Vue → React: what transfers │
│ [Write][Preview] │
│ B I H 🔗 </> 🖼 │
│ ┌───────────────────────────┐ │
│ │ markdown… │ │
│ │ │ │
│ └───────────────────────────┘ │
│ 1,240 words · 6 min │
└───────────────────────────────┘

Desktop (lg: editor + properties; 2xl: thêm live preview):

┌────────────┬────────────────────────────────────────┬────────────────┐
│ sidebar │ Posts / Vue → React Saved 4s ago │ [Preview] [Pub]│
│ ├────────────────────────────────────────┼────────────────┤
│ │ [EN ●] [VI ○ missing title, body] │ Status ○ Draft│
│ │ Title │ Slug vue-react│
│ │ Vue → React: what transfers │ Tags [react]+ │
│ │ Excerpt │ Publish date ▾│
│ │ One-sentence summary… │ Featured ☐ │
│ │ ┌ B I H1 H2 🔗 </> 🖼 callout [Split]┐│ Cover [img] │
│ │ │ ## Reactivity ││ SEO title │
│ │ │ In Vue, `ref()`… ││ SEO desc 0/160│
│ │ │ / ← slash menu: image, code, callout││ ────────────── │
│ │ │ [drop image to upload ▓▓▓░ 60% ✕] ││ History │
│ │ └─────────────────────────────────────┘│ Parker · 2h │
│ │ 1,240 words · 6 min read │ Created · 1d │
└────────────┴────────────────────────────────────────┴────────────────┘
Publish is blocked with an inline list when required fields are missing (per locale) or images lack alt.
⌘S save now · ⌘↵ publish · ⌘⇧P preview · Esc leaves (confirm if unsaved).

Publish bị block kèm list inline khi thiếu field required (theo locale) hoặc image thiếu alt. ⌘S save ngay · ⌘↵ publish · ⌘⇧P preview · Esc thoát (confirm nếu chưa save).

---

5.10 Admin site & sections `/admin/site` (settings, navigation, sections, social links, contact topics)

Chỗ edit mọi thứ không phải project/post/experience/skill, nên không text nào hiện ra lại cần sửa code. Tab: General · Navigation · Sections · Social · Contact. Reorder là drag-and-drop và nút "Move up / Move down" (thân thiện bàn phím và screen reader); mỗi lần move là một update sortOrder optimistic.

Mobile:

┌───────────────────────────────┐
│ ☰ Site [Save] │
├───────────────────────────────┤
│ [General][Nav][Sections] ▸ │
├───────────────────────────────┤
│ Home sections [EN][VI] │
│ ≡ Hero ● shown ⋯ │
│ ≡ Featured ● shown ⋯ │
│ ≡ Selected work ● shown ⋯ │
│ ≡ Skills ○ hidden ⋯ │
│ ≡ Latest notes ● shown ⋯ │
│ ⋯ → Move up · Move down · Edit│
└───────────────────────────────┘

Desktop:

┌────────────┬─────────────────────────────────────────────────────────┐
│ sidebar │ Site Saved 3s ago │
│ │ [General] [Navigation] [Sections] [Social] [Contact] │
│ ├─────────────────────────────────────────────────────────┤
│ │ Page [Home ▾] │
│ │ ┌──┬───────────────┬──────────────────────┬────────┬───┐ │
│ │ │≡ │ Section │ Title (EN · VI) │ Shown │ │ │
│ │ ├──┼───────────────┼──────────────────────┼────────┼───┤ │
│ │ │≡ │ hero │ (uses profile) │ [●] │ ⋯ │ │
│ │ │≡ │ featured │ Featured case study · │ [●] │ ⋯ │ │
│ │ │≡ │ work │ Selected work · Dự án │ [●] │ ⋯ │ │
│ │ │≡ │ skills │ What I work with · ○ │ [ ] │ ⋯ │ │
│ │ └──┴───────────────┴──────────────────────┴────────┴───┘ │
│ │ Edit row → sheet: title EN/VI, intro EN/VI, CTA label │
└────────────┴─────────────────────────────────────────────────────────┘

Sidebar thêm group Site: Site settings, Profile, Media. Bản thân admin UI là chrome English-only; mọi field content hiện EN và VI cạnh nhau qua tab locale.

5.11 Thay đổi admin cho v2 (nhỏ; admin layout giữ nguyên)

Admin giữ vẻ Linear điềm tĩnh: không atmosphere, band, orb, reveal hay marquee trong /admin. Nó chỉ thêm editor và check mà public site giàu hơn cần.

---

6. Map ngày Lab (high level)

Trong chương này: "Drill" Lab mỗi ngày build một slice, khớp topic ngày đó trong plans/study-plan-30d-redesign.md section 3.

"Drill" Lab mỗi ngày build một slice, khớp topic ngày đó trong plans/study-plan-30d-redesign.md section 3. Repo: monorepo portfolio/ (apps/web Next.js, apps/api NestJS + Prisma, packages/ui shadcn + product component, packages/contracts zod schema, type, query key, fixture; docker-compose.yml).

Hai track khớp nhau thế nào:

• Backend leo thang ở section 1.6, từng bậc, từ Docker lên. Không ngày backend nào giả định concept mà ngày sau mới dạy. Mỗi bước backend nêu đúng một concept nó dạy.
• Frontend Day 1–6 build component trên fixture (chỉ story/test). Từ Day 7 mọi page đọc từ API; không page nào ship content hard-code.
• Admin endpoint mở trên localhost thôi đến Day 16 mới gắn guard (API bind 127.0.0.1 lúc dev cho đến lúc đó).
• Cột "Xong khi" thành Output của callout intro trong lab.

Ghi chú cho agent thực thi:

• Ngày review và mock (7, 14, 21, 28, 30) giữ Drill theo agenda có giờ; bước build là một item có giờ trong đó.
• Budget tab Lab (210 words) nghĩa là mỗi Drill chỉ nêu slice và done-check. Spec nằm ở đây; link section, ví dụ "Spec: portfolio-design-system §5.4".
• Bước backend nên link glossary (1.6) lần đầu một term xuất hiện.
• Day 25–27 tái dùng content behavioral: các story Parker rehearsal chính là case study anh ấy publish.

Phần việc rich-layer v2, gấp vào các ngày sẵn có (không thêm ngày mới; mỗi item là một step thêm trong Drill ngày đó):

---

7. Brief để rebuild mockup (v2)

Trong chương này: Cho model đang rebuild mockups/portfolio/.

Cho model đang rebuild mockups/portfolio/. Verdict của Parker với v1 là "too bare/plain". Screen v1 (01–09) là một surface trung tính, heading nhỏ, card flat và không imagery. Screen mới phải nhìn giàu hơn trong một ánh mắt nhưng vẫn giữ mọi type rule ở 3.2 và mọi contrast pair ở 3.1. Làm theo section 2, 3, 4.7 và 5.1–5.6 của spec này. Đừng copy layout, copy hay palette xanh của site reference.

7.1 Rule global (áp cho mọi public screen)

Spec screenshot: Playwright + system Chrome, DPR 2, full page, width 1440 (desktop) và 390 (mobile). Capture với reducedMotion: 'no-preference' nhưng đóng băng animation ở trạng thái cuối (thêm class .capture trên <html> để set animation: none !important; transition: none !important và hiện content đã reveal cùng giá trị count-up cuối), nên orb, glow và hover state nhìn thấy được nhưng ảnh là deterministic. Tên file bên dưới; lưu vào artifacts và giữ screenshot.mjs là entry point duy nhất.

7.2 Screen

Acceptance check trước khi trả: (a) mọi screen có ít nhất một band, một eyebrow và một icon tile (trừ admin); (b) body text 16px và prose 18px mọi nơi; (c) check nhanh contrast của muted text trên --band và mọi hue pill đạt 4.5:1 ở cả hai theme; (d) search mockups/portfolio/*.html tìm string dạng email, +84 và gmail không ra gì; (e) screenshot 390px không overflow ngang.