Hành Trình Xây Dựng Portfolio & Triết Lý Kỹ Thuật (Architecture Deep-Dive)

1. Bối Cảnh & Mục Tiêu (Motivation & Goals)

Một trang Portfolio không nên chỉ đơn thuần là bản CV tĩnh hiển thị danh sách kỹ năng. Đối với mình, đây là một sản phẩm phần mềm thực thụ — nơi phản ánh tiêu chuẩn kỹ thuật, năng lực thẩm mỹ UI/UX và tư duy kiến trúc của một kỹ sư.

Mục tiêu của dự án là xây dựng một nền tảng portfolio động, đa ngôn ngữ (Tiếng Việt & Tiếng Anh), tốc độ tải trang gần như tức thì, có hệ thống quản trị CMS hoàn chỉnh và minh bạch 100% về nguồn gốc mã nguồn.

2. Kiến Trúc Hệ Thống (System Architecture)

• Next.js 15 App Router & Server Components: Tách bạch ranh giới rõ ràng giữa Server Components (render dữ liệu nhanh, tối ưu SEO, bảo mật API keys) và Client Components (xử lý tương tác, hiệu ứng động).
• Quốc Tế Hóa (i18n): Sử dụng next-intl với định tuyến đa ngôn ngữ liền mạch /[locale]/..., tự động điều chỉnh siêu dữ liệu SEO và cấu trúc OpenGraph theo từng vùng ngôn ngữ.
• Cơ Sở Dữ Liệu Supabase (PostgreSQL 16): Hệ thống 12 bảng thực thể quan hệ chuẩn hóa, phân quyền bảo mật Row Level Security (RLS) chặt chẽ kết hợp tính năng đếm lượt xem nguyên tử (Atomic View Counters).
• Hệ Thống Quản Trị CMS: Trang Admin bảo mật hỗ trợ quản lý dự án, bài viết, kỹ năng, chứng chỉ, thông điệp liên hệ và cấu hình hệ thống thời gian thực.

3. Thiết Kế Giao Diện & Trải Nghiệm (UI/UX & Aesthetics)

• Phong Cách Glassmorphism & Dark Mode: Phối màu hiện đại với bảng màu Tailored HSL, viền phát quang tinh tế và hiệu ứng làm mờ nền (Backdrop Blur) dịu mắt.
• Tối Ưu Hoá Hiệu Ứng Động: Sử dụng Framer Motion với AnimatePresence mode="popLayout" giúp việc lọc danh mục dự án và bài viết phản hồi tức thì (0ms lag).

4. Bài Học Rút Ra (Key Engineering Takeaways)

Dự án khẳng định một nguyên tắc quan trọng: Kiến trúc tốt bắt đầu từ sự đơn giản và kỷ luật. Việc phân chia rõ ràng các ranh giới component và chuẩn hóa dữ liệu từ sớm giúp ứng dụng duy trì được sự linh hoạt và khả năng mở rộng bền vững.