Next.jsTypeScriptTailwind v4Web Audio APIEdge Runtime
Overview
A production-deployed Next.js 16 links directory serving as a personal digital identity hub. Built with anti-FOUC theme syncing, Web Audio API sound feedback, an animated pixel cat cursor chaser, real-time GitHub contribution graph, and a live portfolio sub-site — all deployed on a single Edge-optimised codebase.
Highlights
- Sub-50ms page load on Edge Runtime with zero layout shift
- Anti-FOUC theme sync via inline script before React hydration
- 35+ platform routes with SEO-optimised redirect middleware
- Real-time GitHub contribution calendar via public contributions API
Tech Stack
Next.js 16
App framework with Turbopack
TypeScript
Type safety across all components
Tailwind CSS v4
Utility-first styling with CSS variables
Vercel Edge
Global deployment & middleware routing
Web Audio API
Synthesized UI sound feedback
Challenges
- →Eliminating Flash of Unstyled Content (FOUC) on theme load across all browsers
- →Building a real-time contribution graph without a GitHub token (rate limit avoidance)
- →Routing 35+ slugs through a single middleware without impacting Edge cold-start times
Outcomes
- ✓Zero layout shift score (CLS = 0) in Lighthouse audits
- ✓Deployed and serving live traffic at links.sagarithm.in
- ✓Portfolio sub-site with contribution graph and cat animation integrated