DEV Community: Roshan Sharma

"Building in Public: How a Deep Code Audit Hardened My Production Portfolio Architecture 🚀"

Roshan Sharma — Fri, 19 Jun 2026 18:31:05 +0000

🤝 Special Community Acknowledgments

Before breaking down the technical updates, I want to extend a massive thank you to two brilliant engineers here in the community: @unitbuilds and @jeelvankhede.

Thank you both so much for taking the time to thoroughly review my portfolio setup, run technical evaluations on the conversational layers, and show genuine interest in my architectural choices. In today's highly competitive economy, having seasoned developers actively look under the hood of my projects and push me to improve is the absolute best motivation to keep building. I am incredibly grateful for your time and insights!

Building in public is one of the most rewarding parts of being an engineer, but nothing beats the moment another developer scales your ecosystem, pulls apart the layers, and hands you a deep, high-value code audit.

Yesterday, I posted about my interactive portfolio, and a stellar developer here in the community, @unitbuilds, left a brilliant, highly critical breakdown checking my UI/UX, markdown strings, and hardware permission layers.

In today's ultra-competitive tech economy, my absolute priority is pushing myself to learn, adapt, and improve my stack daily to be completely industry-ready. Getting professional criticism from seasoned engineers isn't just helpful—it’s the fastest fuel to sharpen my skills. Instead of just replying, I spent the last few hours writing a structural production-grade patch via Antigravity and deploying it live.

Here is exactly what we refactored based on the audit:

🛠️ The Production Hardening Breakdown

1. The Broken Markdown Chat Render Bug

The Issue: The assistant was outputting raw string blocks containing unparsed symbols (**a-sync**) instead of applying clean styles inside the chat bubble view cards.
The Fix: I pulled a dedicated markdown parser (react-markdown) straight into the chat message component logic. The strings now parse seamlessly into clean HTML bolding rules natively, preserving our typography styling without lagging the client loop.

2. Intrusive Microphone Access (UX Flow)

The Issue: Prompting for hardware camera or mic telemetry immediately upon page load is a jarring user experience.
The Fix: I completely overhauled the permission cycle. The platform now mounts with a zero-intrusive sound loop state toggle. Microphone prompts are strictly lazy-loaded—they only fire if a user explicitly clicks [ CALL LIVE AI AGENT ] or toggles [ VOICE ASSISTANCE ] inside the side-drawer panel. Furthermore, I built a luxury dark hardware disclosure intercept modal that explains precisely what the microphone does before the native browser permission dropdown even appears.

3. Data Privacy Disclosures & Compliance

The Issue: Visitors are naturally uncomfortable with active mic channels without transparent data containment agreements front and center.
The Fix: I appended an interactive legal compliance footer directly beneath the Fuel the Code server cards grid layout. Clicking the links now opens beautifully animated, theme-aligned modals tracking data minimization policies (explicitly clarifying that voice operations compile locally inside active browser memory over open-source web-speech pipelines, with zero data recorded or stored on remote databases).

🧠 Deep-Dive: LoRA Weights & ONNX Architectures

@unitbuilds also dropped a fantastic question regarding the underlying machine learning models:

"Did he use a base model and train with a LORA? Or was it trained from scratch?"

To lay out the architecture details: The system runs a multi-stage orchestration pipeline targeting a high-speed, client-side ONNX runtime. It isn't trained entirely from scratch. I built a targeted training dataset of clean vocal attributes and trained a custom LoRA (Low-Rank Adaptation) weight matrix adapter over an open-source topology to keep execution latency low enough for instant response loops. The background automation handles tasks by translating conversational intents into remote shell commands using isolated secure tunnels via a custom serverless proxy routing layer.

🤝 A Massive Thank You to the Community

To @unitbuilds—I am incredibly grateful you took the time to go through my layout configs, stress-test the conversational boundaries, and share your technical perspective. Your feedback pushed this project from a cool concept to a production-hardened web app. I would absolutely love it if you could take another look at the live deployment to see how the updates hold up!

I’d also value your feedback on my broader open-source codebases, especially the main system infrastructure files for Bunny.AI (which I trained utilizing Google Colab blocks, connected via cross-device mobile streams, and compiled down to optimized runtimes). You can review all the raw code repositories directly on my profile:
👉 GitHub: github.com/roshansharma-99

The fresh, hardened build is officially live on my custom domain right now:
👉 Live Portfolio: roshansharma.co.in

I am going to start publishing full video walkthroughs and system code deep-dives of these automation tracks very soon, and I would love to get your continued suggestions, critiques, and insights as I keep expanding this project registry.

Let's keep building! 💻🔥

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.