SkillFolio: AI Career Assistant

Inspiration As students, we often struggle to effectively showcase our skills, projects, and certifications in a single, cohesive way. Traditional resumes are too static, and building a personal website from scratch can be time-consuming. We realized there was a huge gap for a platform that not only lets students build stunning, dynamic portfolios but also actively helps them improve their professional identity. This inspired SkillFolio—a sleek portfolio builder supercharged with AI.

What it does SkillFolio is a comprehensive student portfolio platform that allows users to seamlessly manage their professional identity.

Dynamic Dashboards: Users can track their "Portfolio Strength" and visualize their skill distribution. Role Management: The platform adapts based on user roles (Student, Teacher, Recruiter, Admin). SkillFolio AI Assistant: We integrated a floating chat assistant powered by Google Gemini. What makes it special is that the AI is fully context-aware—it reads the user's real-time state (their current skills, interests, and projects) to offer highly personalized career advice, project ideas, and resume critiques directly within the dashboard. Modern Customization: Features a flawless dark/light mode theme toggler using the latest Tailwind CSS v4 architecture. How we built it We adopted a modern, decoupled full-stack architecture:

Frontend: Built with React and TypeScript, bundled by Vite. For state management, we used Zustand to keep things lightweight and fast. We crafted a beautiful, premium UI using Tailwind CSS v4 and headless accessible components from Radix UI. Backend: A robust Node.js and Express server handles business logic, database operations, and acts as a secure proxy to interact with AI models. Database: MongoDB handles persistent storage for user profiles, projects, and achievements. AI Integration: We utilized the Google Gemini API (@google/genai) to power our context-aware cloud assistant. Deployment: We implemented a CI/CD pipeline, deploying the frontend on Vercel and the backend on Render. Challenges we ran into Context-Aware AI: Passing real-time data from the frontend Zustand store into the backend Gemini prompt without hitting context limits or causing latency required careful data serialization. Tailwind v4 Migration: Tailwind CSS v4 handles dark mode very differently from v3 (moving away from tailwind.config.js to pure CSS @custom-variant directives). Getting the Theme Provider to flawlessly switch CSS variables in real-time took significant debugging. Deployment Snags: Getting Vercel and Render to talk to each other properly meant dealing with tricky CORS errors and ensuring our environment variables (VITE_API_URL) were correctly injected into the production builds without exposing secrets. Accomplishments that we're proud of Successfully integrating Google Gemini in a way that actually understands the user's specific portfolio data, making it a truly personalized assistant rather than just a generic chatbot wrapper. Achieving a highly polished, premium UI with smooth micro-animations and a flawless dark mode implementation. Deploying a complete, secure full-stack application within the hackathon time limits. What we learned The intricacies of configuring CORS and environment variables across decoupled hosting environments (Vercel & Render). How to leverage modern AI SDKs (Google GenAI) and prompt engineering to process dynamic frontend state. The new architectural changes and performance benefits of the newly released Tailwind CSS v4. What's next for SkillFolio Public Portfolios: Generating shareable, read-only public links that students can send directly to recruiters. AI Mock Interviews: Expanding the Gemini assistant to conduct text-based technical mock interviews based on the skills listed in the student's portfolio. Recruiter Dashboard: Building a dedicated view for recruiters to search and filter students by verified skills and project technologies.