Building a Bento Portfolio with Next.js

The bento grid layout has become one of the most popular design patterns for modern portfolios. It's playful, information-dense, and inherently responsive.

Why Bento?

Traditional portfolios follow a linear scroll pattern. Bento grids let you show multiple facets of your identity simultaneously — your work, your music taste, your tech stack, and your personality all at once.

The Tech Stack

• • Next.js 16 with App Router for SSR and API routes
• • Motion (Framer Motion) for spring animations
• • Tailwind CSS for glassmorphism styling
• • ISR for live Spotify and GitHub data

Key Features

Eye-Tracking Avatar

The avatar's eyes follow your cursor using useMotionValue and useSpring, computed with Math.atan2 — all without causing React re-renders.

Live Spotify Widget

A Next.js API route refreshes the Spotify token and returns the currently playing track, cached with ISR for 30 seconds.

Data-Driven Grid

The entire grid layout is driven by a data.json file, making it trivially easy to rearrange, add, or remove boxes without touching component code.

What I Learned

Building this portfolio reinforced that the best portfolio is one that demonstrates skill through its own construction. Every animation, every API integration, every design decision is itself a showcase.