PortfolioAI🎩
What If Your Portfolio Could Actually Talk?
Not some generic chatbot spitting out canned responses. A character. With personality. With wit. With the ability to discuss 150+ projects, 11 years of experience, and handle nuanced interview questions with the grace and diplomacy Jane Austen would admire.
Here's the thing: There are very few personal AI portfolios out there.
And the ones that exist? Glorified FAQs. Generic responses. No personality. Just another resume with a chat interface.
Meet Mr. Darcy. He gives you an idea of who I am before you ever meet me.
Not just my resume. Not just a list of skills.
✦ My approach to problems
✦ My sense of humor
✦ How I think about edge cases
✦ My communication style and professionalism
Built from scratch using Google Gemini 2.0 Flash Experimental, custom RAG architecture, Next.js 14 API routes with streaming, and a 40-keyframe CSS animation I coded by hand because personality matters.
This portfolio doesn't just show my work.
It demonstrates it through its very existence.
Features Overview
AI-Powered Chat Assistant
Character-driven personality with dual modes (Eloquent/Brief). Streaming responses with conversation persistence.
Voice Interaction
Press-and-hold voice input with real-time transcription and British TTS output.
RAG Architecture
Page-aware context injection with role-based filtering. Sub-300ms response latency with zero token errors.
Automated Calendar Booking
Cal.com API integration. Visitors book meetings directly through the portfolio with zero manual work.
📖 How to Use This Portfolio
For Visitors
- 1.Explore with Mr. Darcy: Click the tipping top hat 🎩 in the bottom right corner to ask questions about projects, experience, or technical skills
- 2.Try voice input: Press and hold the microphone button, speak, then release
- 3.Browse Projects: Visit the Projects page to see 150+ documented projects with technical breakdowns
- 4.Schedule a Meeting: Ask Mr. Darcy to "schedule a meeting" or click the Booking page
For Recruiters & Hiring Managers
- •Technical Depth: Ask Mr. Darcy specific questions like "Tell me about the RAG architecture" or "How does the voice input prevent race conditions?"
- •Full-Stack Capabilities: Navigate different pages to see frontend design, backend APIs, AI/ML implementation, and database architecture
- •AI/ML Expertise: Custom RAG implementation, prompt engineering, token optimization, streaming response architecture
- •Product Thinking: Notice UX innovations like press-and-hold voice, dual personality modes, and automated booking
Technical Stack & Architecture
Frontend
- Next.js 14.2.15 - App Router with SSR
- TypeScript 5.6 - 100% type coverage
- React 18 - Server Components
- Tailwind CSS 3.4 - Victorian design system
Backend
- Next.js API Routes - Serverless functions
- Gray-matter - YAML/Markdown parsing
- Supabase - PostgreSQL database
AI & Integrations
- Google Gemini 2.0 Flash - AI model
- Cal.com API - Automated booking
- Web Speech API - Voice input
- Google Cloud TTS - Voice output
Performance
- Server-side rendering - Instant loads
- Streaming responses - Real-time display
- Smart caching - Context + localStorage
- Type-safe APIs - Error handling
Performance Metrics
Let's Discuss Your Project
Interested in working together or have questions about this project? Schedule a meeting or reach out directly.
Want to Build Your Own AI Portfolio?
I'm currently creating a complete Standard Operating Procedure (SOP) documenting how I built this system. It will include step-by-step technical guides covering RAG implementation, streaming APIs, character design, and more.
In the meantime, reach out to discuss your AI portfolio project!
Schedule a Meeting