FRONTEND DEV

[2025] project.detail

The Little Coder Portfolio v1

Portfolio hiện đại xây dựng bằng Next.js App Router, hỗ trợ song ngữ EN/VI, điều hướng sidebar theo section đang xem, trang archive/chi tiết dự án, và dữ liệu project/experience từ API nội bộ với micro-interaction mượt mà.

LIVE

Timeline2 weeks

TechNext.jsReactTypeScriptTailwind CSSFramer MotionAxios

Demo Source

Desktop Preview

Mobile Mockup

The Little Coder Portfolio v1 mobile preview

[!] The Challenge

Challenge

Nâng cấp portfolio lên kiến trúc có thể mở rộng dữ liệu và hỗ trợ song ngữ, đồng thời vẫn giữ trải nghiệm mượt trên desktop/mobile.

[✔] The Result

Hoàn thiện portfolio v1 với cấu trúc tách dữ liệu/API rõ ràng, điều hướng section chính xác và UI responsive, giúp dễ mở rộng thêm dự án/kinh nghiệm mà không phải chỉnh sửa sâu vào layout.

[*] Key Highlights

[01] [success] => Xây dựng kiến trúc Next.js App Router với API route cho projects/experiences và map nội dung theo ngôn ngữ.

[02] [success] => Triển khai i18n EN/VI bằng react-i18next + i18next, tích hợp Language Switcher trực tiếp trên giao diện.

[03] [success] => Thiết kế sidebar sticky và cơ chế xác định section active bằng IntersectionObserver, kết hợp smooth scroll có offset.

[04] [success] => Tạo Scroll Progress Bar tối ưu bằng transform + requestAnimationFrame, thêm cursor spotlight bằng Framer Motion.

[05] [success] => Hoàn thiện trang archive dạng bảng và trang chi tiết dự án theo dynamic route `/projects/[id]`.