feat: Add Animated Visual Roadmap to the Learning Path Section

[bhavyasanthoshi02]

What's the idea?

Add an animated visual roadmap to the Learning Path section that displays the 4 learning stages (Beginner → Explorer → Builder → Summer of AI) as connected milestone nodes with smooth animations, replacing the current plain text list layout.

Why does this matter?

Currently, the learning path feels like a static list with no sense of progression or journey. For girls just starting out in AI, a visual roadmap creates motivation and makes the learning journey feel achievable and exciting. It helps users instantly understand where they are and where they're headed.

Proposed solution

• Enhance LearningPath.jsx with a roadmap-style layout with connected stage nodes
• Add animated connecting lines between Stage 1 → 2 → 3 → 4
• Highlight the active/selected stage with a glowing pulse animation
• Keep full mobile responsiveness (vertical on mobile, horizontal on desktop)
• Use existing data from src/data/resources.js — no new dependencies needed
• Pure CSS animations + React state only (no external libraries)

Alternatives considered

Using a third-party timeline library — rejected to keep the bundle light and maintain design consistency with the existing codebase.

Additional context

The existing learningStages data in src/data/resources.js already has all 4 stages defined. This enhancement only modifies LearningPath.jsx — no backend or data changes needed.

I'd love to work on this! Please assign me this issue

[bhavyasanthoshi02]

Hi @escher-m! I just opened this issue and would love to work on it.

I've already explored the LearningPath.jsx component and resources.js data file,
so I have a clear plan for implementation. My previous contribution (#39 - Interactive
Glossary Tooltips) was successfully merged, so I'm familiar with the codebase.

Could you please assign this issue to me? I'll have a PR ready soon!

[escher-m]

Hi @bhavyasanthoshi02 good idea, assigned!

[bhavyasanthoshi02]

Thank you for assigning this issue to me! I’ll start working on it and submit the PR soon.

[bhavyasanthoshi02]

Hi @escher-m!
I'm actively working on this issue and making good progress — I'll be sending the PR as soon as possible!
I also wanted to bring to your attention that I'm participating in GSSoC 2026, and I noticed that the required labels are missing on both my issues:
This issue #58 – feat: Add Animated Visual Roadmap to the Learning Path Section (currently assigned to me)
Issue #39 – feat: Implement interactive glossary tooltips for AI concepts (already merged)
Could you please add the gssoc 2026 and approved labels to both issues so that my contributions get counted toward my GSSoC score?
Really appreciate your support and time! Thank you!

[bhavyasanthoshi02]

Hello!
Just a quick follow-up to ask if you could review my PR and apply the appropriate GSSoC 2026 and approval labels. Let me know if any updates are needed. Thanks!

[bhavyasanthoshi02]

Hi @escher-m , just a gentle reminder regarding my PR for issue #67 . Whenever you have some time, could you please take a look and review it? Thanks for your time!

[bhavyasanthoshi02]

Hi @escher-m Just following up on my PR for issue #67. When you get a chance, I'd really appreciate it if you could review it. Thank you for your time and effort!

[bhavyasanthoshi02]

Hi @escher-m Just following up on my PR for #67. When you get a chance, I'd really appreciate it if you could review it. Thank you for your time and effort!