Conclude First Project : Bringing My Interactive Resume to Life with GSAP

Intro:

Today has been all about making my Interactive Resume not just functional, but delightful to use. Here’s the breakdown of what I worked on, the challenges I faced, and the lessons learned.

🚀 What I Built:

• Added GSAP animations for tab transitions — smooth fade-ins and slide-ups.

• Introduced bounce effects for Skills and Projects lists, using ease: "bounce.out".

• UI upgrades — modern gradient background, better spacing, and full responsiveness.

• Fixed a major roadblock where the script.js wouldn’t load due to CORS policy when opening from file://.

🛠 Challenges & How I Solved Them:

1. Animations not triggering on section switch

   • Fix: Made sure new sections were visible (display: block) before animating and reset styles with gsap.set().

2. CORS error for local scripts

   • Fix: Used a simple local dev server (npx live-server) instead of opening the file directly in Chrome.

3. Overlapping animations on repeated clicks

   • Fix: Cleared styles for all list items and text before running animations again.

📚 Key Takeaways:

• GSAP is incredibly powerful for creating smooth, performant animations.

• A polished UI is just as important as the functionality in portfolio projects.

• Debugging environment-specific issues (like CORS) is part of the daily life of a developer.

Tech Stack: HTML, CSS, JavaScript, GSAP

Live Demo: [Link Here]