Công Nghệ Xây Dựng Portfolio Này

Portfolio này không chỉ là một CV — nó còn là bản demo sống về cách tôi tiếp cận việc xây dựng phần mềm. Đây là toàn cảnh về những gì nó được tạo ra và tại sao.

Framework: Next.js App Router

Tôi chọn Next.js 15 với App Router vì một vài lý do không mấy hiển nhiên:

• React Server Components mặc định — phần lớn nội dung trong portfolio là static hoặc chỉ đọc. RSC đồng nghĩa với zero client-side JavaScript cho các trang không cần nó.
• File-based routing — đơn giản và dự đoán được. /blog/[slug] chỉ hoạt động.
• Incremental adoption — tôi có thể opt một component vào client interactivity bằng 'use client' mà không cần refactor cả trang.

Styling: Tailwind CSS v4

Tailwind v4 đã loại bỏ hoàn toàn file cấu hình JavaScript. Design token bây giờ sống trong CSS:

@import 'tailwindcss';

@theme {
  --color-bg-deep: #0f1923;
  --color-bg-surface: #162232;
  --color-accent-coral: #ff6b4a;
  --color-text-primary: #f0ede6;
}

Đây là sự cải tiến lớn. Design system của bạn trở nên portable — bất kỳ công cụ nào đọc được CSS đều hiểu nó.

TypeScript: Strict Mode

Tất cả cấu hình TypeScript đều trỏ thẳng đến "strict": true. Sự khó chịu lúc dev là đáng để đổi lấy sự tự tin lúc runtime. Một vài pattern tôi bắt buộc:

• interface thay vì type cho public API shapes
• Không có any — dùng unknown và narrow nó
• Exhaustive switch với never sentinel

function assertNever(x: never): never {
  throw new Error(`Unhandled case: ${JSON.stringify(x)}`)
}

Content: Markdown + Gray Matter

Phần blog đọc file .md trực tiếp từ repository bằng module fs của Node:

1. gray-matter parse YAML frontmatter thành typed object
2. remark + remark-html convert body sang HTML an toàn
3. Hàm estimateReadTime() tùy chỉnh đếm từ và chia cho 200

Không database. Không CMS. Không API. Chỉ là file.

Deployment

Site được deploy trên Vercel với:

• Branch main → production
• Mỗi PR → preview URL
• Zero-config builds (Vercel tự detect Next.js)

Build time dưới 30 giây. Cold start dưới 50 ms.

Những Gì Tôi Sẽ Làm Khác Đi

Mỗi dự án đều có bài học. Của tôi:

• Bắt đầu với mobile. Tôi đã phải retrofit responsive styles trên hai component và rất đau đầu.
• Design token trước. Định nghĩa bảng màu đầy đủ trước khi viết bất kỳ component nào.
• Commit globals.css sớm. Nó trở thành load-bearing nhanh hơn bạn nghĩ.

Source Code

Portfolio này là open source. Nếu có gì trông hữu ích, hãy fork — đó là lý do nó ở đây.