Chuyện Mình 'Thức Trắng' Một Tuần Xây Portfolio 'Xịn Sò' Có AI Trợ Giúp Với Storyblok và Next.js!
Lê Lân0
Hành Trình Xây Dựng Portfolio Đầy Tính Năng Với Storyblok Headless CMS Và Next.js
Mở Đầu
Hành trình học tập và xây dựng một dự án cá nhân với Headless CMS và AI có thể là một thách thức, nhưng cũng là cơ hội để phát triển kỹ năng và tạo nên sản phẩm ấn tượng.
Khi lần đầu tiên tôi thấy cuộc thi Storyblok Headless CMS Challenge trên DEV, tôi không xem đó chỉ là một cuộc thi mà còn như một thử thách cá nhân. Với mục tiêu tìm hiểu kiến trúc headless CMS từ đầu, tôi đã đặt ra kế hoạch xây dựng một portfolio chuyên nghiệp không chỉ đẹp mắt mà còn sở hữu nhiều tính năng hiện đại — thứ mà một nhà phát triển cấp cao sẽ tự hào.
Bài viết này ghi lại hành trình một tuần học tập, sửa lỗi, xây dựng và cuối cùng là giới thiệu một sản phẩm hoàn chỉnh mà tôi rất tự hào. Dự án này đã trở thành điểm nhấn trong kỹ năng và là minh chứng cho sự kết hợp giữa công nghệ mới và sáng tạo cá nhân.
Tổng Quan Dự Án Cuối: Portfolio và Blog Đa Tính Năng
Kiến Trúc Decoupled với Next.js và Storyblok
Dự án của tôi là một portfolio nhiều trang kết hợp blog, được xây dựng trên kiến trúc hoàn toàn decoupled. Frontend sử dụng Next.js, trong khi nội dung được quản lý qua Storyblok — một headless CMS với Visual Editor linh hoạt.
Mọi nội dung, từ phần tiêu đề chính (hero) đến chân trang (footer), đều có thể chỉnh sửa trực tiếp thông qua giao diện trực quan của Storyblok.
Các Thành Phần Chính
- Trang chủ linh hoạt, dựa trên các thành phần component: Bao gồm các khối Hero, About Me, lưới kỹ năng chuyên môn, danh sách dự án và chân trang. Tất cả đều được cấu hình bằng Storyblok.
- Blog đầy đủ tính năng: Trang danh sách bài viết chính (/blog) và các trang bài viết riêng biệt (/blog/[slug]), sử dụng kỹ thuật Incremental Static Regeneration của Next.js (
getStaticPropsvàgetStaticPaths).
- Trải nghiệm người dùng chuyên nghiệp: Giao diện responsive sạch sẽ, thanh điều hướng cố định và hiệu ứng chuyển động mượt mà nhờ Framer Motion.
Portfolio không chỉ đẹp mắt mà còn có cấu trúc kỹ thuật hiện đại, phù hợp với các chuẩn phát triển web hàng đầu.
Tính Năng Nổi Bật: Trợ Lý AI Thông Minh
Giới Thiệu Trợ Lý AI
Nhằm dự thi giải thưởng AI, tôi xây dựng một công cụ hỗ trợ thật sự hữu ích cho chính bản thân — tự động tạo tóm tắt bài viết.
Cách Thức Hoạt Động
Dưới đây là quy trình hoạt động của trợ lý AI:
- Người dùng nhập hoặc dán toàn bộ nội dung bài viết vào trang
/assistant.
- Frontend gọi API backend trong Next.js (
/api/generate-summary) truyền văn bản bài viết.
- API sử dụng OpenAI GPT-3.5 Turbo với prompt được điều chỉnh để mô phỏng một chuyên gia biên tập nội dung.
- Kết quả tóm tắt được trả về frontend, sẵn sàng cho việc sao chép và dán vào trường tóm tắt trong Storyblok — nâng cao tốc độ và chất lượng nội dung.
Tính năng này giảm đáng kể thời gian và công sức trong việc tạo nội dung tóm tắt cho blog, đồng thời tăng tính nhất quán và chuyên nghiệp.
Bộ Công Cụ và Công Nghệ Sử Dụng
Thành phần | Công nghệ / Công cụ |
|---|---|
Frontend | Next.js, React |
Headless CMS | Storyblok |
Triển khai | Vercel |
Tạo kiểu | Global CSS |
Hiệu ứng chuyển động | Framer Motion |
Tô sáng cú pháp | PrismJS |
Trí tuệ nhân tạo | OpenAI API (GPT-3.5 Turbo) |
Những Thách Thức & Bài Học Kinh Nghiệm
Proxy HTTPS cho Storyblok Editor
Vấn đề lớn nhất lúc đầu là kết nối server local HTTP với trình chỉnh sửa Storyblok yêu cầu HTTPS. Giải pháp là thiết lập một proxy SSL cục bộ giúp đảm bảo bảo mật và đồng thời hiểu sâu về quản lý chứng chỉ số, proxy và networking.
Lỗi CSS "Khó nhằn"
Một lỗi tưởng như nhỏ nhưng tốn nhiều thời gian: CSS được tải vào trình duyệt nhưng không áp dụng. Sau quá trình kiểm tra kỹ lưỡng:
- Đường dẫn import sai chính tả, thậm chí một ký tự không nhìn thấy gây lỗi.
- Bài học quý giá về cách debug hệ thống một cách có phương pháp, từng bước, giúp tiết kiệm rất nhiều thời gian.
Bài học quan trọng: Luôn kiểm tra kỹ từng thành phần nhỏ, đặc biệt trong quá trình phát triển web phức tạp.
Tại Sao Chọn Storyblok?
Visual Editor là công cụ thay đổi hoàn toàn trải nghiệm phát triển. Việc xây dựng các component tái sử dụng và "kéo - thả" để dựng trang như chơi lego vô cùng hiệu quả và trực quan.
Sự phản hồi ngay lập tức khi thay đổi nội dung trên server phát triển local giúp tăng tốc toàn bộ quy trình xây dựng sản phẩm.
Kết Luận
Tuần vừa qua là một chuyến đi đáng nhớ, từ ý tưởng ban đầu đến một ứng dụng web đa tính năng được triển khai đầy đủ trên nền tảng hiện đại. Dự án portfolio này không chỉ làm đẹp hồ sơ cá nhân mà còn nâng cao kỹ năng phát triển, đặc biệt là trong các lĩnh vực Headless CMS và AI.
Tôi rất biết ơn DEV và Storyblok đã mang đến cơ hội tuyệt vời này. Và hy vọng, bài viết sẽ truyền cảm hứng cho bạn trong hành trình phát triển dự án cá nhân.
Nếu bạn quan tâm xem chi tiết hoặc thử nghiệm, mã nguồn dự án có tại:
https://github.com/sunilkommiri/storyblok-portfolio
Tham Khảo
- Storyblok Documentation: https://www.storyblok.com/docs
- Next.js Official Site: https://nextjs.org
- OpenAI API Reference: https://platform.openai.com/docs/api-reference
- DEV Community: https://dev.to
Loading...