DEV Community: Sushil

I Have Finally Launched my Template⚡⚡

Sushil — Tue, 16 Dec 2025 19:14:36 +0000

Today I’m launching Krome AI Agent — a production-ready Next.js template designed for building modern AI agent products.

This is my first full template, and honestly, I’m both excited and a little nervous to finally put it out there.

Preview

The goal was simple:

Clean architecture
Modern UI
Real SaaS pages
No unnecessary abstractions
Easy to extend and customize

What’s Included

Krome AI Agent is built with Next.js and focuses on real-world needs:

⚡ Modern, clean UI
🌗 Multiple themes (light & dark)
📄 Multiple ready-to-use pages (landing, blog, auth, contact, careers)
🧩 Reusable, well-structured components
🧠 AI-product friendly layouts
🎯 SEO-ready pages
✨ Smooth, subtle animations

Everything is intentionally kept simple and readable, so you can move fast without fighting the codebase.

If this sounds useful, I’d really appreciate your support on Product Hunt 🙌
👉 ProductHunt

Thanks for checking it out — feedback is always welcome! 🚀

✨ How to Create SVGs in Figma and Animate Them Using Motion 🚀

Sushil — Wed, 10 Dec 2025 15:22:26 +0000

SVGs are one of the most powerful tools in modern UI development. They’re scalable, lightweight, customizable, and—best of all—easy to animate when paired with Motion.

In this guide, I’ll walk you through how to:

Design SVGs in Figma
Export them cleanly
Convert them into React components
Animate them with Motion (Framer Motion)

Let’s jump right in.

Open Figma and create a new frame.

Creating SVG lines is simple — select the Pen tool, click to set your starting point, and then click again where you want the line to end. Figma will automatically create a clean vector path that you can later export as an SVG

To create curves, we’ll use the Bend tool.

Select your SVG line, click on the Bend tool, and then click on the line again. You’ll see two Dots appear, just drag those dots to shape the curve however you like. That’s it! You now have a clean, smooth, curved line.

Once your line looks good, exporting it as an SVG is easy. Just select the line, right-click, and choose Copy as SVG.

I’ve already created a demo component with some icons and a few pre-built SVG lines animating in the background. Now, let’s take a look at how we can animate the left SVG line using Motion.

"use client";

import MotionDiv from "@/components/animation/motion-div";
import { cn } from "@/lib/utils";
import React from "react";
import { motion } from "motion/react";
import { DotPattern } from "@/components/ui/dot-pattern";
import Container from "@/components/container";
import ThemeToggle from "@/components/theme-toggle";
import Scales from "@/components/scales";

const Demo = () => {
  return (
    <Container className="relative flex h-screen max-w-[524px] flex-col items-center justify-center bg-white dark:bg-black">
      <div className="mb-4">
        <ThemeToggle />
      </div>
      <Scales />
      <div className="relative overflow-hidden border-y">
        <Heading
          heading="Multi-Model Orchestration"
          subHeading="Use different AI models together in a single flow to optimize accuracy, creativity, and performance across tasks like generation, enhancement, and analysis."
        />
        <div className="flex scale-90 flex-col items-center justify-center sm:scale-105 md:scale-110 lg:scale-125">
          <MotionDiv className="relative flex h-72 w-[484px] scale-80 items-center justify-center bg-white p-2 px-4 sm:px-0 dark:bg-black">
            <DotPattern
              className={cn(
                "[mask-image:radial-gradient(150px_circle_at_center,white,transparent)]",
                "text-neutral-400 dark:text-neutral-700",
              )}
            />

            <IconCard className="left-8.5" icon={<GeminiIcon />} />
            <IconCard className="left-25.5" icon={<OpenAiIcon />} />
            <IconCard className="left-42.5" icon={<DeepSeekIcon />} />
            <IconCard className="right-42.5" icon={<ClaudeIcon />} />
            <IconCard className="right-25.5" icon={<GrokIcon />} />
            <IconCard className="right-8.5" icon={<QwenAiIcon />} />

            <Line1 />
            <Line2 />
            <Line3 />
            <Line4 />
            <Line5 />
            <Line6 />
            <MotionDiv
              initial={{}}
              className="bg-card absolute right-1/2 bottom-6 flex size-14.5 translate-x-1/2 items-center justify-center rounded-full border p-1"
            >
              <div className="flex size-full items-center justify-center rounded-full p-2.5 text-center shadow-2xl">
                SM
              </div>
            </MotionDiv>
          </MotionDiv>
        </div>
      </div>
    </Container>
  );
};

export default Demo;

type Heading = {
  heading: string;
  subHeading: string;
};

const Heading = ({ heading, subHeading }: Heading) => {
  return (
    <div className="mb-2 flex flex-col items-start justify-center gap-0.5 px-6 pt-8 sm:mb-8 lg:pt-4">
      <h2 className="text-card-title text-base font-medium tracking-tight sm:text-lg">
        {heading}
      </h2>
      <p className="text-paragraph mt-1 max-w-lg text-xs leading-snug font-light text-pretty sm:text-sm">
        {subHeading}
      </p>
    </div>
  );
};

type IconCardType = {
  className: string;
  icon: React.ReactNode;
};

const IconCard = ({ className, icon }: IconCardType) => {
  return (
    <MotionDiv
      className={cn(
        `bg-card absolute top-10 z-10 flex w-fit items-center justify-center rounded-full border shadow-2xl inset-shadow-sm`,
        className,
      )}
    >
      <div className="flex size-9.5 items-center justify-center rounded-full p-1.5">
        {icon}
      </div>
    </MotionDiv>
  );
};


