Skip to content
← All projects
Frontend

Sep 2026 - Present • Graduation Invitation & Milestone Portfolio (Next.js 16 + React 19)

Live Demo →View on GitHub →
Ảnh dự án Graduation Invitation & Milestone Portfolio

Overview

Graduation Invitation & Milestone Portfolio is a personalized graduation web platform and 4-year university milestone journal (2022 - 2026) for valedictorian / graduate Tran Ho Hoang Vu (Computer Science - K26, Ton Duc Thang University). Features Royal Academic Letterpress visual styling, zero-backend dynamic URL query recipient personalization, 4-vehicle campus navigation guide with VR 360° tour, real-time RSVP capture via Google Sheets Webhook, and an optimized 136-photo WebP memories showcase.

System Architecture

Server-Driven Jamstack & Component-Driven Architecture on Next.js 16 (App Router, Turbopack, React 19): 9 modular sections, state management via custom hooks (useInvitee with hydration guard, requestAnimationFrame scroll spy), strictly typed SSOT data layer in graduation.ts, and secure Next.js serverless route handler /api/rsvp webhook proxy.

Data & Database

Serverless persistence via Google Sheets (Google Apps Script Webhook API, append-only) paired with client-side localStorage anti-spam state caching. Typed In-Memory Data Schema (SSOT) via TypeScript strict types. Automated WebP image compression pipeline for 136 photos achieving >70% size reduction, and RFC 3986 standard URL generation for Google Calendar.

Key Challenges & Technical Solutions

  1. 01

    1. Resolving iOS WebKit Compositor Bottlenecks & Frame Drops (Double Backdrop Filter Thrashing):

    Eliminated multi-layered backdrop-blur-lg from Mobile Drawer and floating action buttons; replaced with refined opaque paper bg-paper/98 and hairline gold borders. Replaced Framer Motion staggering with GPU-accelerated CSS transforms (translateY, rotate) with 0ms latency, resolved iOS touch inertial conflicts, and throttled scroll listeners via requestAnimationFrame.

  2. 02

    2. Zero Hydration Mismatch & Cumulative Layout Shift (CLS) Elimination:

    Built custom hook useInvitee with Client-Mounting Guard (deferring search params and localStorage reads until post-hydration with graceful 'Bạn' fallback). Implemented Zero Layout Shift on Navbar using invisible static width-reservation spans, and precomputed SVG trigonometric constants at module initialization.

  3. 03

    3. High-Performance 136-Image Showcase & Complex Vector Assets with Ultralight Bundle:

    Authored RoyalCurtain in 100% pure SVG code with multi-stop gradients (zero raster HTTP requests). Engineered a Two-Tier Gallery display showing 6 initial photos per album with 1-tap expansion and smart auto-scroll, coupled with 85% WebP compression, native lazy loading, and next/dynamic code splitting for heavy interactive modals.