Overview
Personal portfolio website built with Next.js (App Router), Tailwind CSS, Velite, and Upstash Redis, deployed on Vercel. Started from an open-source portfolio template, then fully redesigned and extended.
What I Built
3D Ribbon Animation
A full-page canvas animation running on a Catmull-Rom spline with 6 torsion rotations along the ribbon length. Each frame renders per-quad linear gradients that simulate the lit and shadow faces of a 3D twisted surface, with an atmospheric halo and drop shadow. Static geometry (centers, normals, depth) is cached in a ref and only rebuilt when the viewport resizes or the slow breathe oscillation crosses a quantized bucket — cutting per-frame computation by ~80%. Edge highlights are batched into two path calls instead of one per segment. Pre-allocated Float32Array buffers eliminate per-frame garbage collection. The animation pauses when the browser tab is hidden.
About Section
Accordion tile grid with four cards — Experience, Education, Skills, and Status. Cards in each row share expand/collapse state so tiles grow together and stay visually aligned. Motion's AnimatePresence drives the height animation. The canvas ribbon does not re-render or flicker when tiles expand because height changes are handled through CSS transitions rather than forcing a canvas bitmap reset.
Project Pages
MDX-driven project pages powered by Velite. Each project is a .mdx file with frontmatter compiled to a pre-built JavaScript bundle at build time. Project pages include view counts via Upstash Redis with a 60-second ISR revalidation window.
Performance
Removed unused components (particle system, fluid orbs, LaTeX compiler, mouse-tracking card), unused npm packages, dead CSS, and unused Tailwind keyframe animations. Ribbon geometry caching, reduced segment counts (300 desktop / 210 mobile), and edge-on quad culling keep the animation stable on mobile hardware.
Stack
- Framework: Next.js 16 (App Router, Turbopack)
- Styling: Tailwind CSS 4
- Content: Velite, MDX
- Animation: Canvas 2D API, Motion
- Database: Upstash Redis
- Deployment: Vercel