Bỏ qua tới nội dung
← Tất cả dự án
Frontend

Tháng 9, 2026 - Hiện tại • Thiệp mời Tốt nghiệp & Portfolio Cột mốc (Next.js 16 + React 19)

Xem Live Demo →Xem trên GitHub →
Ảnh dự án Graduation Invitation & Milestone Portfolio

Tổng quan

Graduation Invitation & Milestone Portfolio là nền tảng web thiệp mời tốt nghiệp cá nhân hóa kết hợp nhật ký hành trình 4 năm đại học (2022 - 2026) của thủ khoa / tân cử nhân Trần Hồ Hoàng Vũ (Khoa học Máy tính - K26, Đại học Tôn Đức Thắng). Dự án mang phong cách hoàng gia trang nhã (Royal Academic Letterpress), tự động cá nhân hóa danh xưng người nhận qua URL query parameters không cần backend, cẩm nang di chuyển 4 phương tiện và tour VR 360°, hệ thống RSVP ghi nhận thời gian thực về Google Sheets và thư viện 136 ảnh kỷ niệm chuẩn nén WebP.

Kiến trúc Hệ thống

Kiến trúc Server-Driven Jamstack & Component-Driven trên nền Next.js 16 (App Router, Turbopack, React 19) phân tầng: Presentation Layer 9 section độc lập, State Layer với custom hooks (useInvitee chống hydration mismatch, scroll spy tối ưu requestAnimationFrame), Data Layer SSOT định kiểu chặt chẽ trong graduation.ts, và API Layer serverless route handler /api/rsvp chuyển tiếp webhook bảo mật.

Dữ liệu & Cơ sở dữ liệu

Mô hình lưu trữ Serverless Database với Google Sheets qua Google Apps Script Webhook API (append-only) kết hợp client-side localStorage lưu vết chống gửi lặp. Typed In-Memory Data Schema (SSOT) bằng TypeScript as const. Pipeline nén 136 ảnh kỷ niệm sang WebP chất lượng 85% giảm 70% dung lượng, và Date Derivation Engine tính toán ngày giờ tự động chuẩn ISO 8601.

Thách thức Kỹ thuật & Giải pháp cốt lõi

  1. 01

    1. Khắc phục nghẽn compositor & rớt FPS trên iOS WebKit (Double Backdrop Blur & Layout Thrashing):

    Loại bỏ hoàn toàn backdrop-filter đa tầng tại Mobile Menu Drawer và cụm nút nổi; thay bằng màu nền giấy đục bg-paper/98 viền mạ vàng. Chuyển toàn bộ hoạt ảnh sang CSS GPU transforms thuần túy (translateY, rotate) với độ trễ 0ms, gỡ bỏ smooth-scroll tĩnh xung đột gia tốc quán tính iOS và kiểm soát scroll listener bằng requestAnimationFrame.

  2. 02

    2. Triệt tiêu hoàn toàn lỗi Hydration Mismatch & giật xô lệch bố cục (CLS):

    Xây dựng hook useInvitee với cơ chế Client-Mounting Guard (chỉ đọc query param và localStorage sau khi mount, render fallback 'Bạn' trang nhã trên server). Kỹ thuật Zero Layout Shift trên Navbar dùng thẻ span ẩn cố định sẵn chiều rộng tối đa, tiền tính toán hằng số lượng giác SVG và thời gian ở module-level.

  3. 03

    3. Tối ưu tải thư viện 136 ảnh kỷ niệm & đồ họa Vector phức tạp giữ bundle siêu nhẹ:

    Lập trình RoyalCurtain bằng 100% mã SVG vector với 2 path nửa vòm và cánh rèm đối xứng dùng gradient đa điểm (0 lượt request HTTP). Kiến trúc hiển thị ảnh 2 cấp (Two-tier Gallery) hiển thị mặc định 6 ảnh/album với cơ chế toggle 1 chạm, chuẩn nén WebP với lazy loading và tách modal nặng qua next/dynamic (ssr: false).