Stop Sending Static Resumes: How I Built a "Chat With My Resume" Bot (Next.js + RAG)

#nextjs #javascript #webdev #ai

Let’s be honest: recruiters spend about 6 seconds looking at your portfolio.

You spend weeks building a beautiful site, polishing your CSS, and optimizing your Lightouse score, only for most visitors to glance at the hero section and leave.

I wanted to change that. I wanted a portfolio that was active, not passive. I wanted a site that could answer questions like:

"What is his experience with TypeScript?"

"Has he ever worked with AWS?"

"Why should we hire him?"

So, I built a RAG-Powered AI Chatbot that "reads" my resume and answers questions in real-time. Here is how I built it (and how you can too).

The Architecture: Keeping it "Pure"
When I started, I looked at libraries like LangChain. While powerful, they felt like overkill for a simple portfolio bot. I didn't want 500MB of dependencies just to make an API call.

I decided to go with a "Pure Code" stack:

Frontend: Next.js 15 (App Router) for the UI.
Backend: Node.js (Express) to handle the API keys securely.
AI: OpenAI API (gpt-4o-mini) for the intelligence.
Logic: Custom RAG (Retrieval-Augmented Generation) pipeline.

The Challenge: Context & Streaming
Building a chatbot is easy. Building a chatbot that knows who you are is harder.

1. The "Brain" (RAG)

You can't just paste your whole resume into the prompt every time—it wastes tokens and money. Instead, I implemented a simple Vector Search logic.

The app loads my portfolio data (experience, skills, bio) on startup.
When a user asks a question, the system finds the most relevant "chunk" of text.
It feeds only that chunk to OpenAI with a system prompt like:

"You are an AI assistant for [Name]. Answer the recruiter's question using only the context provided below."

2. The "Typewriter" Effect (Streaming)

Nothing kills the vibe like waiting 5 seconds for a response. I wanted that "ChatGPT feel" where the text types out word-by-word.

To do this, I avoided standard REST responses and used Server-Sent Events (SSE). In Node.js, it looks a bit like this:

JavaScript

This ensures the user sees activity immediately, keeping them engaged.

The Result

Now, when a recruiter visits my site, they don't just scroll—they engage. They ask about my rates, my availability, and my tech stack. It turns a static monologue into a dynamic interview.

Want to add this to your portfolio?

If you want to build this yourself, I highly recommend looking into the OpenAI Node SDK and Server-Sent Events. It’s a great learning experience.

It’s a fully typed, production-ready starter kit:

✅ Pure RAG setup (No complex libraries).
✅ Pre-built Streaming UI (Next.js 15).
✅ Easy "Resume" Configuration.