Project 00
Your Next Hire is Already Online
Project Brief
A conversational AI portfolio that lets recruiters skip the PDF and talk directly to a digital clone of me. Check role fit instantly, ask follow-ups, and decide if the real Richard is worth a call.
Timeline
2 Days
Stack
Next.js 16, TypeScript, Tailwind CSS, Three.js, TalkingHead.js, Ready Player Me, Cartesia Sonic TTS, OpenRouter (Claude), Vercel, Supabase, Framer (iframe embed)
Real Time Lip-Sync
Voice Clone
Ready Player Me Avatar
Project Overview
This project transforms the traditional portfolio into a conversational experience. Instead of scrolling through static pages, recruiters and collaborators interact with a real-time 3D avatar that speaks, emotes, and answers questions as Richard would, drawing from a comprehensive knowledge base of his experience, projects, and design philosophy.
The system combines a Ready Player Me 3D avatar with TalkingHead.js for real-time lip-sync, Cartesia Sonic for text-to-speech, and an LLM backbone via OpenRouter to generate contextual responses. A companion "Check Role Fit" feature lets users paste a job description and receive an instant fit analysis, bridging the gap between portfolio browsing and active recruiting.
My Approach
The architecture follows a streaming-first design: as the LLM generates a response, sentences are incrementally parsed and routed to the TTS pipeline, which produces audio with viseme timing data. The avatar consumes these visemes in real-time, driving 67 morph targets (15 Oculus visemes + full ARKit blendshape set) for natural mouth movement and facial expressions. This pipelined approach eliminates the wait-for-full-response bottleneck, making conversations feel fluid and immediate.
On the frontend, a split-panel layout pairs the 3D avatar with a chat interface — side-by-side on desktop, stacked on mobile. The entire app is built in Next.js with server-side API routes handling LLM and TTS calls, keeping API keys secure. Rate limiting, Supabase analytics, and lazy client initialization ensure the system is production-ready and resilient, while iframe-friendly headers allow seamless embedding in external platforms like Framer.
Word on the Street
"I'm the digital version of Richard that never needs coffee. Same opinions, zero caffeine dependency."