const Line2 = () => {
  return (
    <svg
      width="107"
      height="166"
      viewBox="0 0 107 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-30"
      stroke="url(#line-2)"
    >
      <path strokeWidth={2} d="M106.5 166C106.5 91.8654 0.5 93.6701 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-2"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};
const Line3 = () => {
  return (
    <svg
      width="50"
      height="166"
      viewBox="0 0 50 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-47"
      stroke="url(#line-3)"
    >
      <path strokeWidth={2} d="M49.5 166C49.5 93.9514 0.5 93.9514 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-3"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};

const Line4 = () => {
  return (
    <svg
      width="50"
      height="166"
      viewBox="0 0 50 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 right-47 rotate-y-180"
      stroke="url(#line-4)"
    >
      <path strokeWidth={2} d="M49.5 166C49.5 93.9514 0.5 93.9514 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-4"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};
const Line5 = () => {
  return (
    <svg
      width="107"
      height="166"
      viewBox="0 0 107 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 right-30 rotate-y-180"
      stroke="url(#line-2)"
    >
      <path strokeWidth={2} d="M106.5 166C106.5 91.8654 0.5 93.6701 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-2"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};
const Line6 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 right-13 rotate-y-180"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-6)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

      <defs>
        <motion.linearGradient
          id="line-6"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};

Let’s take the SVG we created in Figma and use it here.
First, we’ll turn it into a component called Line1.

Here’s what the component looks like.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="#eeeeee"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />
    </svg>
  );
};

Now, to animate the line, we’ll use Motion with a linear gradient.
To do that, we need to place our gradient inside a <defs> section, which is where SVG stores reusable definitions.

Next, we’ll turn the linear gradient into a Motion element and give it an ID so we can reference it from the SVG stroke.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"  // use the id here
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

<defs>
<motion.linearGradient
id="line-1"
>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

A <stop> defines one color point inside a gradient.
A gradient is essentially a list of stops that blend seamlessly into one another.

stopColor is the actual color for that stop.

offset defines where the color appears in the gradient.

It is like a progress percentage:

0 or 0% → start of the gradient
1 or 100% → end of the gradient
0.5 or 50% → middle

Inside the linear gradient, we have four values: x1 and x2 control how the gradient moves along the x-axis, and y1 and y2 control movement along the y-axis.

For this example, let’s start by animating x1 and x2.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"  // use the id here
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

In the original gradient, x1 = 0% and x2 = 10% define where the red/blue part of the gradient starts.

Now, you can probably guess what we’re going to do
we’ll animate those same values so the gradient moves across the line.
So instead of starting at 0% → 10%, we’ll animate them to 90% → 100%.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"  // use the id here
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

we’re basically telling the gradient to slide forward along the line, creating that smooth glowing effect.

The gradient starts at its initial position and then moves from 90% to 110%, looping continuously. The linear easing keeps the motion steady, while the repeat delay adds a small pause before the next cycle, making the animation feel more natural and less aggressive.

Let's see it in action

But as you can see, the gradient doesn’t start from the top, it appears somewhere in the middle.

That’s happening because we’re only animating the x-axis values, not the y-axis. The gradient is technically moving, but only horizontally, so the effect doesn’t align with the shape of the curve.

To understand this better, we can use a simple <rect> example. A behaves similarly to a <path>, but because it’s a clean, straight shape, it makes the gradient behavior much easier to see.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      {/* <path
        strokeWidth={2}
        stroke="url(#line-1)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      /> */}

      <rect
        width="169"
        height="167"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
        fill="url(#line-1)"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

So now let’s also animate the y-axis values.
By adjusting y1 and y2 along with the x-axis, the gradient will follow the full direction of the line instead of cutting through the middle.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      {/* <path
        strokeWidth={2}
        stroke="url(#line-1)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      /> */}

      <rect
        width="169"
        height="167"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
        fill="url(#line-1)"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
            y1: "90%",
            y2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

Now just remove the and switch back to your , and you’ll have a clean, modern linear-gradient animation flowing perfectly across your SVG line.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      /> 
<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
            y1: "90%",
            y2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

End Result:

And that’s it — we’ve learned how to create an SVG in Figma, export it, and animate it using Motion.

If you found this helpful, follow me on Twitter for more tips, breakdowns, and behind-the-scenes builds.

I’m also launching my template soon, so stay tuned — you won’t want to miss it! 🚀

Building Krome — My Clean, Modern AI Agent Template for Next.js

Sushil — Wed, 26 Nov 2025 18:59:33 +0000

I’ve been spending the last few weeks heads-down on a new project, and I’m finally at a point where I can share what I’ve been building. I realized that while there are plenty of templates out there, it’s hard to find one that combines a clean, futuristic UI with solid, scalable code.

So I decided to make my own.

I’m calling it Krome (for now), and it’s a high-performance landing page + multipage template built for AI startups and modern SaaS platforms.

Link:

https://ai-agent-template-tan.vercel.app/

The Vision: Clean, Modern, and Premium

My goal with this template was simple: create a UI that immediately feels trustworthy and premium.

Think deep dark mode, soft glowing gradients, glassmorphism touches, and bento-style feature blocks.

I spent a lot of time refining the Pricing and Feature sections to make sure the visuals guide the user naturally through the product journey.

Under the Hood

This isn’t just a pretty UI—it's built to scale. Some of the core features include:

Multi-theme support: Easily switch accent colors or entire theme presets.
** Multi-page architecture:** Includes more than just a landing page—About, Contact, Sign Up, and more.
Fully working MDX blog: Write posts in Markdown and have them render beautifully.
Dynamic SEO: Every page and blog post automatically gets proper metadata.

Current Status: Refining the Details

The project is about 80% complete.

Most of the core pages, UI sections, and responsive layouts are done. The remaining work is mostly polish:

Making animations (especially scroll reveal) smoother.
Improving the mobile experience.
Cleaning up code comments and simplifying components so it’s easy for anyone to customize.

If you want to check it out or share feedback, the link is above. Still polishing things, but it's getting close!

Building a Features Bento Grid for My First UI Template

Sushil — Tue, 04 Nov 2025 15:32:39 +0000

I recently started working on my first UI template, and one of the core sections I wanted to get right early was the Features Bento Grid. The goal: create a layout that feels modern, expressive, and functional without looking cluttered.

Design Goals

Layered depth with soft shadows
Smooth micro-interactions
A structured but flowing grid
Clean contrast for both light & dark themes

The Bento layout style brings a sense of modular clarity — each feature stands out visually while still blending into a cohesive surface. I love how it keeps things playful yet professional.

This template isn’t just a UI kit — I'm aiming for something practical, elegant, and dev-friendly, especially for SaaS/AI dashboards.

🚧 Still in Progress

I'm also currently working on the hero section and refining the overall look. The goal is to keep it clean, modern, and calming — no clutter, no heavy visuals, just focus and breathing space.

If you're experimenting with UI templates, Bento layouts, or motion-enhanced design, I’d love to see what you're working on too 👇

Follow me on Twitter for more updates & progress 🚀

How Simple Animations Can Make a Big Impact on Your Website

Sushil — Mon, 30 Jun 2025 15:57:53 +0000

Animations aren’t just for fancy websites or landing pages. Even subtle, simple animations can make your site feel smoother, more polished, and more enjoyable to use.

In this post, I’ll show you how I used basic animations with Framer Motion and React to create a smooth experience on a component I call Smooth Reveal.

🎥 Live Demo

I made a small demo to show this in action.
👉 Check it out here

🔧 What’s Inside the Smooth Reveal Component?

Here’s what happens in the demo:

Navbar fades in from the top.
Main section smoothly reveals the text WI and LD, with a video expanding in the center.
Footer slides in with content and a CTA button.

🧩 Full Code Overview

Navbar.tsx A simple navbar with animated hover effect and theme switcher:

"use client";

import Link from "next/link";
import React, { useState } from "react";
import { motion } from "motion/react";
import MotionDiv from "@/components/animation/motion-div";
import { MoonIcon, SunIcon } from "lucide-react";
import { useTheme } from "next-themes";

const links = [
  { name: "Home", href: "/" },
  { name: "About", href: "/about" },
  { name: "Contact", href: "/contact" },
];

const Navbar = () => {
  const [isHovered, setIsHovered] = useState<number | null>(null);
  const { theme, setTheme } = useTheme();

  return (
    <MotionDiv
      initial={{ y: -10, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5, delay: 0.6 }}
      className="flex w-full justify-between sm:h-10"
    >
      <div className="flex flex-col items-start sm:flex-row sm:items-center">
        {links.map((link, idx) => (
          <Link
            key={idx}
            href={link.href}
            className="relative flex gap-1 px-2.5 py-1.5 text-[14px] sm:px-4.5"
            onMouseEnter={() => setIsHovered(idx)}
            onMouseLeave={() => setIsHovered(null)}
          >
            {isHovered === idx && (
              <motion.span
                layoutId="hovered-span"
                className="absolute inset-0 h-full w-full rounded-2xl bg-neutral-900 backdrop-blur-sm dark:bg-neutral-100"
                transition={{ duration: 0.3 }}
              />
            )}
            <span className={`relative z-10 font-medium transition-colors duration-300 ${
              isHovered === idx
                ? "text-white dark:text-black"
                : "text-black dark:text-white"
            }`}>
              {link.name}
            </span>
          </Link>
        ))}
      </div>

      <div className="flex items-start justify-start gap-3 sm:items-center sm:gap-4">
        <Link
          href="/login"
          className="hidden items-center justify-center rounded-xl bg-neutral-200 px-4 py-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 sm:flex sm:px-6"
        >
          Login
        </Link>
        <Link
          href="/signup"
          className="hidden items-center justify-center rounded-xl bg-neutral-800 px-4 py-1.5 text-sm font-medium text-neutral-100 hover:bg-neutral-700 sm:flex sm:px-6"
        >
          Sign Up
        </Link>
        <motion.button
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          className="ml-1 rounded-full border p-2 text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 hover:dark:bg-neutral-800"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <motion.span
            key={theme}
            initial={{ rotate: -180, opacity: 0 }}
            animate={{ rotate: 0, opacity: 1 }}
            transition={{ duration: 0.3 }}
            className="flex size-4 items-center justify-center"
          >
            {theme === "dark" ? <MoonIcon /> : <SunIcon />}
          </motion.span>
        </motion.button>
      </div>
    </MotionDiv>
  );
};

export default Navbar;

Main.tsx The central text and animated video reveal section:

"use client";

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

const Main = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsSmallScreen(window.innerWidth < 640);
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="flex h-full w-full items-center justify-center text-[24vw] font-semibold text-neutral-900 md:text-[18vw] xl:text-[14vw] dark:text-white">
      <div className="flex w-full flex-col items-center sm:flex-row sm:justify-center">
        <motion.span
          initial={{ opacity: 0, x: -50, scale: 0.9 }}
          animate={{ opacity: 1, x: 0, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.1 }}
        >
          WI
        </motion.span>

        <motion.div
          initial={{ width: "0px" }}
          animate={{ width: isSmallScreen ? "90%" : "35%" }}
          transition={{ duration: 0.7, delay: 0.3 }}
          className="mx-2 overflow-hidden rounded-full"
        >
          <motion.video
            initial={{ width: "0px" }}
            animate={{ width: "100%" }}
            transition={{ duration: 0.5, delay: 0.4 }}
            autoPlay
            muted
            loop
            playsInline
            className="h-full w-full object-cover"
          >
            <source src="/playground/car-shot.mp4" type="video/mp4" />
          </motion.video>
        </motion.div>

        <motion.span
          initial={{ opacity: 0, x: 50, scale: 0.9 }}
          animate={{ opacity: 1, x: 0, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.1 }}
        >
          LD
        </motion.span>
      </div>
    </div>
  );
};

