Next.jsPortfolio
Next.js 15 App Router portfolio with static export, animated page transitions, filterable project cards, and a particle mesh background.
Tech Stack
Overview
Portfolio site built with Next.js 15 and React 19 using the App Router and static export (SSG). Features Motion-powered page transitions and scroll animations, a canvas particle mesh background, glass-morphism UI with Tailwind CSS v4 theming, and a JSON data layer split across server and client components for fast, filterable project browsing.
Problem
Keeping a portfolio updated required code changes, and the previous SPA lacked the performance and SEO benefits of static generation.
Solution
Migrated to Next.js 15 with static export so every page is pre-rendered at build time; added Motion animation presets for smooth transitions, tag/category/search filtering, and a canvas particle mesh for visual polish.
Architecture
Next.js 15 App Router + React 19; static export (SSG); Tailwind CSS v4 theming; Motion (Framer Motion) animation presets; canvas particle mesh background; JSON data layer with server/client component split.
Challenges
Orchestrating Motion entrance and exit animations across route changes; tuning canvas particle physics for smooth 60 fps rendering; managing server/client component boundaries to keep the bundle small; respecting reduced-motion preferences.
Results
Fast static pages with near-instant navigation; smooth page transitions and scroll-triggered animations; interactive particle background that responds to pointer movement; accessible motion preferences respected throughout.