DEV Community: Kiran Balaji

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

Kiran Balaji — Mon, 29 Dec 2025 16:55:17 +0000

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.

🔗 Links

Live Demo: [https://my-portfolio-two-phi-2q08hcotfn.vercel.app/]

Bento portfolio just dropped 👀
Rate it -----/⭐⭐⭐⭐⭐ | roast it in the comments 🔥💬

Controlled vs Uncontrolled Forms in React 🚀

Kiran Balaji — Fri, 26 Dec 2025 16:01:02 +0000

Forms look simple in React—until they aren’t.

If you’ve ever wondered:

Why is my input re-rendering so much?
When should I use useRef instead of useState?
What do interviewers actually expect here?

This article breaks down controlled vs uncontrolled forms in React with practical use cases, not just definitions.

What Is a Controlled Form?

A controlled form is one where React controls the input value.
The input’s value lives in React state, and every change goes through an onChange handler.

Example: Controlled Input

import { useState } from "react";

function ControlledForm() {
  const [email, setEmail] = useState("");

  return (
    <form>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter email"
      />
      <p>Email: {email}</p>
    </form>
  );
}

✅ Pros of Controlled Forms

Easy validation
Instant UI updates
Predictable behavior
Required for complex logic

❌ Cons of Controlled Forms

More boilerplate
Re-renders on every keystroke
Can hurt performance in large forms

What Is an Uncontrolled Form?

An uncontrolled form lets the DOM handle the input state.
React accesses the value only when needed, using a ref.

Example: Uncontrolled Input

import { useRef } from "react";

function UncontrolledForm() {
  const emailRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(emailRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" ref={emailRef} placeholder="Enter email" />
      <button type="submit">Submit</button>
    </form>
  );
}

✅ Pros of Uncontrolled Forms

Better performance
Less code
Closer to native HTML
Great for simple forms

❌ Cons of Uncontrolled Forms

Harder validation
No instant UI feedback
Not ideal for dynamic logic

Controlled vs Uncontrolled: Side-by-Side

Feature	Controlled	Uncontrolled
State location	React	DOM
Re-renders	Every change	On submit
Validation	Easy	Hard
Performance	Can be slower	Faster
Best for	Complex forms	Simple forms

Which One Should You Use?

Use Controlled Forms when:

You need real-time validation
UI depends on input values
You’re building dashboards, admin panels
You’re using form libraries (Formik, React Hook Form)

Use Uncontrolled Forms when:

Simple forms
Performance-sensitive inputs
One-time submission
Legacy HTML forms

Final Thoughts

Start simple → uncontrolled
Add complexity → controlled
Don’t blindly control everything

React gives you choices—good engineers know when to use each.

Next.js

Kiran Balaji — Sat, 08 Mar 2025 13:25:22 +0000