export default Main;

Footer.tsx Simple fade-in footer with a message and CTA button:

import MotionDiv from "@/components/animation/motion-div";
import React from "react";

const Footer = () => {
  return (
    <MotionDiv
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.6 }}
      className="flex w-full flex-col items-start justify-between gap-4 px-4 sm:flex-row sm:items-center sm:gap-0"
    >
      <p className="text-xs leading-relaxed text-neutral-400 sm:max-w-md sm:text-sm lg:max-w-5xl">
        Discover extraordinary experiences that push the boundaries of innovation. Our platform connects visionaries with cutting-edge solutions, turning ideas into reality through seamless collaboration.
      </p>

      <button className="mb-4 rounded-xl bg-neutral-800 px-4 text-sm font-medium text-white hover:bg-neutral-700 sm:mb-0 sm:px-6 sm:py-2 dark:bg-neutral-100 dark:text-black">
        Explore More
      </button>
    </MotionDiv>
  );
};

export default Footer;

SmoothReveal.tsx Combining everything into one complete component:

import React from "react";
import Navbar from "./navbar";
import Main from "./main";
import Footer from "./footer";

const SmoothReveal = () => {
  return (
    <div className="hide-scrollbar relative flex h-[85vh] w-full flex-col items-center justify-between rounded-2xl bg-neutral-50 p-4 dark:bg-neutral-900">
      <div className="absolute inset-0 h-full w-full bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:72px_72px]" />
      <div className="z-10 flex h-full w-full flex-col items-center justify-between">
        <Navbar />
        <Main />
        <Footer />
      </div>
    </div>
  );
};

