📱 Overview

SkillMap is an AI-powered Skill Constellation app that helps users visualize their current skills, discover new ones, and create a personalized career roadmap. The app combines an interactive constellation UI with AI-driven skill suggestions to guide career growth in a visually engaging way.

🧠 Problem Statement

Many learners struggle to understand how their existing skills connect to potential career paths and what skills they should learn next. Traditional learning platforms often present skills as static lists, making it difficult for users to visualize progress, discover dependencies, and stay motivated throughout their learning journey.

🎯 Design Objective

To design an interactive and intuitive skill-mapping experience that helps users visualize their current skill set, explore related and future skills, and build a clear, personalized learning roadmap through visual storytelling and AI-driven guidance.

🧩 Design Approach

• Visualize skills as interconnected nodes to make learning paths easier to understand
• Use interaction (drag, zoom, explore) to encourage discovery and engagement
• Leverage AI to suggest relevant skills while keeping the experience user-led and transparent

🎨 Key Features

• Onboarding Form

  Users can input their known skills and select a target career role to begin mapping their growth path.

• AI Skill Suggestions

  Personalized recommendations with difficulty levels and related skills to guide users toward their career goals.

• Interactive Skill Constellation

  Skills are visualized as nodes:

  • 🟢 Mastered skills

  • 🟡 Suggested skills

  • 🔵 Related skills

    Users can drag, zoom, and explore skill dependencies interactively.

• Career-Focused Growth

  Understand skill dependencies and build a structured roadmap for future learning.

  🧩 Tech Stack

  Area	Tools Used
  Frontend	React, D3.js, Tailwind CSS
  Backend/API	Node.js, Express
  AI/ML Integration	Ollama (local LLM), Mistral model, Custom skill graph logic
  Dev Tools	ES Modules, node-fetch, Local Storage
  Browser APIs	Canvas API, CSS Grid & Flexbox, Animations & Transitions

👩🏻‍💻 My Role

I conceptualized, designed, and developed SkillMap end-to-end, handling everything from the UI/UX design and interactive skill visualization to AI-powered skill recommendations and frontend-backend integration. I implemented the constellation interaction logic (drag, zoom, explore nodes) and created a responsive, polished user experience that guides users through personalized skill discovery and career growth.

📸 Screenshots / Demo

1. SkillMap Landing Page Design