DEV Community

Cover image for AI Career Twin Portfolio: Interactive Portfolio with Intelligent Assistant
Mansaa Kohli
Mansaa Kohli

Posted on

AI Career Twin Portfolio: Interactive Portfolio with Intelligent Assistant

#devchallenge #googleaichallenge #portfolio #gemini

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: https://ai-portfolio-psi-gilt.vercel.app

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:

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

Development Process:

  • Design Phase: Wireframing and planning user experience
  • Implementation: Building components with semantic HTML and modern CSS
  • AI System: Creating intelligent response logic
  • Testing: Cross-browser and device testing
  • Deployment: Setting up cloud hosting and optimization

What I'm Most Proud Of

  1. The AI Chat Feature: Creating an interactive assistant that provides personalized responses about my work, making the portfolio engaging and memorable.

  2. Visual Design Execution: Successfully implementing glass morphism effects and smooth animations that create a professional, modern aesthetic.

  3. Problem-Solving Journey: Overcoming deployment challenges and learning new technologies like Vercel deployment and advanced CSS animations.

  4. Complete Solution: From concept to deployment, building a full-stack portfolio that demonstrates end-to-end development skills.

  5. 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

Live Demo: https://ai-portfolio-psi-gilt.vercel.app

Built with ❤️ for the Google AI Portfolio Challenge

--labels dev-tutorial=devnewyear2026

Top comments (0)