export default SmoothReveal;

🧠 Final Thoughts

You don’t need overly complex animation libraries to make your website feel smooth and modern. Just a few well-placed transitions can make a huge difference.

Start small, stay consistent, and build from there.

👉 Live Demo – Smooth Reveal
Check out my full Portfolio
🐦 Follow me on Twitter for more frontend experiments and project updates.

Let me know what you think or share how you’re using animation in your own projects!

Building a Custom Hook for Theme-Aware Logo Mapping in Next.js

Sushil — Thu, 19 Jun 2025 07:25:01 +0000

Building a Custom Hook for Theme-Aware Logo Management in React

Recently, I've been recreating the premium portfolio template from Aceternity UI's Minimal Portfolio Template.

The template is modern, simple, and professional. I've recreated the entire website with some additional features like syntax highlighting in blogs and dedicated single pages for projects. And yes, I haven't bought the original template - this is my own implementation inspired by the design.

The Challenge: Professional UI/UX with Theme Support

While building the website, I wanted to ensure a professional UI/UX experience that looks great in both light and dark modes, especially when displaying technology logos.

Initially, I hardcoded the tech stack like this:

export const skills: Skill[] = [
  { name: "JavaScript", logo: "/lang-icons/javascript.svg" },
  { name: "TypeScript", logo: "/lang-icons/typescript.svg" },
  { name: "Node", logo: "/lang-icons/node-logo.svg" },
  { name: "React", logo: "/lang-icons/react.svg" },
  { name: "Next.js", logo: "/lang-icons/nextjs-logo.svg" },
  // etc...
];

This approach works fine for a single theme, but problems arise when you need to support both light and dark modes. Some logos that look great on light backgrounds become invisible on dark ones, and vice versa.

The Solution: Logo Mapping Object

To solve this, I created an object that maps each technology name to both light and dark logo variants:

type LogoVariant = {
  light: string;
  dark: string;
};

export const logoMapper: Record<string, LogoVariant> = {
  "Next.js": {
    light: "/lang-icons/nextjs-black.svg",
    dark: "/lang-icons/next-js-logo-white.webp",
  },
  React: {
    light: "/lang-icons/react.svg",
    dark: "/lang-icons/react.svg",
  },
  MongoDB: {
    light: "/lang-icons/mongodb.svg",
    dark: "/lang-icons/mongodb.svg",
  },
  Node: {
    light: "/lang-icons/node-logo.svg",
    dark: "/lang-icons/node-logo.svg",
  },
  "Tailwind CSS": {
    light: "/lang-icons/tailwind.svg",
    dark: "/lang-icons/tailwind.svg",
  },
  // More technologies...
};

Now I have both variants of each logo, but I still need to handle the theme switching logic.

The Problem: Repetitive Theme Logic

With this setup, I had to use the useTheme hook and write conditional logic everywhere I needed to display a logo:

"use client";

import React from "react";
import { useTheme } from "next-themes";
import { logoMapper } from "@/lib/logoMapper";
import Image from "next/image";

