Animated Resume Card: JavaScript Deep Dive Day 2

Today I turned my resume card into a multi-section, animated app.

Upgrades:

Added Skills, Experience, Content, About and Projects tabs.
Background: gradient to make content pop.
GSAP animations:
- Page load: fade + scale in.
- Skills/Projects: staggered list animations.
- Other tabs: smooth fade-up transitions.

Problems

1) Tabs weren’t showing content when clicked.

Cause: The script tag below was improperly placed above the <body> tag.

<script src="script.js"></script>

2) Skills and projects tabs were not displaying anything.

Cause: The active class logic + GSAP timing I implemented is leaving the next section invisible because it starts with display: none and GSAP is animating it before the browser actually paints it.

Solutions

Problem 1: Place the script tag below was properly placed below the </body> tag.
Problem 2: This one did confuse me at first.

i) gsap.set(targetSection, { display: "block", opacity: 1 })
Forces the next section to be visible before the animation starts — fixes the white space issue.

ii) Only animate .from() after the section is active and visible.

iii) Clears inline GSAP props on every switch so animations restart fresh.

Before vs After:

BEFORE (DAY 1)

AFTER (DAY 2)

Click here to see a video of the animations added all working seamlessly.

Lesson of the Day:

Good animation is subtle — it draws attention without distracting.

Live Preview: [Preview Link]
Repo: [GitHub Link]

Modern JavaScript Deep Dive — Day 2: Multi-Section, Animated Resume Card