Convo-Portfolio

The AI Portfolio That Answers Back

Comment

Inspiration

Traditional portfolios fail at the one thing they should do best: start a conversation. Recruiters open a portfolio, skim bullet points, and leave—with no real sense of who you are or how you think. The problem isn't the content; it's the format. Static portfolios are one-way monologues when they should be two-way dialogues.

I wanted to solve this: What if a portfolio could answer questions the way I would? Not with generic chatbot responses, but with rich, curated answers that feel personal and instant—like interviewing me without booking 30 minutes on my calendar.

What it does

ConvoPortfolio is an AI-powered, conversational portfolio with three interaction modes:

  1. Scenario-Based Interface – Click suggestion chips (or ask via voice) to trigger 30 pre-built scenarios covering everything from my Kubernetes experience to hackathon wins. Each response is instant (<100ms) with animated cards displaying projects, skills, certifications, and timelines.

  2. Voice Controls – Ask questions out loud using the Web Speech API and toggle text-to-speech to hear responses read back. It's hands-free portfolio exploration.

  3. RAG-Powered Mini Chatbot – For off-script questions ("What's your approach to learning new platforms?"), a floating ✨ chatbot uses Gemini 2.0 Flash with a Retrieval-Augmented Generation (RAG) pipeline grounded in my comprehensive knowledge base.

Bonus Feature - Self-Updating GitHub Showcase: A GitHub Repository Explorer that automatically stays current with my latest work. Gemini 2.5 Flash reads each of my public repos and generates narrative "stories" explaining what it does, why I built it, and what I learned—turning every project into a mini case study.

Here's the magic: Cloud Scheduler triggers a monthly sync that fetches new repositories, generates fresh AI stories, and updates the portfolio automatically. This means my portfolio is always showcasing what I've been working on in the past month—without me lifting a finger. It's a living portfolio that evolves with my GitHub activity, ensuring recruiters always see my most recent projects and learning journey.

How we built it

The architecture follows a three-tier hybrid approach: instant scenario matching for common queries, RAG-powered chatbot for edge cases, and automated GitHub story generation for dynamic content updates.

Project Architecture Diagram

Frontend: Next.js 16.1.3 with TypeScript, Tailwind CSS v4, and Framer Motion for animations. The 30 scenarios are JSON files loaded at build time—no API calls for instant responses. Fuse.js handles fuzzy matching for typos and variations.

Backend: FastAPI (Python) deployed on Google Cloud Run. The RAG pipeline uses LangChain + ChromaDB for vector storage and Gemini 2.0 Flash for conversational responses. A second Gemini 2.5 Flash instance powers the GitHub Explorer, generating AI narratives from repo metadata.

Infrastructure: Cloud Run (serverless, scales to zero), Google Cloud Storage (persistent caching for GitHub data), Vercel Analytics (usage tracking). Cloud Scheduler triggers monthly repo syncs to keep content fresh.

Key Design Decision: Hybrid approach—predictable scenario matching for common questions (fast, no LLM cost) + RAG fallback for edge cases (flexible, contextual). This balances performance and conversational depth.

Challenges we ran into

1. Voice API Limitations
Web Speech API support is inconsistent across browsers. Safari has spotty recognition, Brave blocks it entirely. Solution: Graceful degradation with clear tooltips and text-first design. Voice is a bonus, not a dependency.

2. RAG Optimization
Early versions had slow chatbot responses (5-7s). The bottleneck was embedding generation. Solution: Switched to Gemini's built-in embeddings, chunked the knowledge base more efficiently, and limited responses to ~150 words to reduce token usage. Response time dropped to <3s.

3. Balancing Structure and Flexibility
Too many scenarios felt rigid; too few felt incomplete. After testing, 30 scenarios hit the sweet spot—covering 90% of recruiter questions while keeping the chatbot as a safety net for the other 10%.

4. GitHub Story Quality
Initial AI-generated repo stories were generic ("This is a Docker tool"). Solution: Crafted detailed prompts for Gemini 2.5 Flash with examples, asking it to extract "what problem this solves" and "what I learned." Quality jumped dramatically.

Accomplishments that we're proud of

✅ Built in 10 days – From concept to production deployment, including 30 scenarios, voice integration, RAG chatbot, and GitHub Explorer.
✅ Zero-latency main UI – Scenario responses render in <100ms (no API calls).
✅ Dual Gemini integration – Gemini 2.0 Flash for conversational chatbot + Gemini 2.5 Flash for GitHub story generation.
✅ Auto-maintenance system – Monthly Cloud Scheduler job keeps GitHub repos synced without manual intervention.
✅ Silky animations – Every card, chip, and transition is polished with Framer Motion micro-interactions.

What we learned

1. Hybrid beats pure AI – Pre-built scenarios feel faster and more reliable than always hitting an LLM. The illusion of intelligence (fast, consistent responses) often beats actual LLM flexibility for common use cases.

2. RAG is only as good as your knowledge base – Garbage in, garbage out. Spending time writing a comprehensive, well-structured knowledge base (375 lines covering my full story) made the chatbot 10x better than relying on generic context.

3. Voice is a feature, not the feature – Voice controls sound cool but not everyone wants to talk to their screen. Making it optional (and text-first) removed friction instead of adding novelty for novelty's sake.

4. Gemini 2.5 Flash is a narrative machine – The quality of AI-generated repo stories genuinely surprised me. With the right prompts, it turns dry commit histories into compelling case studies.

What's next for Convo-Portfolio

🚀 Multi-language support – Allow visitors to ask questions in their native language, with Gemini translating responses.
🎨 Custom themes – Let users pick color schemes or export their own ConvoPortfolio template.
📊 Analytics dashboard – Show which scenarios get asked most, helping me refine content.
🔗 LinkedIn integration – Pull endorsements and recommendations dynamically.
🤖 Comparative resume mode – Paste a job description, and the portfolio highlights relevant experience automatically.

Built With

  • fastapi
  • framer-motion
  • fuse.js
  • next.js
  • tailwind
  • typescript
Share this project:

Updates