SkillBridge

💡 Inspiration

Many students and recent graduates face a massive "employability paradox"—they don't know what skills they are missing until they get rejected from a job. We wanted to build a transparent, visually intuitive co-pilot that helps students benchmark their real-world readiness, see exactly where their gaps lie, and give them an actionable timeline to fix them before hitting the job market.

⚙️ How We Built It

• Frontend: Built using HTML/CSS/JS with a highly modern bento-grid aesthetic, featuring glassmorphism effects and clean typography inspired by Notion and Coursera.
• Data Visualization: Integrated dynamic radar charts to map precise user skill benchmarks (Frontend, Backend, Debugging, Teamwork) visually.
• AI Integration: Powered by the Gemini API to analyze user metrics and portfolio drops in real-time, instantly spinning up hyper-personalized learning roadmaps and functioning as an interactive, live AI Interview Coach.

🛑 Challenges We Faced

Time constraint was our biggest enemy. Designing a multi-step assessment workflow, a chronological roadmap engine, and a live AI streaming chat interface all within a single hackathon window forced us to aggressively prioritize state management. We also had to optimize our prompt engineering workflows to ensure the AI's critique feedback remained hyper-focused, ultra-brief, and perfectly aligned with the visual chart data.

🎓 What We Learned

We learned how to translate complex AI data into clean, friendly user experiences. A user shouldn't just be handed a score; they need to see an immediate path forward. Building SkillBridge AI taught us how to couple generative AI capabilities with strict UI consistency, ensuring that the backend logic directly updates the frontend data visualization seamlessly.

Built With

• css3
• gemini
• html5
• mysql
• react.jsx