Gridfolio

Bento portfolio template with dense layout, motion polish, and clear project hierarchy.

Next.js, Tailwind CSS, Shadcn UI, Framer Motion
Next.jsTailwind CSSShadcn UIFramer Motion
Gridfolio cover

Overview

Gridfolio is a bento-style portfolio template — dense grid composition, motion polish, and a hierarchy that puts selected work first. Built for creatives who want a distinctive layout without designing a system from scratch.

Problem

Single-column portfolios are safe and often forgettable. Pure experimental layouts look great in Dribbble shots and fall apart with real content. Gridfolio aims for a composed bento that still accommodates projects, about, and contact.

Goals

  • Use a bento grid as the primary composition language
  • Keep cards and modules scannable — one job per tile
  • Add motion that clarifies hierarchy on first load
  • Stay maintainable on Next.js + Tailwind + Shadcn

What shipped

A modular grid for featured work, bio, and supporting links. Modules scale across breakpoints so the density feels intentional on desktop and readable on mobile.

Staggered enters and hover feedback that make the grid feel alive without turning every tile into a distraction. Reduced-motion users get a stable static layout.

Shadcn-friendly components and clear content hooks so swapping projects and copy doesn’t require rewriting layout logic.

Outcome

A portfolio starter that reads as designed — not “default Next.js + cards” — while remaining practical to customize and ship.

Stack

Next.js, Tailwind CSS, Shadcn UI, Framer Motion.