Inside My AI‑Native Portfolio: How I Built Dual Agents, Live Architecture Diagrams, and a Multi‑Planetary Theme Engine

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

How I Built It

One month. That's about how long I thought this would take. It ended up being a deep dive into building a RAG-powered dual-agent AI that hosts my professional life in a vector database.

It's live. And it's alive. 🚀 https://portfolio-challenge-615150985064.us-central1.run.app

Let me walk you through what I actually built, the chaotic energy behind it, and why there's a 3D architecture engine hidden inside my "About Me" page.

The Philosophy: "A Digital Brain, Not a Document"

Most portfolios are static business cards. Name, title, "I code good." I wanted something that felt like a place. A digital lab where my actual work lived, breathed, and could explain itself.

The big realization was: naive chatbot portfolios fail. They hallucinate. They miss context.
So I built Akasha: A RAG-grounded system that treats my resume, projects, and architecture diagrams as a searchable knowledge base.

Portfolio

Live URL: https://portfolio-challenge-615150985064.us-central1.run.app

(Pro tip: Switch the theme to "Midnight" for the full sci-fi effect, or "Ivory" if you prefer that clean, gallery aesthetic.)

The Brain: RAG & Dual-Agent Architecture

How I Did RAG (Retrieval-Augmented Generation)

Standard LLMs don't know my specific contributions to a traffic platform in 2021. So I indexed my life.

1. Vector Store: I used ChromaDB to store embeddings of my:
   • Resume (chunked by role)
   • Project Technical Deep Dives (ArchDivine, VIBE, AIMS)
   • Architecture Principles
2. Embedding Model: Documents are embedded using Google's text-embedding-004, which captures semantic meaning far better than simple keyword matching.
3. Retrieval Logic: When you ask "How did you scale the forecasting system?", the backend:
   • Generates an embedding for your query.
   • Retrieves the top 3 most relevant "memory chunks" from ChromaDB.
   • Feeds those chunks + the user query to Gemini 2.0 Flash.

Result? Zero hallucinations about my work history. It cites the specific technology stack I actually used.

Dual-Agent System (Dharma & Karma)

I split the AI persona into two specialists:

• Dharma (The Oracle): Handles the deep, architectural questions.
• Karma (The Executor): Focuses on the "how"—the code, the stack. When you start a chat, you choose an engineering level—Intern to Fellow. The AI adapts its tone, mentorship style, and technical depth accordingly.

What I'm Most Proud Of

1. Reliable RAG Implementation

This isn't a toy. It indexes 10+ years of engineering contexts.

• Performance: Retrieval takes <100ms.
• Accuracy: It distinguishes between "Project Lead" and "Contributor" roles based on vector similarity.
• Impact: It allows the AI to explain why I chose Kafka over RabbitMQ for a specific project, citing the exact constraints I documented.

2. A "Solar System" of Themes

Most sites have Light/Dark mode. I built a 9-Theme Engine (themeConfig.js) based on planetary psychology and color theory.

• Dark Themes: "Midnight" (Emerald/Pro), "Obsidian" (Cyan/Luxury), "Slate" (Blue/Tech).
• Beige Themes: "Sand" (Creative), "Linen" (Warm), "Parchment" (Classic).
• White Themes: "Snow" (Minimal), "Cloud" (Clean), "Zen" (Calm).

Each theme isn't just a color swap—it changes the particle behavior, gradients, and reduces blue light (using 400-weight colors) to prevent eye fatigue.

3. Vibe Engineering (Particle Physics)

The background isn't a video. It's a custom Canvas implementation with 6 Interaction Modes:

• Grab: Particles connect to your mouse like a constellation.
• Repulse: Particles flee from your cursor.
• Bubble: Particles expand when you hover near them. It respects prefers-reduced-motion automatically.

4. Interactive Glass Cards

Hover over my certifications or projects.
They use intelligent gradient tracking and glassmorphism (backdrop-blur) to create a premium, tactile feel. The lighting follows your cursor, making the UI feel responsive and alive.

5. Dynamic Architecture (Mermaid on the Fly)

This is the killer feature.
You can ask the AI: "Show me the architecture of the forecasting system."
It doesn't just describe it. It writes Mermaid.js code in real-time, and my DiagramRenderer paints it instantly as an interactive diagram you can zoom and pan.

6. Graceful Degradation (The Hybrid Cloud)

I deploy to both Vercel (Frontend) and GCP Cloud Run (Backend).

• On Vercel: The app detects static mode and switches the chat to a client-side "Expert System".
• On GCP: It detects full mode and activates WebSockets, RAG, and Gemini 2.0. Reliability of static hosting + power of cloud computing.

7. Global Command Palette (Cmd+K)

