About this chatbot

Rethinking the portfolio experience

Why I built it

I decided to create this bot from scratch rather than building a traditional portfolio to:

  • Illustrate how good content design and thoughtful AI implementation overlap

  • Surface actual performance feedback from my managers, stakeholders, and peers

  • Have fun learning new skills and playing around with different AI models and workflows

What it knows

The bot's knowledge base pulls from these sources:

  • All of my Google performance reviews from 2016 to 2025. Aside from removing names and NDA-protected information, the feedback is completely unedited.

  • Messages from peers and managers given to me when I was awarded peer bonuses, kudos, or spot bonuses at Google.

  • A "narrative resume" (I found writing my resume out like a story helped my chatbot answer more naturally).

To add some colour, I also included responses from a survey I sent some friends and a short personal bio. When I noticed these details surfacing too frequently, I added guardrails to my system prompt so this information is only retrieved for obvious personality related questions.

How I made it

  • Formatted my source material as structured markdown, chunked and embedded it using OpenAI's text embedding model, and stored the vectors in a Supabase database

  • I wrote system instructions that shape how the bot responds: tone, scope, and how it pulls from and cites my source material

  • I designed the widget's UI and interaction details (including layout, micro-interactions, and a hero-to-active-state transition) to feel polished. There's still more work I'd like to do in this area!

  • I built a backend API in Node.js, deployed it to Vercel, and embedded a custom chat widget into my Framer site

  • I used structured metadata and JSON-based data flows to translate content strategy and editorial rules into retrieval and ranking behaviour.

  • I sent it to some trusted testers and tracked their questions and responses in a table so I could monitor response quality and tweak things as needed

  • I used Claude Code and ChatGPT for implementation support and debugging throughout the project

Tools

Framer · Vercel · Supabase · OpenAI Embeddings · Node.js · GitHub · VS Code · Obsidian · ChatGPT · Claude Code

Keep in mind

Like any AI, my chatbot can make mistakes. If you spot an issue, I'd appreciate if you could reach out to let me know.