XuanNha.Dev - Vibe Coding Studio
XuanNha.Dev - Vibe Coding Studio là website portfolio cá nhân được xây dựng nhằm giới thiệu bản thân, quản lý các dự án và chia sẻ kiến thức thông qua hệ thống Blog. Dự án được phát triển theo định hướng AI-Assisted Development (Vibe Coding), sử dụng Next.js, React, MongoDB và Tailwind CSS để tạo nên một nền tảng hiện đại, tối ưu hiệu năng và dễ mở rộng.
Fullstack Developer
Giới thiệu
XuanNha.Dev - Vibe Coding Studio là dự án portfolio cá nhân được xây dựng nhằm phát triển thương hiệu cá nhân của tôi với vai trò là một Software Engineer theo định hướng AI-Assisted Development.
Website không chỉ là nơi giới thiệu bản thân mà còn đóng vai trò như một hệ thống quản trị nội dung (CMS), cho phép quản lý dự án, bài viết, kỹ năng, hồ sơ cá nhân và các tài nguyên đa phương tiện mà không cần chỉnh sửa mã nguồn.
Mục tiêu
- Xây dựng website portfolio chuyên nghiệp.
- Chia sẻ các dự án đã hoàn thành.
- Viết blog về lập trình và AI.
- Quản lý nội dung thông qua CMS.
- Thể hiện năng lực Full Stack Development.
- Áp dụng AI vào toàn bộ quy trình phát triển phần mềm.
Tính năng
- Trang giới thiệu cá nhân.
- Quản lý dự án.
- Blog Markdown.
- Dashboard quản trị.
- Quản lý Media.
- SEO.
- Responsive.
- Dark Mode.
- Smooth Animation.
- Contact Form.
- Upload hình ảnh.
Công nghệ
- Next.js
- React
- TypeScript
- MongoDB
- Mongoose
- Tailwind CSS
- Framer Motion
- Shadcn UI
- NextAuth
- Cloudinary
Kiến trúc
Website được xây dựng theo mô hình Full Stack với Next.js App Router.
Frontend sử dụng React và Tailwind CSS.
Backend sử dụng API Route của Next.js.
MongoDB lưu trữ toàn bộ dữ liệu.
Cloudinary quản lý hình ảnh.
Kết quả
Hoàn thành hệ thống Portfolio có khả năng mở rộng lâu dài, hỗ trợ quản trị nội dung thông qua CMS và trở thành nền tảng chính để giới thiệu bản thân cũng như các dự án phần mềm trong tương lai.
Khó khăn
Khó khăn lớn nhất của dự án là thiết kế một hệ thống vừa đáp ứng nhu cầu giới thiệu cá nhân, vừa hoạt động như một CMS hoàn chỉnh. Ngoài ra, việc lựa chọn kiến trúc phù hợp, tối ưu SEO, hiệu năng, khả năng mở rộng và tạo trải nghiệm người dùng hiện đại cũng là những thách thức quan trọng trong quá trình phát triển.
Giải pháp
Áp dụng kiến trúc Next.js App Router kết hợp React, MongoDB và Tailwind CSS để xây dựng hệ thống Full Stack hiện đại. Website được thiết kế theo hướng component hóa, hỗ trợ tái sử dụng, dễ bảo trì và mở rộng. Đồng thời sử dụng các công nghệ như Framer Motion, Shadcn UI, NextAuth và Cloudinary nhằm nâng cao trải nghiệm người dùng và khả năng quản lý nội dung.
Kết quả
Hoàn thành một nền tảng portfolio hiện đại với hệ thống quản trị nội dung, cho phép quản lý dự án, bài viết, kỹ năng và thông tin cá nhân thông qua Dashboard. Website đáp ứng tốt các tiêu chí về giao diện, hiệu năng, SEO, khả năng mở rộng và định hướng phát triển lâu dài.