I'm a keyboard power user.
I built a global fuzzy-finder triggered by Cmd+K.

• Search standard navigation ("Experience", "Contact").
• Execute commands ("Theme: Obsidian").
• It indexes the entire site content dynamically.

8. Resilient Component Architecture

I wrapped major sections in custom Error Boundaries.
If a complex D3 chart crashes, the whole site doesn't break.
It gracefully downgrades just that specific component to a static fallback.

9. Smart Skeleton Loading

I can't stand generic spinners.
I built Context-Aware Skeletons.

• Loading a card? You see a card-shaped pulse.
• Loading a chart? You see a grid pulse. This prevents Cumulative Layout Shift (CLS) and makes the site feel instantaneous.

10. Mobile-First "Thumb Menu"

On mobile, the top navbar disappears.
Instead, a Multi-Action Floating Button (FAB) appears at the bottom right.
It expands into a thumb-reachable menu for Chat, Search, and Settings. Desktop UX shouldn't just shrink; it should adapt.

11. Eye-Comfort Color Science

I researched 500+ top portfolios to design the palettes.

• Low Saturation: I maintain 30-50% saturation to prevent eye fatigue.
• 400-series Colors: I use 400-weight colors (e.g., Blue-400) instead of harsh 600-weights for smoother gradients.

12. Automated SEO Injection

I didn't manually write meta tags.
I built a Structured Data Injector that takes my data and generates JSON-LD Schema.org markup.
It automatically tells Google about my "WorksFor", "AlumnusOf", and "SameAs" profiles.

13. ScrollSpy Navigation & Reading Progress

As you scroll down the page, the navigation doesn't just sit there.
A Scroll Navigator updates a visual progress ring and percentage indicator in real-time.

• It calculates exact read percentage on desktop.
• It handles both manual scrolling and click-to-scroll animations, ensuring the highlight never gets out of sync with the viewport.

14. Real-Time Performance Optimized

Despite the particles and 3D effects, the initial bundle size is just ~220kB.
I aggressively code-split the heavy D3 and 3D libraries so they only load when you actually scroll to those sections.

• Lighthouse Score: Consistently hits 99+ on Performance and Best Practices.

15. Keyboard Accessibility

You can navigate the entire site without a mouse.

• Focus states are clearly styled.
• Visual-only elements (particles) are hidden from screen readers.

16. The Console "Conversation"

I hid a few developer-friendly logs in the console.
If you open DevTools, you aren't greeted with errors. You'll see clear, structured logs about the state of the WebSocket connection and health checks. I believe good engineering is invisible to the user but beautiful to the developer.

17. The "Hidden" Game

I hid a developer console easter egg.
If you open DevTools, you aren't greeted with errors. You're invited to play a game.
There's a Konami Code listener that unlocks a "Retro Mode." (Try: ↑ ↑ ↓ ↓ ← → ← → B A)

Side Quests & Experiments

In my free time, I like to build small tools that solve my own frustrations or explore weird ideas. They aren't massive production systems, but they've been great playgrounds for learning:

• ArchDivine
  • What it is: A system design visualization tool.
  • Why I built it: I got tired of static architecture diagrams. I wanted 3D cities.
• LLM Vibe
  • What it is: A "Taste Test" for LLMs to compare GPT-4, Claude, and Gemini side-by-side.
  • Why I built it: I needed a way to vibe-check models on specific prompts quickly.
• AIMS
  • What it is: A context-aware task manager.
  • Why I built it: To organize tasks by "network" and "vibe" rather than just lists.
• NowIKnow
  • What it is: A quantitative finance experiment exploring Phase Space Reconstruction.
  • Why I built it: Just purely for the love of math and chaotic systems.

The Honest Bits (What Broke)

Design Paralysis: I redesigned the "Projects" card 12 times. Literally. I finally settled on glassmorphism because it separates the content layers beautifully without feeling heavy.

Vercel vs. Python: I love Vercel for frontend, but deploying a Python/FastAPI backend with ChromaDB and WebSockets there? Nightmare.

• The Fix: I built a "Adaptive Deployment" system. It detects the environment and switches between "Full AI" and "Static Fallback" seamlessly.

Future Enhancements

• Voice Integration: I want to add Web Speech API so you can literally talk to Akasha.
• 3D City View: Turning the entire portfolio into a navigable WebGL city (inspired by ArchDivine).
• Interactive 3D Skill Galaxy: I'm currently building a physics-based Force-Directed Bubble Chart where skills are "nodes" that bounce off each other, with core skills gravitating to the center.

If you want the source code, want to collaborate on AI agents, or just want to geek out over system design—hit me up.

Thanks for dropping by my digital universe. 🌌

-- Ananth