const SingleProjectPage = ({ params }: { params: Promise<{ slug: string }> }) => {
  const { theme } = useTheme();
  const resolvedParams = React.use(params);
  const project = singleProjects.find((p) => p.slug === resolvedParams.slug);

  if (!project) return <div>Project not found</div>;

  return (
    <div className="px-4 md:px-8">
      {/* Project header */}
      <div className="flex flex-col items-start gap-3 px-6">
        <h1>{project.title}</h1>
        <p>{project.shortDescription}</p>
      </div>

      {/* Technologies section */}
      <div className="shadow-section-inset p-4 md:p-6 md:pb-8">
        <h2>Technologies Used</h2>
        <div className="grid w-full grid-cols-2 gap-6 pt-0 md:grid-cols-4">
          {project.technologies.map((tech, idx) => (
            <div key={idx} className="group cursor-default">
              <div className="h-full p-2 transition-all duration-300">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-x-4">
                    {logoMapper[tech.name] && (
                      <div className="relative size-5 md:size-7">
                        <Image
                          src={
                            theme === "dark"
                              ? logoMapper[tech.name].dark
                              : logoMapper[tech.name].light
                          }
                          alt={`${tech.name} logo`}
                          fill
                          className="object-contain"
                        />
                      </div>
                    )}
                    <h3>{tech.name}</h3>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default SingleProjectPage;

The repetitive part was this conditional logic:

<Image
  src={
    theme === "dark"
      ? logoMapper[tech.name].dark
      : logoMapper[tech.name].light
  }
  alt={`${tech.name} logo`}
  fill
  className="object-contain"
/>

This became tedious and error-prone when used across multiple components.

The Solution: Custom useLogo Hook

To eliminate this repetition, I created a custom hook called useLogo that handles all the theme logic:

"use client";

import { useTheme } from "next-themes";

type LogoVariant = {
  light: string;
  dark: string;
};

export const logoMapper: Record<string, LogoVariant> = {
  "Next.js": {
    light: "/lang-icons/nextjs-black.svg",
    dark: "/lang-icons/next-js-logo-white.webp",
  },
  React: {
    light: "/lang-icons/react.svg",
    dark: "/lang-icons/react.svg",
  },
  MongoDB: {
    light: "/lang-icons/mongodb.svg",
    dark: "/lang-icons/mongodb.svg",
  },
  Node: {
    light: "/lang-icons/node-logo.svg",
    dark: "/lang-icons/node-logo.svg",
  },
  "Tailwind CSS": {
    light: "/lang-icons/tailwind.svg",
    dark: "/lang-icons/tailwind.svg",
  },
  Neon: {
    light: "/lang-icons/neon-dark.svg",
    dark: "/lang-icons/neon-light.svg",
  },
  Cloudinary: {
    light: "/lang-icons/cloudinary.png",
    dark: "/lang-icons/cloudinary.png",
  },
  // Add more technologies as needed
};

export const useLogo = () => {
  const { theme } = useTheme();

  const getLogo = (techName: string): string => {
    const logoVariant = logoMapper[techName];

    if (!logoVariant) {
      console.warn(`Logo not found for technology: ${techName}`);
      return "";
    }

    return theme === "dark" ? logoVariant.dark : logoVariant.light;
  };

  return { getLogo };
};

Using the Custom Hook

Now, using the hook is much cleaner and more maintainable:

"use client";

import { useLogo } from "@/lib/logoMapper";
import Image from "next/image";

const SingleProjectPage = ({ params }: { params: Promise<{ slug: string }> }) => {
  const { getLogo } = useLogo();

  return (
    <div>
      {/* Your component JSX */}
      <Image
        src={getLogo(tech.name)}
        alt={`${tech.name} logo`}
        fill
        className="object-contain"
      />
    </div>
  );
};

Benefits of This Approach

1. Clean Code: No more repetitive conditional logic scattered throughout components.

2. Centralized Management: All logo mapping logic lives in one place, making it easy to maintain and update.

3. Error Handling: The hook includes built-in warning messages for missing logos, helping with debugging.

4. Type Safety: Full TypeScript support ensures you catch errors at compile time.

5. Reusability: Use the hook in any component that needs theme-aware logos.

6. Easy Extension: Adding new technologies is as simple as updating the logoMapper object.

Key Features

Automatic Theme Detection: The hook automatically detects the current theme and returns the appropriate logo
Fallback Handling: Returns an empty string and logs a warning for missing logos
Performance: Minimal overhead with efficient theme detection
Developer Experience: Simple API with just one function to remember

Conclusion

This custom hook solution transformed my codebase from repetitive, hard-to-maintain conditional logic to a clean, reusable system. It's a perfect example of how custom hooks can solve common React patterns and improve code quality.

The useLogo hook not only makes the code more readable but also ensures consistency across the entire application. When I need to add a new technology or update logo paths, I only need to modify the logoMapper object in one place.

Animate Like a Pro: Creating a Reusable MotionDiv Using Motion

Sushil — Mon, 16 Jun 2025 16:08:09 +0000

If you're working with animations in Next.js, you've probably found yourself writing the same Motion code over and over again. Let's solve that by creating a simple, reusable MotionDiv component that will save you time and keep your animations consistent.

What We're Building

We're going to create a wrapper component around Motion's motion.div that provides better TypeScript support and integrates seamlessly with our existing utilities. Here's the complete component:

'use client';

import { motion, HTMLMotionProps } from 'framer-motion';
import { cn } from '@/lib/utils';

interface MotionDivProps extends HTMLMotionProps<'div'> {
    className?: string;
}

const MotionDiv = ({ children, className, ...motionProps }: MotionDivProps) => {
    return (
        <motion.div className={cn(className)} {...motionProps}>
            {children}
        </motion.div>
    );
};

export default MotionDiv;

Step-by-Step Setup

1. Install Dependencies

First, make sure you have Motion installed in your Next.js project:

npm install motion

2. Create the Component

Create a new file components/ui/MotionDiv.tsx (or wherever you keep your components) and add the code above.

3. The 'use client' Directive

Since we're using Next.js with the App Router, we need the' use client' directive. This tells Next.js that this component should run on the client side.

4. TypeScript Interface

The MotionDivProps interface extends HTMLMotionProps<'div'>, which means our component gets all the props that motion.div accepts — including standard div props like className, animation props, and event handlers.

How to Use It

Once you've created the component, using it is straightforward:

Basic Fade-in Animation

<MotionDiv
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.5 }}
    className="p-4 bg-white rounded-lg shadow-lg"
>
    <h2>This content fades in</h2>
    <p>Much cleaner than writing motion.div everywhere!</p>
</MotionDiv>

Slide Animation

<MotionDiv
    initial={{ x: -50, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    className="notification-banner"
>
    New notification!
</MotionDiv>

Hover Effects

<MotionDiv
    whileHover={{ scale: 1.02 }}
    whileTap={{ scale: 0.98 }}
    className="card cursor-pointer"
>
    Interactive card content
</MotionDiv>

Why Make It Reusable?

1. Less Repetitive Code

Instead of importing motion and writing motion.div throughout your app, you just import and use MotionDiv. It might seem small, but it adds up across a large project.

2. Consistent Animations

When your team uses the same component, you naturally end up with more consistent animation patterns. No more wondering why some elements animate differently than others.

3. Better TypeScript Experience

You get full TypeScript support with autocompletion for all Framer Motion props. If you make a typo in an animation property, TypeScript will catch it.

4. Easy to Extend

Need to add default animations or custom presets later? You can modify this one component instead of hunting down every motion.div in your codebase.

5. Utility Integration

The cn function (usually from libraries like clsx or custom utility functions) handles className merging and conditional classes. This works great with Tailwind CSS or any CSS framework.

Real-World Example

Here's how you might use it in a typical Next.js 15 page:

// app/page.tsx
import MotionDiv from '@/components/ui/MotionDiv';

export default function HomePage() {
    return (
        <main className="container mx-auto px-4">
            <MotionDiv
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.6 }}
                className="text-center py-16"
            >
                <h1 className="text-4xl font-bold mb-4">Welcome to Our Site</h1>
                <p className="text-lg text-gray-600">
                    This hero section animates in smoothly
                </p>
            </MotionDiv>

            <MotionDiv
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.3, duration: 0.6 }}
                className="grid grid-cols-1 md:grid-cols-3 gap-6 py-12"
            >
                {/* Your content here */}
            </MotionDiv>
        </main>
    );
}

Taking It Further

Once you're comfortable with the basic MotionDiv, you can extend it with features like:

Animation presets: Add common animation patterns as props
Default values: Set up sensible defaults for common use cases
Conditional animations: Toggle animations based on user preferences
Stagger support: Built-in support for staggered animations

Wrapping Up

Creating a reusable MotionDiv component is a simple way to make your Next.js animations more maintainable and consistent. It takes just a few minutes to set up, but you'll appreciate the cleaner code and better developer experience every time you add animations to your app.

How to Receive Emails Using EmailJS: A Simple Alternative to Resend for Contact Forms.

Sushil — Fri, 13 Jun 2025 14:39:13 +0000

When building contact forms for websites, developers often reach for comprehensive email services like Resend, SendGrid, or Mailgun. While these platforms offer robust features, they can be overkill if you need to receive messages from your contact form. Here comes EmailJS – a lightweight, client-side solution that lets you receive emails directly without server-side complexity.

Why Choose EmailJS Over Resend?

The Problem with Over-Engineering

Resend is an excellent service for transactional emails, newsletters, and complex email workflows. However, for a simple contact form that only needs to forward messages to your inbox, it introduces unnecessary complexity:

Server-side requirements: Resend needs backend API integration
Cost considerations: Paid tiers for higher volumes
Setup overhead: Authentication, error handling, and server configuration
Overkill features: Advanced analytics and delivery tracking, you might not need

One of EmailJS's most attractive features is its generous free tier, offering 200 emails per month.

EmailJS: The Lightweight Champion

EmailJS shines in scenarios where simplicity is key:

Client-side only: No backend required
Quick setup: Get running in minutes, not hours
Generous free tier: 200 emails per month at no cost
Multiple providers: Works with Gmail, Outlook, Yahoo, and more
Direct delivery: Messages land straight in your inbox

Setting Up EmailJS: Step-by-Step Guide

Step 1: Create Your EmailJS Account

Visit emailjs.com and sign up for a free account
Verify your email address
Access your EmailJS dashboard

Step 2: Configure Your Email Service
EmailJS needs to connect to your email provider to send messages:

Click "Email Services" in your dashboard
Choose your email provider (Gmail, Outlook, etc.)
For Gmail users:
- Click "Connect Account"
- Authorize EmailJS to access your Gmail
- Your service will be automatically configured
For other providers, you'll need SMTP settings:
- Server address and port
- Username and password (use app passwords for security)

Step 3: Create an Email Template
Templates define how your received emails will look:

Navigate to "Email Templates"
Click "Create New Template"
Design your template using variables:

Key template variables to include:

{{user_name}} - Sender's name
{{user_email}} - Sender's email
{{user_message}} - The actual message
{{to_email}} - Your email address (recipient)

Step 4: Get Your Integration Keys
EmailJS provides three essential keys:

Public Key: Found in "Account" → "General"
Service ID: From your configured email service
Template ID: From your created template

Store these securely in your environment variables.

Implementation: React Contact Form with EmailJS

Here's how to implement EmailJS in a React contact form:

Install EmailJS
Create a .env.local file:

//env

NEXT_PUBLIC_SERVICE_ID=your_service_id
NEXT_PUBLIC_TEMPLATE_ID=your_template_id  
NEXT_PUBLIC_PUBLIC_ID=your_public_key

The Contact Form Component

//jsx

"use client";

import React, { FormEvent, useRef, useState } from "react";
import emailjs from "@emailjs/browser";

const ContactForm = () => {
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const form = useRef<HTMLFormElement>(null);

  const sendEmail = async (e: FormEvent) => {
    e.preventDefault();
    setError(false);
    setSuccess(false);
    setLoading(true);

    if (!form.current) {
      setError(true);
      setLoading(false);
      return;
    }

    try {
      await emailjs.sendForm(
        process.env.NEXT_PUBLIC_SERVICE_ID as string,
        process.env.NEXT_PUBLIC_TEMPLATE_ID as string,
        form.current,
        {
          publicKey: process.env.NEXT_PUBLIC_PUBLIC_ID as string,
        }
      );

      setSuccess(true);
      form.current.reset();
    } catch (err) {
      setError(true);
      console.error('EmailJS error:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto p-6">
      <h2 className="text-2xl font-bold mb-6">Contact Us</h2>

      <form ref={form} onSubmit={sendEmail} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1">
            Full Name *
          </label>
          <input
            name="user_name"
            type="text"
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="John Doe"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">
            Email Address *
          </label>
          <input
            name="user_email"
            type="email"
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="john@example.com"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">
            Message *
          </label>
          <textarea
            name="user_message"
            rows={4}
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Your message here..."
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition duration-200"
        >
          {loading ? 'Sending...' : 'Send Message'}
        </button>

        {success && (
          <div className="text-green-600 font-semibold">
            Message sent successfully! We'll get back to you soon.
          </div>
        )}

        {error && (
          <div className="text-red-600 font-semibold">
            Failed to send message. Please try again.
          </div>
        )}
      </form>
    </div>
  );
};

export default ContactForm;

Just like that, we now have a fully working mail receiver set up in minutes using EmailJS. You can also easily create a new template to auto-reply to incoming messages—add it to the auto-reply section, and you're good to go.

When to Choose EmailJS vs. Resend

Choose EmailJS When:

Building simple contact forms
Need quick setup without backend
Have low to moderate email volume
Want direct inbox delivery
Working with static sites or JAMstack

Choose Resend When:

Need transactional email workflows
Require advanced analytics and tracking
Building email marketing features
Need guaranteed delivery rates
Have high volume requirements (1000+ emails/month)

Conclusion

EmailJS provides an excellent middle ground for developers who need reliable email functionality without the complexity of full-featured email services. Its client-side approach makes it perfect for contact forms, feedback systems, and simple notifications.

The generous 200 emails per month free tier covers most small to medium websites, and the straightforward setup means you can have a working contact form in under 30 minutes. For many use cases, EmailJS delivers exactly what you need – nothing more, nothing less.

Whether you're building a portfolio site, small business website, or prototype application, EmailJS offers a pragmatic solution that balances simplicity with reliability. Give it a try for your next project, and you might find it's the perfect fit for your email needs.

I Redesigned My GitHub Profile Generator After Getting Top 5 on Product Hunt

Sushil — Fri, 30 May 2025 15:51:01 +0000

A while back, I launched my GitHub Profile Generator on Product Hunt, a niche tool that helps developers build beautiful GitHub profiles effortlessly. To my surprise and gratitude, it got selected as one of the Top 5 Products of the Day! 🙌

That recognition made me realize it was time to give the project the polish it deserved.

So, I went back to the drawing board to redesign the entire website, making it look more modern, professional, and user-friendly.

The response from the developer community was also overwhelming! The project has received:

⭐ 201 GitHub stars and counting!

It’s amazing to see how many devs found it useful, fun, and easy to use. This kind of support motivates me to keep improving and building.

The Old Design (basic design with only light mode)

This was the original version. Clean and minimal, but with a lot of room for improvement:

No dark mode support
Flat UI with limited visual hierarchy
No animations or transitions
Limited customization flow
Basic component layout that didn’t feel premium

While it worked fine, it didn’t reflect the quality or care I wanted to show, especially after launching it to a wider audience.

The New Design – Clean, Modern & Themed

To elevate the tool's overall feel, I redesigned the entire UI and added support for both Dark and Light Modes.

Dark Mode + Light Mode Toggle – Choose your vibe!
Card-based layout for better organization and readability
Powered by Zustand for smooth and minimal state handling
Framer Motion for subtle, polished animations
UI rebuilt using Shadcn UI and Tailwind CSS
Optimized UX with clearer flow and quick interactions
Inspired by amazing open-source work from @anuraghazra and @DenverCoder1

This new design brings a much more professional, clean, and developer-centric experience, exactly what this tool needed after reaching a wider audience.

After hitting Top 5 on Product Hunt, I realized more developers were discovering and using this project. I didn’t want them to feel like they were using just another side project—I wanted it to feel like a tool built with care, purpose, and attention to detail.

That meant better design, better UX, and a more polished presentation.

Shipping this redesign felt just as exciting as launching the tool itself. Seeing the community’s love on Product Hunt was motivating, and I hope this fresh version makes the GitHub Profile Generator even more enjoyable to use.

👉 Check it out here and let me know what you think!

Thanks for all the support 💜

🌟 Transform Your GitHub Profile with Our Cutting-Edge Profile Generator

Sushil — Sat, 14 Sep 2024 16:38:50 +0000

In today’s competitive tech landscape, having a standout GitHub profile can make a significant difference. It’s not just a platform to showcase your code; it’s an opportunity to reflect your personal brand, skills, and dedication. So, how do you make your profile both functional and visually appealing? That’s where my personal GitHub Profile Generator comes into play! 🚀

As a developer who’s passionate about creating impactful tools, I designed this generator to offer innovative features that help you present your work and achievements in the best light. Whether you’re a seasoned pro looking to impress potential employers or an enthusiastic contributor wanting to showcase your open-source projects, this tool provides the customization options you need to make your profile truly shine. 🎨

Here’s a closer look at what my GitHub Profile Generator offers:

If you like the project, don’t forget to give it a star and vote for it on Product Hunt! 🚀 We were in the top 5 on launch day and are currently at #56 for the week—your support would mean a lot!

🖼️ Multiple Icons
Personalize your profile by adding multiple icons to highlight your favorite tech stack or tools. You have full control over the height, gaps, and alignment of each icon, allowing you to create a visually appealing and informative profile that stands out from the crowd.

👁️‍🗨️ Visitor Counter Badge
Ever wondered how many people are checking out your profile? The visitor counter badge makes it easy to display the number of profile visits, adding an extra layer of engagement and insight into your profile’s reach.

📊 GitHub Profile Stats Card
Showcase your GitHub achievements with detailed stats. The GitHub Profile Stats Card gives you a comprehensive overview of your contributions, helping you highlight your coding journey and accomplishments in a professional and clean format.

🛠️ GitHub Top Skills
Let the world know what you excel at! The GitHub Top Skills feature allows you to display your top programming languages and technologies. This card is perfect for potential collaborators and employers to quickly see where your strengths lie.

🔥 GitHub Streak Stats
Proud of your dedication to contributing? Display your longest GitHub contribution streak with the GitHub Streak Stats card. It’s a great way to showcase your commitment and consistency in the open-source community.

📦 GitHub Repo Card
Highlight your key repositories with the GitHub Repo Card. Fully customizable, this card lets you feature important projects and showcase your work in a way that aligns with your style and needs.

🎨 Full Card Customization
Customization is at the heart of my generator. Change colors, themes, layouts, and more for all your stat cards to match your personal brand or aesthetic preferences. With full card customization, your profile will be as unique as your coding journey.

🌟 Creating Reusable Components with TypeScript in Next.js: A Sidebar Example 📚

Sushil — Sun, 07 Jul 2024 07:53:35 +0000

Reusable components are crucial for efficiency and maintainability when developing large web applications using Next.js. We'll show you how to use TypeScript to develop a reusable sidebar component in this article. Depending on whether the page is a profile page or the home page, this component will display different content.

Step 1: Setting Up Your Next.js Project 🚀

Set up a new Next.js project:

npx create-next-app@latest my-nextjs-app --ts
cd my-nextjs-app
npm install

Step 2: Creating the Sidebar Component 🧩

We'll create a Sidebar component that takes a type prop to conditionally render different components for the home page and the profile page.

First, create a new directory components/Sidebar and add the following files:

Sidebar.tsx
LeftSidebar.tsx
RightSidebar.tsx

Sidebar.tsx
This will be our main reusable component.

import React from 'react';
import LeftSidebar from './LeftSidebar';
import RightSidebar from './RightSidebar';

type SidebarProps = {
  type: 'home' | 'profile';
};

const Sidebar: React.FC<SidebarProps> = ({ type }) => {
  return (
    <div className="flex">
      <LeftSidebar type={type} />
      <RightSidebar type={type} />
    </div>
  );
};

export default Sidebar;

LeftSidebar.tsx
This component will render different content based on the type prop.

import React from 'react';
import ProfileCard from '../ProfileCard';
import LeftSidebarNav from '../LeftSidebarNav';
import Ad from '../Ad';

type LeftSidebarProps = {
  type: 'home' | 'profile';
};

const LeftSidebar: React.FC<LeftSidebarProps> = ({ type }) => {
  return (
    <div className="flex flex-col gap-6">
      {type === 'home' && <ProfileCard />}
      <LeftSidebarNav />
      <Ad size="sm" />
    </div>
  );
};

export default LeftSidebar;

RightSidebar.tsx
Similarly, this component will render different content based on the type prop.

import React from 'react';
import FriendRequest from '../FriendRequest';
import SuggestedFriends from '../SuggestedFriends';

type RightSidebarProps = {
  type: 'home' | 'profile';
};

const RightSidebar: React.FC<RightSidebarProps> = ({ type }) => {
  return (
    <div className="flex flex-col gap-6">
      {type === 'home' ? <FriendRequest /> : <SuggestedFriends />}
    </div>
  );
};

export default RightSidebar;

Step 3: Using the Sidebar Component 📄

Now, we can use the Sidebar component in our pages and pass the appropriate type prop.

app/page.tsx (Home Page) 🏠

import React from 'react';
import Sidebar from '../components/Sidebar/Sidebar';

const HomePage = () => {
  return (
    <div className="flex">
      <Sidebar type="home" />
      {/* Other content for the home page */}
    </div>
  );
};

export default HomePage;

profile/page.tsx (Profile Page) 👤

import React from 'react';
import Sidebar from '../components/Sidebar/Sidebar';

const ProfilePage = () => {
  return (
    <div className="flex">
      <Sidebar type="profile" />
      {/* Other content for the profile page */}
    </div>
  );
};

export default ProfilePage;

Step 4: Additional Components 🔧

Make sure to create the additional components used in the LeftSidebar and RightSidebar, such as ProfileCard, LeftSidebarNav, Ad, FriendRequest, and SuggestedFriends.

For example, ProfileCard.tsx could look like this:

import React from 'react';

const ProfileCard: React.FC = () => {
  return (
    <div className="p-4 bg-white shadow rounded-lg">
      <div className="text-lg font-semibold">Sushil Magare</div>
      <button className="w-full mt-4 bg-primary text-white font-semibold tracking-wide">
        Profile
      </button>
    </div>
  );
};

export default ProfileCard;

Conclusion 🎉.

By following these steps, we've constructed a reusable Sidebar component in Next.js that changes its content depending on the page type. This strategy promotes a clean and structured codebase, making it easier to manage and scale your application. Feel free to expand on this example by including more features and components as needed for your application. Happy coding!

Day 5: Adding Dark Mode to My Social Media App 🚀

Sushil — Sat, 06 Jul 2024 15:51:26 +0000

Dark mode has been a highly requested feature, and implementing it has been a rewarding experience. Using Next.js and Tailwind CSS, I seamlessly integrated dark mode into the app, enhancing the user experience and making it easier on the eyes for late-night browsing.

Here's a quick overview of what I did:

Utilized Tailwind CSS's dark mode feature for easy theming.
Ensured that all components adapt smoothly between light and dark themes.
Tested the app across different devices to ensure consistency.
I love how it looks and can't wait to share more updates!

Feel free to connect with me and share your thoughts! Let's chat and collaborate! 🌐💻