Back to Portfolio

[Update]Portfolio Website

<cheetah/>

[Update] Portfolio Website

Overview

Website chia sẻ thông tin cá nhân và dự án tự phát triển.

Development Process

Câu chuyện phát triển dự án

Trước khi bắt tay vào dự án này, tôi nhận thấy các nền tảng tạo CV có sẵn thường giới hạn khả năng tùy biến và không thể hiện hết được tư duy lập trình cũng như chi tiết kỹ thuật (technical depth) trong các dự án của tôi. Vì thế, tôi quyết định tự xây dựng Information Website - một portfolio động, nơi tôi có toàn quyền kiểm soát từ kiến trúc hệ thống đến trải nghiệm người dùng.

Sau quá trình sửa lại và mở rộng, dự án không còn dừng ở một portfolio động đơn thuần. Nó đã trở thành một hệ thống portfolio CMS full-stack có thể quản trị nội dung, xuất bản bài viết nghiên cứu, trò chuyện với khách truy cập theo ngữ cảnh từng trang và kết nối với các dịch vụ bên ngoài như GitHub, Telegram và nhiều AI provider khác nhau.

Công nghệ & Kiến trúc

Dự án không chỉ là một trang tĩnh đơn thuần, mà là một ứng dụng Full-stack hoàn chỉnh được xây dựng trên nền tảng hiện đại:

  • Frontend: Dự án được xây bằng Next.js 16 theo kiến trúc App Router, kết hợp với React 19 và TypeScript để đảm bảo tính rõ ràng, dễ mở rộng và type-safety. Giao diện sử dụng Tailwind CSS v4, Framer Motion và hệ thống theme để tạo trải nghiệm hiện đại cho cả public site lẫn admin panel.
  • Backend & Data Layer: Tôi tận dụng Server Actions và Prisma ORM để xử lý CRUD, upload file, chat flow và revalidation trực tiếp từ server. SQLite đóng vai trò data store trung tâm cho toàn bộ các thực thể như Profile, Work Experience, Education, Skills, Projects, Categories, Articles, Guest Sessions, Messages, AI Settings và Notification Settings.
  • AI & Integrations: Hệ thống AI được thiết kế theo hướng linh hoạt, hỗ trợ OpenAI, Gemini, Ollama và cả Custom URL theo giao thức tương thích OpenAI/Gemini. Ngoài ra, dự án còn tích hợp Telegram Bot API cho notification workflow và GitHub token management để làm việc được với cả public lẫn private repository.
  • Infrastructure: Ứng dụng vẫn giữ định hướng self-host với Docker, hỗ trợ mount volume cho database và file upload. File media được lưu trực tiếp trong public/uploads, đồng thời có thêm công cụ dọn dẹp file thừa trong admin để việc vận hành ổn định hơn theo thời gian.

Tính năng trọng tâm

Tôi tập trung phát triển các tính năng nhằm chứng minh năng lực thực tế:

  • Page-aware AI Assistant: Chat widget hiện có 2 chế độ AI và Owner. Ở chế độ AI, hệ thống chỉ trả lời dựa trên dữ liệu của đúng trang người dùng đang xem như trang chủ, dự án, work experience hay article. Điều này giúp phần trả lời bám sát ngữ cảnh thay vì biến thành một chatbot chung chung.
  • Inbox & Notification Pipeline: Mỗi khách truy cập được gắn với một guest session riêng, lịch sử chat được lưu theo guest + pagePath + chatMode. Khi khách chọn nhắn trực tiếp cho chủ site, hệ thống có thể gửi cảnh báo qua Telegram và chỉ kích hoạt credential mới sau khi xác minh mã 6 số, giúp việc thay bot token hoặc recipient ID an toàn hơn.
  • Research Article Publishing: Dự án giờ có một module bài viết hoàn chỉnh với TipTap editor, cover image, summary, slug thân thiện SEO, trạng thái DRAFT/PUBLISHED, danh sách nguồn tham khảo và giao diện đọc bài public riêng. Portfolio vì thế không chỉ là nơi giới thiệu dự án, mà còn là không gian để chia sẻ kiến thức kỹ thuật.
  • Project Showcase nâng cấp: Mỗi project có thể quản lý category, role, type, diagrams, code snippet, hướng dẫn Markdown, release file và nhiều liên kết khác nhau. Luồng release hỗ trợ cả MANUAL, GITHUB và HYBRID, đồng thời trạng thái phát triển còn có thể được suy diễn từ tín hiệu commit/release để thể hiện quá trình làm việc thực tế.
  • CMS quản trị toàn diện: Từ admin panel, tôi có thể quản lý profile, work experience, education, skills, categories, projects, articles, AI settings, notification settings, GitHub credentials và inbox mà không cần đụng vào code nguồn. Đây là bước tiến lớn so với phiên bản portfolio ban đầu.
  • SEO & Product Thinking: Mỗi route public đều có metadata riêng, robots.txt, sitemap.xml, Open Graph và JSON-LD. Website được xây như một sản phẩm có thể vận hành thật, chứ không chỉ là một giao diện để “trưng bày”.

Bài học từ quá trình phát triển

Quá trình sửa lại dự án khiến tôi chuyển tư duy từ việc “làm một portfolio đẹp” sang “xây một sản phẩm cá nhân có thể vận hành lâu dài”. Những phần khó nhất không nằm ở UI, mà ở việc giữ cho AI chỉ trả lời trong phạm vi ngữ cảnh của từng trang, thiết kế luồng xác minh Telegram an toàn khi thay credential, và kết hợp dữ liệu project từ cả file upload thủ công lẫn GitHub release mà vẫn nhất quán.

Tôi cũng học được cách tổ chức một codebase portfolio theo hướng mở rộng: nội dung, inbox, AI, notification và hạ tầng cùng sống trong một hệ thống thống nhất thay vì các mảnh ghép rời rạc. Vì thế, website này giờ không chỉ là lời giới thiệu, mà là bằng chứng sống động nhất cho kỹ năng xây dựng một sản phẩm full-stack hoàn chỉnh, có chiều sâu kỹ thuật và có thể tiếp tục phát triển trong tương lai.

How to Use

Hiện tại repository này tôi đang giữ cho riêng tôi nên chưa có hướng dẫn sử dụng.

Project Details

Categories
Docker
Website
Project Type
Individual
Status
Updated
Tech Stack
TypeScriptCSSDockerfileJavaScript
Links
This project is still private