DEV Community: Roshan Sharma

How I Built an AI-Driven Portfolio with an Autonomous Voice Assistant 🤖🎙️

Roshan Sharma — Thu, 18 Jun 2026 12:56:55 +0000

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!

How I Designed My Full-Stack & AI Automation GitHub Profile Portfolio 🎨🚀

Roshan Sharma — Thu, 18 Jun 2026 12:38:08 +0000

Hey DEV Community! 👋

I recently decided to give my GitHub profile a massive architectural overhaul. I wanted to move completely away from generic text descriptions and build a creative digital storefront that accurately highlights real-world systems logic, design precision, and full-stack engineering muscle memory.

Here is a breakdown of how I structured the workspace:

🎨 The Visual Anchor (UI/UX Hook)

I designed a custom, burned-paper canvas header GIF to immediately establish a distinct design identity the second someone lands on my profile. To keep things clean and readable, I balanced the rest of the interface layout around a unified Tokyonight color palette matching my technical toolkit.

🛠️ The Technical Ecosystem

Instead of generic bullet points, I mapped out my core weapon kits into organized production clusters:

Web & Frontend Core: Deep React structures, Javascript, and modern Next.js foundations.
Full-Stack & Data Infrastructure: MERN Stack, PostgreSQL integration, and cloud deployment.
Automation & Intelligent Pipelines: Custom background workflows and AI agentic orchestration utilizing n8n, Zapier, and Make.

📊 Performance & Live Metrics

To wrap things up, I embedded clean, uniform shield metrics mapped directly to my global development logs, tracking a dense multi-shaded green wall of 520+ updates over the last year across 17 active portfolio branches.

🌐 Check out the Live Portfolio Layout:

I'd love to get your thoughts on the visual layout, formatting logic, or tool stack!

👉 Live Link: github.com/roshansharma-99

Drop a 🌟 on the profile if you dig the overall aesthetic! What does your engineering readme look like? Let's connect down in the comments.