
[Completed]Portfolio Website
<cheetah />
![[Completed] Portfolio Website](/uploads/1765463900996-image20251211213009701.png)
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.
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: Next.js (App Router) kết hợp với TypeScript để đảm bảo type-safety. Giao diện được trau chuốt bằng TailwindCSS và Framer Motion cho các hiệu ứng chuyển động mượt mà.
- Backend & Database: Sử dụng Prisma ORM để tương tác dữ liệu, giúp dễ dàng quản lý các quan hệ phức tạp giữa Profile, Projects và Skills.
- Infrastructure: Toàn bộ ứng dụng được đóng gói và vận hành trên môi trường Docker, giải quyết triệt để các vấn đề về tương thích môi trường (như lỗi OpenSSL hay Prisma Binary thường gặp).
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ế:
- Hệ thống "Live" Commit: Không chỉ liệt kê dự án, website cho phép quản lý GitHub Tokens trong trang Admin để tự động tải và hiển thị trạng thái commit từ cả các Private Repository. Điều này giúp nhà tuyển dụng thấy được tần suất làm việc thực tế của tôi.
- Interactive Chat Widget: Một hệ thống chat real-time tự xây dựng (không dùng plugin bên thứ 3), cho phép khách truy cập để lại lời nhắn hoặc trò chuyện trực tiếp.
- CMS Quản trị: Hệ thống Admin mạnh mẽ để tôi có thể cập nhật thông tin, viết bài chia sẻ kỹ thuật (Markdown support) mà không cần đụng vào code nguồn.
Bài học từ quá trình phát triển
Quá trình này cũng là lúc tôi đối mặt và giải quyết các bài toán kỹ thuật thực tế, điển hình như việc tối ưu hóa Dockerfile cho chế độ Next.js Standalone hay xử lý các vấn đề về CORS khi chạy qua Cloudflare Tunnel.
Website này 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 và tư duy lập trình của tôi.
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.