In the first session of this series, I stopped the PDF obsession and rebuilt the foundations of my portfolio. I moved from an outdated site to a dynamic career roadmap using Lovable and Gemini. Read it here:
Today I am moving from visuals to interaction. By the end of this session, you will know exactly how to create your own AI agent using RAG (Retrieval Augmented Generation). You will learn how to turn your static experience into a live, grounded conversation that never makes things up.
The Goal: Engineering A High Agency Portfolio
I am transitioning my portfolio from a static resume into a high agency Proof of Work engine. This site demonstrates my ten plus years of technical leadership and my current Vibe Coding velocity. By applying my Agentic AI Framework, I built a site that acts as a live demo of the Prompt Led Product philosophy.
Here is how I re-engineered the visuals to prove my technical velocity:
The Hero Identity: I added a professional Coral background ring to my profile photo to anchor my identity against my value proposition.
The Elena Agent: I built an interactive chat component that acts as a live demo of my builder velocity. It uses a Voice Firewall to protect private data and stays grounded in my career history to prevent hallucinations.
The 4-Lane Roadmap: I killed the standard vertical timeline. Instead, I built a horizontal, multi-lane roadmap that visualizes my career as parallel product releases:
Product Leadership: My 10+ year evolution as a PM.
Vibe-Coded Lab: Where I ship apps like DraftKit and CampaignDays.
Content Strategy: My technical publication and newsletter growth.
Engineering Foundations: My roots in front-end and technical architecture.
The RAG Visualizer: I implemented a CSS-based diagram to show the Retrieval-Augmented Generation flow. It proves I can architect systems for 2M+ users without leaking any proprietary corporate data.
Building The Elena Agent With RAG
Most AI models are like students taking a test from memory. When they don’t know the answer, they just guess. We call that hallucinating. RAG stands for Retrieval Augmented Generation. It simply gives the AI an open book.
When a user asks a question, the system searches my private database for the exact right facts first. It hands those facts to the LLM and says, “Answer this question using only this information and nothing else”.
For product managers, RAG is the framework I use to stop the AI from making things up. It grounds the product in reality.
I built this secure chat widget using Gemini 3 Flash and Supabase Edge Functions. To ensure it stays reliable, I used the same 5 Step Framework I developed for agentic workflows.
You can see the full breakdown of that logic in my previous post to reuse the same grounding rules in your own projects:
Persona: I established a punchy first person voice that uses contractions and avoids flowery language.
Knowledge Grounding: I hardcoded my CV and project list as the only source of truth to prevent hallucinations.
Voice Firewall: I created a zone that redirects personal or proprietary corporate questions to my LinkedIn.
The Corrective Bridge: I refined the logic so the agent politely corrects users before providing an answer.
Before we start the build, make sure you have enough generation credits. You can use my referral link here to get set up: https://lovable.dev/?via=elena-calvillo