← Về thư mục
📄 / / root / ceo / projects / blog / nhi-nhi-vo-blog / PROJECT_STATUS.md

Project Status: Nhi Nhi Blog

📅 Session Log: 2026-08-05 (Custom Domain Migration nhivo.io.vn, 7-Page A4 PDF Profile, & 4-Doc Consolidation)

Focus: Updating production domain to https://nhivo.io.vn, building the 7-page A4 PDF Profile system (/pdf), publishing 100% verbatim reference letter detail pages (/references/[id]), and consolidating project documentation into the core 4 Governance Docs.

✅ Major Updates

  1. Custom Domain Standardization: Updated all primary project URLs to https://nhivo.io.vn across all documentation and templates, documenting endpoints /, /pdf, and /references/[id].
  2. 7-Page A4 PDF Profile System (/pdf): Restructured /pdf into a 7-page portrait profile with fixed 297mm page heights, standardized footers, 4-column CSS masonry photo gallery, and rotated landscape credentials (InCorp-certificate-team-leadership-program.png rotated 90° clockwise via sips).
  3. Verbatim Reference Letter Pages (/references/[id]): Created dynamic static routes for reference letters (ngoc-nguyen, vojtech-zehnalek, jessica-tran, leo-dong-son-lam) using 100% verbatim source text extracted directly from scratch/docs/Recommended letter/ .docx and .pdf files.
  4. Font Alignment: Synchronized body and heading typography (Philosopher serif + Be Vietnam Pro sans) across PDF, Reference pages, and main site.
  5. 4-Doc Governance Consolidation: Consolidated PDF_EXPORT.md into APP_CONTEXT.md under a dedicated architecture section, maintaining a clean 4-Doc rule (README.md, APP_CONTEXT.md, PROJECT_STATUS.md, CHANGELOG.md + DESIGN.md).

📅 Session Log: 2026-07-08 (Architecture Cleanup, Design System Specification, & 4-Doc Sync)

Focus: Eliminating code duplication, refactoring the design guidelines into a reusable Design System spec, updating workspace documentation, and ensuring responsive layouts.

✅ Major Updates

  1. Design System Specification: Refactored DESIGN.md at the project root to serve as a generalized styling spec. It abstracts design tokens, HSL dark mode mapping, layouts (1000px grids vs 720px reader columns), typography families, calm transition keyframes, and accessible Radix UI component behaviors. It provides a pure design guideline ready to copy to VWG Blog.
  2. Workspace Documentation Sync: Updated the project's governance docs (README.md, APP_CONTEXT.md, PROJECT_STATUS.md, and CHANGELOG.md) to integrate references to DESIGN.md and document the project's full file folder directory tree.
  3. Lenses Single Source of Truth: Removed all duplicate English/Vietnamese strings from lenses.ts and loaded them dynamically inside LensesSection.astro using build-time translation key lookups.
  4. Corrected Gallery Timeline: Shifted the year for International University - VNU to 2021 and Ladakh, India to 2023, re-sorted all 25 items by Year (descending) and Location (EN), and re-indexed all WebP assets on disk sequentially.
  5. Open Graph Lossless Quantization: Compressed public/open-graph.png down to 204KB (saving 80%) using PIL palette quantization to maintain standard formats for social platforms without loading down site weight.
  6. Responsive Footer Button: Added shrink-0 and whitespace-nowrap classes to the CTA button wrapper in AboutFooter.astro, ensuring it scales dynamically to fit content in any language and never squishes or distorts.
  7. Dead Code Elimination: Deleted redundant unused translations-en.ts file from the directory.
  8. Sitemap Snapshot: Downloaded the live sitemap XML from the server and saved it to sitemap_snapshot_for_review.xml at the project root for SEO verification.

Focus: Restoring the visually correct 4:34 PM baseline of the decomposed About page, resolving mobile image gallery cropping issues, and updating structural maps.

