Building a Premium Bento-Style Portfolio with React, GSAP & Tailwind v4

Source: Dev.to

Creating my portfolio is a rite of passage, but I wanted something that felt more like an OS dashboard than a static resume. After exploring modern design trends, I decided to build a Bento‑style grid that feels alive, responsive, and data‑driven.

🎨 The Design: The “Bento” Philosophy

The Bento grid (inspired by Apple’s promotional materials) allows for a high density of information without feeling cluttered. Each card has its own purpose:

• Profile Card – a quick “Hello”.
• Dynamic Stats – live viewer counts and GitHub metrics.
• Experience & Education – structured timelines.
• Projects – a sleek carousel to showcase work.

🛠️ The Tech Stack

• Frontend: React 19 + TypeScript (for type safety).
• Styling: Tailwind CSS (leveraging the new v4 features for clean variable handling).
• Animations: GSAP (GreenSock) for buttery‑smooth entry transitions.
• Icons: Lucide‑React (consistent and lightweight).
• Data Hooking: SWR for efficient fetching from a custom API.

🚀 Key Technical Features

1. Entrance Animation (GSAP)

Cards stagger into view with a scale‑up effect using GSAP’s ScrollTrigger, giving the UI a sense of “weight” as the user scrolls.

gsap.fromTo(
  ".bento-card",
  { opacity: 0, y: 50, scale: 0.9 },
  {
    opacity: 1,
    y: 0,
    scale: 1,
    stagger: 0.1,
    duration: 0.8,
    ease: "power3.out",
  }
);

2. Optimized Icon Visibility

Dark mode can make black icons (e.g., GitHub, Express) disappear. A utility automatically detects these icons and applies a dark:invert filter, ensuring they pop regardless of the user’s theme.

3. The “Fullstack” Skills Card

Instead of a simple list, skills are organized into categories (Frontend, Backend, Tools) with a layered UI:

• Bold category titles with horizontal separators.
• Subtle, large background watermark text for depth.
• High‑quality SVG icons for every technology.

4. Interactive Social Hub

Social links are presented as interactive cards that support:

• Instagram / YouTube / X integration.
• Direct resume download using the download attribute on a PDF link.
• Hover states that rotate and scale slightly, adding interactivity to the grid.

📈 Live Data Integration

The portfolio connects to a custom API server that:

• Fetches real‑time GitHub Stats (stars, repos, contributions) and project repositories.
• Tracks unique viewers and likes using a visitor‑ID system stored in local storage.

🔗 Links

Live Demo:

Bento portfolio just dropped 👀.