How I Built My Portfolio Website with a Chatbot using Next.js

If you’ve ever built a portfolio website, you know how hard it is to make it feel personal — not just another static “about me” page. I wanted mine to be more than a showcase of projects; I wanted it to talk back. Literally.

That’s where the idea of building a chatbot into my portfolio came in.

The Idea

As a developer deeply interested in both frontend design and AI, I wanted to merge them into one project that felt alive.
I thought — what if visitors could just chat with my portfolio to learn about my skills, projects, or even my journey?

No more scrolling endlessly. Just a simple, “Hey, tell me about AlgoKeep,” and the chatbot handles the rest.

Stack used

Here’s what powered this build:

• Next.js → For server-side rendering and smooth routing

• Tailwind CSS → For fast, responsive design

• OpenAI Agents SDK → For the conversational AI layer

• Vercel → For hosting and performance optimization

Together, they gave me the flexibility to design, code, and ship without compromising performance.

Building the Chatbot

The chatbot in my portfolio is powered by OpenAI’s Agents SDK, which allows visitors to ask questions about my projects, skills, and experience.

Here’s a simple example of how I implemented it in a Next.js API route:

• We create a new Agent with a name, instructions, and a model.

• We receive the user message via the API and pass it to run(agent, message).

• The agent returns a response that we send back to the frontend for display in the chat widget.

import { Agent, run } from "@openai/agents";

export async function POST(req) {
const { message } = await req.json();

const agent = new Agent({
  name: "Portfolio Assistant",
  instructions: "Answer questions about my projects and skills in a friendly way.",
  model: "gpt-4o-mini",
});

const result = await run(agent, message);

return new Response(JSON.stringify({ reply: result.finalOutput }), {
  status: 200,
  headers: { "Content-Type": "application/json" },
});
}

Design Touch

I went for a minimal layout — neutral background, bold typography, and smooth motion.
The chatbot widget slides up elegantly, while the rest of the portfolio remains distraction-free.

I used Framer Motion for subtle animations, focusing on fluidity rather than flashiness.

Deployment and Optimization

Everything is deployed on Vercel, which integrates perfectly with Next.js.
I optimized images, lazy-loaded components, and ensured Core Web Vitals stayed in the green.

The final site not only loads fast but feels fast — even with real-time chatbot responses.

Key Takeaways

• Combine your strengths — frontend + AI can create something truly unique.

• UX isn’t just design; it’s how users interact with your content.

• The best portfolios don’t just show your skills — they demonstrate them.

Final Thoughts

This project taught me that portfolios can evolve from static pages into living, interactive experiences.
Instead of recruiters scrolling through another page, they get to talk to mine.

And honestly? Hearing my own chatbot say, “Hi! I'm Hitanshu. How may I help you?” never gets old.