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.