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

#webdev #react #typescript #portfolio

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.

Here’s a breakdown of how I built it and the tech stack behind it.

🎨 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 those "butter-smooth" entry transitions.
Icons: Lucide-React (consistent and lightweight).
Data Hooking: SWR for efficient fetching from a custom API.

🚀 Key Technical Features

1. The Entrance Animation (GSAP)

Rather than just appearing, the cards stagger into view with a scale-up effect using GSAP's ScrollTrigger. It gives a sense of "weight" to the UI as the user scrolls down.

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

One challenge with dark mode is that logos like GitHub or Express are naturally black. I implemented a system that 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, I organized skills into categories (Frontend, Backend, Tools) with a "layered" UI. Each segment has:

A bold category title with a horizontal separator.
A subtle, large background watermark text for a "premium" depth effect.
High-quality SVG icons for every technology.

4. Interactive Social Hub

The social links aren't just buttons. They are interactive cards that support:

Instagram/YouTube/X integration.
Direct Resume Download: Using the download attribute on a specialized PDF link.
Hover States: Cards rotate and scale slightly on hover, making the grid feel interactive.

📈 Live Data Integration

I didn’t want static numbers. The portfolio connects to a custom API server that:

Fetches real-time GitHub Stats (Stars, Repos, Contributions), GitHub Project Repos.
Tracks Unique Viewers and Likes using a visitor ID system stored in local storage.