Peter Bot

Peter Bot started as a joke: could a chatbot act as the interface to my portfolio?

What began as a lighthearted experiment turned into a fully working system powered by retrieval-augmented generation (RAG), custom image search, and conversation-aware follow-up prompts. Visitors can ask natural-language questions about my work, and get contextually relevant responses, complete with suggested images.

Oh, and there's a CSS-only sidekick called FlipBot that reacts to interactions with emotional emoji flips, just because I could.

The first version of Peter Bot injected static Q&A pairs into a single prompt. It worked... until it didn’t. As the number of projects grew, I hit token limits, and the bot became sluggish and unpredictable.

That constraint forced a rebuild using vector embeddings and dynamic retrieval. Instead of hardcoding all project context, the bot now pulls in just what it needs, when it needs it. Making it both faster and more accurate.

Concept, content, design, and implementation. I:

• Wrote dozens of Q&A pairs for each project

• Embedded and stored them in a vector database

• Built a RAG-based pipeline to retrieve relevant answers dynamically

• Created a system for image-based retrieval using caption metadata

• Designed and developed the interface, including FlipBot, a CSS-only bot with emotion-based animations triggered by user activity

Here’s one of the actual Q&A pairs from the system ,from the Superland project:

Q: What was your role in Superland?

A: I was the CTO and co-founder, but the role was broader than the title. I led the technical architecture (Node.js backend, React Native app), designed systems for offline-first use, and collaborated heavily on product design and storytelling mechanics. Basically, if it touched code or logic, I was involved.

These Q&As are chunked, embedded, and retrieved based on semantic similarity to the user’s question.

The design has two layers:

1. Conversational UX Peter Bot parses user intent, pulls relevant project chunks, and synthesizes an answer.

2. Emotive UI FlipBot sits in the corner and reacts to activity: clicks, typing, hovering. It’s all CSS + motion.js, with no JavaScript-based state machine.

FlipBot is inspired by retro flip clocks, and a very 80s color scheme.

Before Peter Bot could respond intelligently, I focused on the interface itself, experimenting with how a chatbot could sit alongside a portfolio in a way that felt natural.

The first version used a layout where the chat panel physically pushed the portfolio content to the side. It worked, but it disrupted the reading experience and created awkward transitions, especially on smaller screens.

After several prototypes and wireframes, I pivoted to a lighter-weight overlay that feels conversational without taking over the screen. It allows the bot to feel “present” without being in the way, more like a helpful guide than a dominant UI element.

This wasn’t just a layout decision. It reflected a broader design value:

tools should feel like companions, not interruptions.

Peter Bot uses a retrieval-augmented generation (RAG) setup with multiple embedding pipelines, each designed to capture a different layer of context across my portfolio.

Embedding Flow

• Q&A content

Manually written Q&A pairs are chunked by intent (e.g. roles, challenges, outcomes) and embedded with project-level metadata. These are the bot’s primary knowledge source for detailed questions.

• Project summaries

Each project has a high-level description that gets embedded and retrieved for introductory or general queries like “What’s Superland about?”

• Visual captions

Key images are captioned and embedded, enabling the bot to retrieve relevant visuals when a question references something like “the interface” or “final prototype.”

All of this is stored in a vector database and retrieved dynamically at runtime based on semantic similarity to the user’s input.

The result: fast, relevant, and layered responses that scale as I add new work, without running into prompt length limits or brittle logic.

• Prompt length: Prompt injection broke at scale, switched to RAG

• Context relevance: Early retrievals were noisy, refined chunking and added metadata filters

• Follow-ups: Static UX felt flat, added RAG-based follow-up questions seeded by prior exchanges

• UI personality: Wanted it to feel playful, not corporate, FlipBot was born from that mindset

Proud of:

• Turning a playful idea into a working, complex system

• Designing a friendly AI interface that still works with real data

• Learning the ins and outs of RAG, semantic search, and dynamic image matching

Still on my mind:

• Adding memory/context windows for richer follow-up chains

• Making FlipBot respond more naturally to conversation sentiment