I Built an Animated Portfolio to Stand Out — Here's What I Learned (and You Can Too)"

Ashmita Sen Roy — Sun, 27 Jul 2025 08:03:08 +0000

If your portfolio doesn’t feel like you, does it really represent you?

I wanted mine to reflect not just my projects — but also my personality.
So I built an animated, interactive portfolio that’s clean, fun, and makes people say,

Whoa, this actually feels alive.

Here’s everything I learned from building it: the good, the bugs, and what made it stand out.

Why I Chose to Animate My Portfolio

Let’s be real: most dev portfolios follow the same vibe — static sections, neat project cards, links, and a contact form. Which is fine.

But I wanted mine to be more expressive.
More Me

So I added:

Smooth scroll-based animations
Floating elements & UI transitions
Background video layers
Easter eggs & interactive touches
Micro-interactions on hover/click

🛠** Tech Stack**

Framework: React.js
Styling: Tailwind CSS
Animation: Framer Motion + Lottie
Deployment: Vercel
Design assets: Canva + Figma + Heroicons

🧩 Key Features & Components

1. Framer Motion Magic:
Each section animates into view as you scroll, thanks to Framer Motion:

jsx
Copy
Edit
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  <h2>Projects</h2>
</motion.div>

I used this pattern everywhere — for headings, cards, even the footer.

2. Floating Stars, & More:

I added a floating star on the “About Me” page — when clicked, it twinkles and plays a soft “ding!” 🟊
Just for fun. Little details matter.

Also, custom cursor on hover for special sections using cursor-none + useEffect to track pointer.

3. Modular Project Cards with Hover Effects:
Each project card animates in with a bounce, and expands on hover to reveal more info. Clean and satisfying.

4. Finally:
Added a contact section by which recruiters can easily contact me via email.

🔗 Live Demo + GitHub
🌐 Live Site

Your portfolio is your dev handshake. So make it yours.
Whether that’s slick animations, quirky touches, or a unique layout — let your creativity shine through your code.

This was a fun experiment that helped me learn a lot about performance, animation, and frontend UX.
Let me know if you want a template — or just drop your portfolio link, I’d love to see it!

🧵 Let’s Connect!

GitHub
LinkedIn

DEV Community: Ashmita Sen Roy

I Built an Animated Portfolio to Stand Out — Here's What I Learned (and You Can Too)"