Peter Bot & FlipBot

I wanted to move beyond the static "grid of images" and explore how AI can act as a bridge between my work and a curious hiring manager. Peter Bot is a Retrieval-Augmented Generation (RAG) system designed to answer complex, natural-language questions about my projects, giving visitors a personalized deep-dive into my process .

To prevent the bot from feeling like a cold corporate widget, I designed FlipBot—a CSS-only sidekick. Inspired by retro flip-clocks and 80s aesthetics, FlipBot reacts in real-time to user activity. Whether it's a "Cool" face when you discover a key project or a "Thinking" state during processing , these micro-interactions turn a technical task into a delightful experience .

Early versions of Peter Bot relied on long, static prompts that were slow and prone to hallucination. I pivoted the product to a RAG-based pipeline. By chunking my career data into intent-based categories (Roles, Challenges, Outcomes) and storing them in a vector database, the bot now retrieves only the most relevant context, resulting in faster, more accurate responses .

I didn't want the bot to just talk; I wanted it to show. I built a multi-layered embedding system that includes visual captions. When a user asks about "mobile UI" or "final prototypes," the bot cross-references semantic project descriptions with image metadata to display the exact visual proof needed to validate the answer .

A major design pivot involved the layout. My initial prototype used a "push" layout that disrupted the portfolio view. Through rapid iteration, I moved to a non-obtrusive overlay. This reflected a core design value: AI should feel like a helpful guide, not a dominant UI element. It maintains a presence through emotive states without hijacking the reading experience.

Peter Bot successfully turned my portfolio into a living conversation. Beyond the tech stack (Next.js, Vector DBs, RAG), the project demonstrates my ability to manage a complex AI product from concept to deployment. It proves that even in a technical landscape of embeddings and prompt engineering, personality and UX are the keys to successful AI adoption .