SkillPath AI

An AI-powered platform that guides early students across all fields toward hackathons, skills, and real projects.

Comment

Inspiration

The inspiration for Skill Path AI came from observing how students and professionals often struggle to choose a career path that aligns with their skills and interests. With the rapid evolution of technology and the increasing diversity of professional fields, it becomes challenging to navigate opportunities effectively. We wanted to create a platform that guides users through career options, skills, and project ideas based on their interests, using a simple, interactive web interface

What it does

Skill Path AI is an interactive career guidance and project recommendation platform. Users can:

  • Explore different fields such as Technology, Medical, Engineering, Business, Arts, and Science.
  • See recommended careers, essential skills, and related hackathon/project types.
  • Track their roadmap progress and skill levels in an intuitive dashboard.
  • Generate project ideas tailored to their selected field.
  • Interact with a built-in AI chat panel to ask career-related questions.
  • View progress through dynamic visualizations such as floating cards and progress bars.

The platform essentially acts as a personalized career assistant, helping users understand the paths they can take, the skills they need, and the projects that can showcase their abilities.

How we built it

Frontend: HTML, CSS (custom + responsive design), JavaScript (ES6 classes for modular code), Font Awesome for icons. Prototyping: Before building the full platform, we created a "trial version on CodePen" to test layout ideas, field cards, and basic interactivity. This helped us quickly identify design issues, experiment with animations, and validate the user experience before implementing the full version in StackBlitz. The CodePen prototype served as a "proof-of-concept", allowing us to iterate faster and ensure a polished final product.

  • Framework/Environment: Deployed and tested using Stack Blitz for live previews.
  • Features implemented with JS:
    • Page navigation using hashes (#home, #technology, etc.).
    • Dynamic rendering of fields, skills, and roadmap progress.
    • Interactive dashboard with skill rating and progress visualization.
    • Chat panel interface for AI-style responses (mocked for demo purposes).
    • Project generator with category filtering and dynamic card display.
  • Animations: Floating cards, smooth page transitions, progress bars, and hover effects.

Challenges we ran into

  • Dynamic UI Management: Ensuring pages show/hide correctly while maintaining state and hash-based navigation.
  • CSS & JS Synchronization: Making sure CSS variables and JS-generated content work seamlessly across themes and responsive layouts.
  • Project Idea Generation: Structuring dynamic content to allow filtering and display without breaking the grid layout.
  • Mobile Responsiveness: Making complex dashboard elements and floating cards adapt to small screens.

Accomplishments that we're proud of

  • Created a fully functional career guidance platform with interactive features and clean UI/UX.
  • Successfully implemented dynamic dashboards and progress tracking entirely in vanilla JS.
  • Made the website mobile-responsive and visually appealing with color-coded fields and animations.
  • The project is deployable online with a live demo link for anyone to try instantly.

What we learned

  • How to structure a modular JavaScript application using ES6 classes for a large, interactive website.
  • Effective use of CSS variables, flex/grid layouts, and animations for dynamic UI.
  • How to integrate interactive elements like progress bars, ratings, and chat panels without external frameworks.
  • Managing user experience with navigation, page transitions, and responsive design.

What's next for SkillPath AI

  • Integrate real AI responses in the chat panel for personalized career advice.
  • Add user authentication to save individual progress and roadmap history.
  • Implement project submission and community sharing, allowing users to showcase their generated projects.
  • Include analytics and recommendations powered by user skill profiles and preferences.

Built With

  • codepen(prototyping)
  • css3
  • es6+)
  • font-awesome-(for-icons)
  • google-fonts-('inter'-and-'poppins')
  • html5
  • javascript
  • responsive-design
  • stackblitz-(development-and-hosting)
  • vite
Share this project:

Updates