AI Career Twin Portfolio: Interactive Portfolio with Intelligent Assistant

Source: Dev.to

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I’m Mansaa Kohli, a third‑year AI/ML student at VIT Bhopal University passionate about building intelligent healthcare solutions. Through this portfolio I wanted to create more than just a resume—I wanted to build an experience that shows my approach to technology and problem‑solving.

Portfolio

Live Demo:

Try the AI chat feature to learn about my work interactively!

How I Built It

Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Backend: Node.js / Express for intelligent responses
• Design: Custom CSS with glass‑morphism and animations
• Deployment: Vercel for global accessibility

Key Features

• AI Career Twin: Interactive chat system with contextual responses
• Modern Design: Glass‑morphism effects with gradient backgrounds
• Responsive Layout: Works on mobile, tablet, and desktop
• Interactive Elements: Animated skill bars, smooth scrolling, hover effects
• Performance Optimized: Fast loading with minimal dependencies

Development Process

1. Design Phase: Wireframing and planning user experience
2. Implementation: Building components with semantic HTML and modern CSS
3. AI System: Creating intelligent response logic
4. Testing: Cross‑browser and device testing
5. Deployment: Setting up cloud hosting and optimization

What I’m Most Proud Of

• The AI Chat Feature: An interactive assistant that provides personalized responses about my work.
• Visual Design Execution: Glass‑morphism effects and smooth animations that create a professional, modern aesthetic.
• Problem‑Solving Journey: Overcoming deployment challenges and learning new technologies like Vercel and advanced CSS animations.
• Complete Solution: From concept to deployment, building a full‑stack portfolio that demonstrates end‑to‑end development skills.
• Learning Experience: Pushing my boundaries with new technologies and creating something I’m genuinely proud to share.

Challenges & Solutions

• Challenge: Creating engaging AI responses without external APIs
  Solution: Built a knowledge‑based system with pattern matching
• Challenge: Complex CSS animations across browsers
  Solution: Extensive testing and fallback implementations
• Challenge: Deployment pipeline setup
  Solution: Explored multiple platforms and successfully deployed

Try It Yourself!

Ask my AI Career Twin:

• “What projects are you proud of?”
• “Tell me about your technical skills.”
• “How did you win the hackathon?”
• “What are your career goals?”
• “Tell me about your research.”

Future Improvements

• Integrate Google Gemini API for dynamic responses
• Add voice interface for chat
• Implement dark/light theme toggle
• Add project demonstration videos

Lessons Learned

• User‑experience details matter significantly
• Progressive enhancement ensures reliability
• Testing early prevents major issues
• Documentation makes maintenance easier