Xây portfolio bằng AI — quy trình đứng sau chính website này

Không chỉ là một website: đây là thử nghiệm để AI agent đảm nhận từ đặc tả, viết code, đến kiểm thử — con người giữ các chốt duyệt. Chính trang bạn đang xem là sản phẩm.

Vai trò: Solo builder

0 lượt xem

Công nghệ:Next.jsTypeScriptPostgreSQLDrizzle ORMAI SDKGemini

Vấn đề

Portfolio truyền thống có một vòng đời quen thuộc: dồn sức làm một lần, khoe được vài tháng, rồi bỏ mặc cho lỗi thời. Mục tiêu ở đây khác: một site "sống" — tự vận hành nội dung, và quan trọng hơn, chính quá trình xây nó phải là một dự án AI đúng nghĩa để trưng bày.

Kiến trúc

Nền: Next.js 16 App Router, TypeScript strict, hệ design token cho phép đổi trọn bộ giao diện giữa 3 skin mà không đổi một dòng DOM, i18n vi/en/zh.
Nội dung: CMS tự dựng trên Postgres (Drizzle + Neon) với admin agent — ra lệnh bằng tiếng Việt, agent soạn nháp, con người bấm duyệt.
Hoonie: trợ lý mascot trên site, tra cứu nội dung bằng tool gọi thẳng vào database thay vì học thuộc một bản snapshot lỗi thời.

Cách hoạt động — quy trình làm việc với AI

Mỗi tính năng đi qua cùng một vòng: đặc tả bằng thảo luận → AI lên plan chi tiết → con người duyệt plan → AI viết code → kiểm thử sống bằng Playwright (đo DOM thật, không đoán) → con người review lần cuối rồi commit. AI làm phần khối lượng; các chốt chặn — duyệt plan, duyệt nội dung, duyệt merge — đều là người.

Điểm thú vị nhất: những bug sâu nhất (layout co sai vì flexbox, thư viện scroll đo nhầm chiều cao trang) đều được tìm ra bằng cách đo đạc có hệ thống thay vì nhìn code đoán mò — và các bài học đó được ghi lại thành luật làm việc ngay trong repo.

Kết quả & hướng mở rộng

Sản phẩm là chính trang bạn đang xem. Hướng đang đi tiếp: pipeline tự cào tin và viết blog mỗi ngày (AI review trước, người duyệt sau), và cho Hoonie nhiều giọng điệu để khách tự chọn — cả hai đều đang chạy trên chính quy trình được mô tả ở trên.