Hey DEV Community! š
I want to share the architecture behind my live portfolio ecosystem. Instead of building a static profile site, I engineered a fully interactive experience featuring an autonomous, voice-guided AI assistant named Bunny.
š Live Link to Explore: roshansharma.co.in
Here is a look under the hood at how this system operates:
ā” The Core Tech Stack
- Frontend: Next.js for high-performance rendering and smooth state machine transitions.
- Database & Vector Storage: Supabase managing a custom vector database for contextual memory.
- AI Orchestration & Chat: Autonomous LLM agent logic managing the core conversational loops.
šļø The Voice Guide & RAG Architecture
When a user unmutes the platform, it initializes an immersive auditory guide. The real magic happens inside the live Bunny AI Chat console on the right panel:
- Contextual Retrieval (RAG): The chat interface hooks directly into a Retrieval-Augmented Generation pipeline over my professional codebase, projects, and skills data.
- Autonomous Response Generation: Bunny can intelligently handle complex queries, offer tailored pitches, and discuss my full-stack engineering background dynamically.
- Voice Assistance Execution: The interface features a full auditory playback layer, creating a hands-free conversational workspace for reviewing engineers or recruiters.
š ļø Reflections on the Build
The biggest engineering hurdle was balancing state synchronization between the main visual transitions, the auditory stream triggers, and the asynchronous chat retrieval states.
Iād love to know what you think of the user experience flow or the vector pipeline! Drop an unmute over at roshansharma.co.in and let's discuss down in the comments!
Top comments (0)