How I Built the AI Chatbot on My Portfolio

When I was redesigning my portfolio, I kept coming back to one question:

**How do I help someone understand seven years of work in five minutes?**

Hiring managers are busy. Recruiters are even busier. Even with well-crafted case studies, most people don't have time to read every project before an interview. I wanted my portfolio to feel less like a static website and more like a conversation.

So I built an AI chatbot.

Not because AI is trendy, but because it solved a real user problem while giving me the opportunity to learn the technical side of shipping an AI-powered product.

Starting with the user
Like any product, the project started with a user problem instead of a technical solution.
The problem wasn't that my portfolio lacked information. It was the opposite. There was too much information spread across multiple case studies, project pages, and experience sections.

What if someone wanted to know:

* What kind of leader am I?
* Have I worked on marketplaces outside of ticketing?
* What's my favorite project?
* How do I approach experimentation?
* Why am I looking for my next role?

Instead of forcing visitors to hunt for those answers, I wanted them to simply ask.

Designing an AI experience
Designing the chatbot felt similar to designing any other product.

I started by mapping the questions recruiters and hiring managers have asked me during interviews, then grouped them into themes like leadership, collaboration, experimentation, marketplaces, AI, accessibility, and technical execution.

From there, I designed the chatbot's personality and response guidelines. I wanted every answer to sound like me: approachable, confident, concise, and honest. The goal wasn't to just generate responses. It was creating consistency between my portfolio, interviews, and professional experience.

The most challenging design problem wasn't the interface. It was conversation design.

Prompt engineering became an exercise in UX writing. Every iteration was about improving clarity, reducing ambiguity, and making sure the AI represented my experience accurately (while not maxing out on tokens).

Learning the technical side
Although I'm a product designer, I wanted to understand enough of the implementation to build something I could confidently deploy.

The chatbot uses Claude through Anthropic's API. I built the frontend integration with HTML and JavaScript, then created a secure backend using Cloudflare Workers so my API key never lives in the browser.

Here's the flow:

1. A visitor asks a question.
2. My website sends the request to a Cloudflare Worker.
3. The Worker securely authenticates with the Claude API.
4. Claude generates a response using the prompt I've designed.
5. The answer is returned to the portfolio in real time.

I also learned about API security, CORS, environment secrets, deployment, and how frontend and backend services communicate. It wasn't about becoming a software engineer. It was about understanding enough of the stack to ship a secure product.

AI as a design partner
I treated AI like a senior engineering partner. I used it to help generate code, troubleshoot bugs, explain unfamiliar concepts, and speed up development.

That experience reinforced something I believe will become increasingly important for designers: knowing how to collaborate with AI.

The value isn't memorizing syntax. It's asking better questions, validating solutions, understanding tradeoffs, and knowing when to iterate.

Challenges
The biggest technical challenge was security.

My first implementation attempted to call Claude directly from JavaScript. While functional, it immediately exposed my API key inside the browser, making it accessible to anyone using Developer Tools.

To solve this, I introduced Cloudflare Workers as a lightweight backend proxy.

That decision allowed me to:

• Store API keys securely using encrypted environment secrets

• Configure CORS so only my portfolio domain could access the endpoint

• Separate authentication from the client application

• Deploy backend changes independently from the frontend

  
  

I also gained hands-on experience with REST APIs, HTTP requests, deployment workflows, environment configuration, browser security, and the communication between frontend and backend services.

The goal wasn't to become a software engineer. It was to understand enough of the stack to make better product decisions and collaborate more effectively with engineers.

What I learned
This project reminded me that great products don't start with technology. They start with people.

The chatbot isn't the most technically complex thing I've built, but it represents something I'm excited about: using AI to create better user experiences.

As product designers, we don't need to become machine learning engineers to build meaningful AI products. We need to understand the capabilities, the limitations, and how to design experiences that make the technology genuinely useful.

For me, this chatbot is more than a portfolio feature. It's a small example of how I like to work: identify a real problem, learn what's needed to solve it, collaborate across disciplines, and keep iterating until the experience feels right.