✅ Major Updates

  1. Decomposition Map Restoration: Restored the modular baseline from 4:34 PM (Step 385), resolving all layout regressions and compilation breakages from previous formatting runs. Verified successfully using static builds.
  2. Responsive Gallery Layout Fix: Refactored AboutGallery.astro to dynamically apply card widths and aspect ratios based on image orientation (portrait aspect-[3/4] vs landscape aspect-[4/3]). Kept gallery container heights uniform at 60vw on mobile and 300px/340px on desktop for clean visual alignment.
  3. Flexbox Width Constraint Bugfix: Constrained the carousel item div wrapper to explicit matching widths (w-[45vw]/w-[80vw]) on mobile, resolving a rendering bug where long location labels like INCORP VIETNAM, HCMC forced the flex containers to overflow and cut off text at screen boundaries.
  4. 4-Doc Governance Mapping: Updated the project documentation index in APP_CONTEXT.md to explicitly list all modular layouts (src/layouts/about/), components (src/components/about/), and datasets (src/data/about/) from the Decomposition Map.

📅 Session Log: 2026-07-07 (Logo Stream Refactoring & Clean Navigation Hrefs)

Focus: Standardizing brand logo processing, visual layout alignment, and semantic navigation targets.

✅ Major Updates

  1. Logo Fetch Standardization: Created .agents/skills/logo-processor skill and /logo-fetch workflow. This fetches brand logos via free APIs (Hunter.io, Clearbit) and automatically processes raster images to WebP format.
  2. Clean Navigation Targets: Renamed all targets from numerical chapters to clean semantic anchors (#story, #expertise, #journey, #impact, #gallery, #values, #talk), removed the word "chapter" globally, and inserted "Gallery" into the desktop and mobile navigation menus.
  3. Academic Engagements Layout: Styled the Academic Engagements logo section inside the unified #impact block. Desktop viewports render a visually quiet static grid of logos that default to grayscale but transition smoothly to full color on hover. Mobile viewports render an auto-scrolling marquee to conserve layout height.
  4. Restored Brand Logo Silhouettes: Reverted the "Trusted By" brand logo section to black silhouettes (brightness-0 opacity-40) to maintain clear contrast and legibility against the warm off-white background (#F4F1E2), resolving low contrast issues.
  5. AIESEC & Blog Logo Transparency: Processed AIESEC and Hotel Briefing Blog logo assets, converting them to transparent WebP format using sharp.
  6. Section Flow & Layout Spacing: Moved the Academic Engagements logo panel directly above the speaking and learning details columns, and removed the "Impact" eyebrow tag.
  7. Session Cache Cleanup: Executed the /maintenance-clean workflow, deleting old browser recordings and saving 2.6 GB of disk space.

📅 Session Log: 2026-07-06 (Typography & Layout Polish)

Focus: Elevating UX styling, mobile responsive sticky sub-navigation, and vector PDF resume alignment.

✅ Major Updates

  1. Typography Re-pairing: Swapped default fonts for Be Vietnam Pro (geometric, localization-friendly) and Philosopher (curved serif) globally.
  2. Signature Handwriting Style: Integrated MonteCarlo font globally to highlight "Made by Vietnam" quotes on the About page.
  3. Mobile Sticky Sub-Nav: Created a sticky scrollspy menu for mobile viewports, automatically centering active categories on scroll.
  4. Social Sharing Assets: Compiled high-quality Open Graph thumbnail nhi-vo-thumbnail.webp and transparent portrait cutout favicon-square.webp to replace standard template assets.
  5. PDF Resume Optimization: Shifted print HTML styling to a clean 3-page template using vector Lucide SVGs for contact icons, compiling vector PDF (Nhi_Vo_Resume.pdf) via headless Chrome.
  6. Vercel Deployment: Built and successfully published the updated static distribution files to Vercel live servers.
  7. Premium Editorial Theme Option: Created the new visually premium editorial design as a separate theme option. Restored the original layout to src/pages/about-original.astro as a backup, and activated the editorial theme at src/pages/about.astro as requested. Added instructions to the 4 governance documents for switching themes later.

🔜 Next Steps

  1. Content Audits:
  2. Regularly sync updated Obsidian vault entries for wellness and life lessons blogs.
  3. Audit post image layout constraints for modern CSS layout options (anchor positioning).
  4. Interactive Elements:
  5. Implement localized contact forms or automated calendar bookings on /contact.

🚀 Future Roadmap