This file provides the master architectural reference and context for any AI agent or developer working on this repository. It covers the application's purpose, Vault CMS blog engine, executive portfolio structure, PDF export system, dynamic reference pages, and content editing maps.
Nhi Nhi Vo Blog & Portfolio is a unified personal content platform, local-first markdown Vault CMS, executive advisory showcase, and PDF profile. It is part of a multi-project workspace governed by the Advanced Agentic (AG) Framework.
src/content/).| Endpoint URL | Route Type | Purpose & Content Description |
|---|---|---|
https://nhivo.io.vn/ |
Home / Portfolio | Executive portfolio, bio quote, core metrics, 7-role career journey timeline, capability lenses, keynote list & gallery |
https://nhivo.io.vn/pdf |
7-Page A4 PDF Profile | Standalone, print-ready 7-page portrait PDF profile (locked 297mm page height) for Cmd+P PDF export |
https://nhivo.io.vn/references/ngoc-nguyen |
Reference Letter | 100% verbatim recommendation from Nguyễn Phương Ngọc (Marketing Director, Meliá Serenity Cam Ranh) |
https://nhivo.io.vn/references/vojtech-zehnalek |
Reference Letter | 100% verbatim recommendation from Vojtech Zehnalek (Former CEO, InCorp Vietnam) |
https://nhivo.io.vn/references/jessica-tran |
Reference Letter | 100% verbatim recommendation from Jessica Tran (Former Senior Associate, Fossil Vietnam) |
https://nhivo.io.vn/references/leo-dong-son-lam |
Reference Letter | 100% verbatim recommendation from Leo Dong Son Lam (Associate Lecturer, RMIT University) |
src/styles/global.css and tailwind.config.mjs).https://nhivo.io.vn).The blog operates as a Vault CMS, where content is written in Markdown/MDX and synchronized from a local Obsidian vault:
src/content/posts/. Supports Obsidian wikilinks, callouts, and Linked Mentions.src/content/pages/.src/content/projects/.src/content/docs/.src/config.ts is the central configuration file for theme, navigation, and feature toggles.// [CONFIG:...] markers in src/config.ts; they are required for Obsidian settings sync)./pdf & /references/[id])https://nhivo.io.vn/pdfSave as PDFNone (Không) ← Crucial: Ensures warm cream paper (#F4F1E2) fills full A4 page edge-to-edgeEvery .pdf-page card is locked to exact A4 dimensions:
.pdf-page {
width: 210mm;
height: 297mm !important;
max-height: 297mm !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
This guarantees that pages never stretch or break unpredictably during print export.
column-count: 4) rendering 19 selected photos in full natural aspect ratios without cropping, standard footer.Read Full Letter → button linking to /references/[id], standard footer.Read Full Letter → button linking to /references/[id], standard footer.sips -r 90) centered bottom row, standard footer.scratch/docs/Recommended letter/src/data/about/referenceLetters.ts (contains 100% verbatim text extracted directly from original .docx and .pdf files).src/pages/references/[id].astro (renders static pages with full letter text, author title, and contact details).Mọi thay đổi trên mã nguồn cần được kiểm thử cục bộ và nhận phê duyệt từ CEO trước khi đẩy lên GitHub/Vercel.
npm run build trong thư mục ./nhi-nhi-vietveda/.npm run dev) trên một cổng mạng trống.git commit và git push để kích hoạt quá trình triển khai tự động trên Vercel.This project strictly follows the workspace-standard 4-Doc Rule for persistence, supplemented by a master style specification: 1. README.md: Overview, live domain endpoints, quick start, and developer guides. 2. APP_CONTEXT.md: (This file) Deep architectural context, folder tree, content editing map, Vault CMS flow, and PDF/Reference system specifications. 3. PROJECT_STATUS.md: Current roadmap, session logs, active tasks, and next milestones. 4. CHANGELOG.md: Chronological log of revisions, layout updates, and feature milestones. 5. DESIGN.md: Visual Design System specification (palettes, typography tokens, component primitives).
nhi-nhi-vo-blog/
├── .obsidian/ # Obsidian vault settings & CMS sync rules
├── public/ # Static assets (images, logos, open-graph cards)
│ └── images/
│ ├── certificates/ # High-res rotated credential PNGs
│ └── gallery/ # Sequencing portfolio WebP images (1-25)
├── scratch/ # Source recommendation letters & reference documents
│ └── docs/Recommended letter/
├── src/ # Core Astro source code
│ ├── components/ # Reusable Astro & React UI components
│ │ └── about/ # Modular About page visual components
│ ├── config/ # Modular template configuration rules & [CONFIG:...] sync
│ ├── content/ # Obsidian Markdown collections (Vault CMS)
│ │ ├── posts/ # Blog posts and articles
│ │ ├── projects/ # Portfolio case studies
│ │ ├── docs/ # Technical documentation
│ │ └── pages/ # Custom markdown-driven pages
│ ├── data/ # Data layers (separating data from layout)
│ │ └── about/ # Timelines, speaking data, referenceLetters.ts, translations.ts
│ ├── layouts/ # Page frameworks (PageLayout, PostLayout, AboutLayout)
│ ├── pages/ # Routing endpoints (index, pdf, references/[id], posts, API)
│ ├── styles/ # Global styles (global.css with custom HSL mappings)
│ └── themes/ # Astro Modular template options
├── tailwind.config.mjs # Tailwind tokens, typography configs, and keyframes
├── vercel.json # Vercel routing rules & custom domain configs
├── README.md # 1 of 4 Governance Docs: Setup & Overview
├── APP_CONTEXT.md # 2 of 4 Governance Docs: (This file) Architecture & Content Map
├── PROJECT_STATUS.md # 3 of 4 Governance Docs: Session logs & Roadmap
├── CHANGELOG.md # 4 of 4 Governance Docs: Revisions & Release notes
└── DESIGN.md # Reusable master Design System specification
To update, edit, or translate specific content on the website or blog, reference the file map below:
nav-)src/content/posts/src/content/pages/hero-title)hero-subtitle)heroQuote)metric-1-num through metric-4-label)cap-title, lens-1-title through lens-4-item3)en and vi arrays)en and vi arrays)traits, quote-text)/public/images/gallery/ (gallery-1.webp through gallery-25.webp)src/pages/references/[id].astrohttps://nhivo.io.vnmain is production.