SmartFolio AI

Next-gen developer portfolio with AI chatbot assistant and voice-guided tours—transforming how developers showcase their work through intelligent, interactive experiences.

Comment

Inspiration

As a software engineer, I noticed that most developer portfolios are static pages—just text, images, and links. I thought, why aren't we using AI to make portfolios as intelligent as the work we showcase?

I wanted to create an experience where your portfolio could actually talk to visitors, answer their questions, and guide them through your work. That's how SmartFolio AI was born—transforming the traditional portfolio into an intelligent, interactive assistant.

What it does

SmartFolio AI is an AI-powered developer portfolio with three breakthrough features:

  1. AI Chatbot Assistant - Answers real-time questions about my projects, skills, and experience using natural language processing

  2. Voice-Guided Tour - A 2-minute automated walkthrough that narrates through each section with synchronized scrolling and an animated AI guide character

  3. Intelligent Interactions - Dark/light theme toggle, 3D card effects, smooth animations, and a fully responsive design that works flawlessly on all devices

The portfolio showcases my work as an AI/ML Software Engineer with sections for education, experience at GEICO, technical skills, featured projects, and a functional contact form.

How we built it

Frontend Stack:

  • Pure HTML5, CSS3, and vanilla JavaScript (no frameworks—lightweight and fast)
  • CSS Grid + Flexbox for responsive layouts
  • Custom CSS variables for seamless theme switching
  • AOS library for smooth scroll animations

AI Integration:

  • Built a FastAPI backend deployed on Vercel for the chatbot
  • Integrated Web Speech Synthesis API for voice narration
  • Implemented localStorage for conversation history persistence
  • Created custom SVG animations for the AI guide character

Key Features:

  • Event-driven architecture for chatbot interactions
  • Promise-based voice loading for cross-browser compatibility
  • GPU-accelerated CSS animations for 60fps performance
  • Web3Forms API for contact form handling

Challenges we ran into

1. Cross-Browser Voice Synthesis
Different browsers handle the Web Speech API differently. Safari needed special voice loading logic, and Firefox had timing issues. I solved this with a promise-based loader that waits for voice initialization.

2. Maintaining Chat Context
Making the chatbot understand portfolio content without being robotic required careful backend structuring. I implemented smart truncation (50-message history) to balance context and performance.

3. Animation Performance
Keeping the AI guide character smooth at 60fps while animating required using CSS transforms instead of position changes, plus GPU acceleration with will-change properties.

4. Accessibility
Ensuring the voice tour and chatbot worked for everyone meant adding ARIA labels, keyboard navigation (Escape to close, Enter to send), and proper focus management.

Accomplishments that we're proud of

🏆 First-of-Its-Kind - Built the first developer portfolio with both AI chatbot AND voice-guided tour

⚡ Performance Excellence - Achieved 95+ Lighthouse scores with sub-2-second load times despite rich AI features

🤖 Natural AI Interactions - The voice tour sounds human, not robotic, and the chatbot gives genuinely helpful responses

♿ Fully Accessible - WCAG AA compliant with keyboard navigation and screen-reader support

📱 True Responsiveness - Every feature (including chatbot and voice controls) works perfectly on mobile, tablet, and desktop

🎨 Polished Design - Cohesive design system that works beautifully in both dark and light themes

What we learned

Technical Skills:

  • Deep understanding of Web Speech API and browser voice synthesis
  • Building conversational AI with context awareness
  • Optimizing SVG animations for performance
  • Event-driven architecture for complex interactions

Design Insights:

  • Balance innovation with usability—AI should enhance, not overwhelm
  • Offer multiple interaction modes (scroll, voice, chat) for different user preferences
  • First impressions matter—the AI greeting creates immediate differentiation

AI Development:

  • Prompt engineering for natural, contextual responses
  • Managing conversation state efficiently with localStorage
  • Making AI feel human while staying transparent

What's next for SmartFolio AI

Short-term (Q1 2026):

  • Multi-language support (Spanish, French, Hindi)
  • Voice commands for hands-free navigation
  • Advanced analytics to track visitor questions and optimize content

Mid-term (Q2-Q3 2026):

  • Transform into SaaS—let anyone upload their resume and get an AI chatbot
  • Project deep-dives with AI-narrated architecture explanations
  • Interview practice mode with personalized technical questions

Long-term (2027+):

  • Open-source template for the developer community
  • AR business card feature with QR code activation
  • No-code AI portfolio builder for non-technical users

The Vision: SmartFolio AI isn't just my portfolio—it's proof that the future of personal branding is intelligent, interactive, and conversational. In 5 years, every developer will have an AI assistant representing them online. We're building that future today.

Built With

  • accessibility
  • aos-library
  • cdn-(jsdelivr
  • cloudflare)
  • css-custom-properties
  • css-grid
  • css3
  • devicon
  • event-driven-architecture
  • fastapi
  • fetch-api
  • flexbox
  • font-awesome
  • git
  • github
  • google-fonts
  • html5
  • intersection-observer-api
  • javascript-(es6+)
  • localstorage-api
  • natural-language-processing
  • python
  • responsive-web-design
  • speech-synthesis-api
  • svg-animations
  • vercel
  • vercel-serverless-functions
  • wcag
  • web-speech-api
  • web3forms-api
Share this project:

Updates