I've always found traditional developer portfolios a bit... boring. I wanted to inject some life into mine, so I built a personal AI assistant that can answer questions on the spot.

So I started thinking – how could I make my portfolio truly interactive? That's when it hit me: an AI assistant! I decided to give Google's Gemini 1.5 Flash a try, and after feeding it all the info about my background and projects, it can now answer questions from visitors about my expertise, current endeavors, and even my future goals, instantly.

Why just read about my skills when you can ask about them? Now, folks can directly inquire, "Hey, what are your strengths in frontend development?" or simply ask for my resume, and it'll appear instantly. This transforms the experience, making it far more interactive than simply scanning a lengthy resume.

Nobody wants a chatbot that just makes stuff up, right? That's why I built this one to only pull from the "ABOUT_ME" information I fed it and a really precise prompt. It means it sticks to the absolute facts, so you won't ever encounter those dreaded AI "hallucinations.

How You Can Do the Same

Step 1: Get Your Gemini API Key

Alright, so the first step is getting access to Google's AI magic. You'll need a Gemini API key, which you can snag for free (at least at the time of writing this!) by heading over to Google AI Studio. Sign up or log in, and hit that "Create API key" button. It's generally less painful than configuring Webpack, which is always a win in my book.

Step 2: Build the API Route (I used Next.js 15, but you can pick your tech!)

For the backend, I decided to spin up a custom API route within my Next.js 15 setup. Now, you don't have to use Next.js for this part – feel free to use any backend technology you're comfortable with (like Express, Python Flask, Ruby on Rails, or whatever gets your gears turning!). This API route gives us fine-grained control over how we communicate with the Gemini API, allowing us to tailor the request and response exactly to our needs.

Before we dive deeper, let's take a peek under the hood. Here's a simplified version of the API route code I'm using in my Next.js application. As you can see, it's quite straightforward once you break it down:

import { GoogleGenerativeAI } from '@google/generative-ai';

const API_KEY = process.env.GEMINI_API_KEY;
const genAI = new GoogleGenerativeAI(API_KEY);

// All the details you want the AI to know about you
const ABOUT_ME = `
Ashish Gogula is a software engineer with experience in React, Next.js, Node.js and more.
He enjoys building clean UIs, AI-driven apps, and writing technical blogs about his projects.
...
`;

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

  if (!question) {
    return new Response(JSON.stringify({ message: 'Question is required.' }), { status: 400 });
  }

  const lowerCaseQuestion = question.toLowerCase().trim();

  // Handle specific keyword-based responses manually (like for "playlist" or "resume")
    if (lowerCaseQuestion.includes("playlist")) {
    return new Response(
      JSON.stringify({
        answer: "You can find Ashish's current music playlists here:",
        url: "/playlists",
        linkText: "music playlists",
      }),
      { status: 200 }
    );
  }

   
  if (lowerCaseQuestion.includes("resume")) {
    return new Response(
      JSON.stringify({
        answer: "Here's Ashish's resume:", 
        url: "/resume", 
        linkText: "Ashish's Resume",
      }),
      { status: 200 }
    );
  }


  try {
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

    const prompt = `
You are an AI assistant trained to answer questions about Ashish Gogula.
Only use the information provided below to generate responses.
If you don’t know the answer, say: "I don't have enough information to answer that."

Ashish’s Details:
${ABOUT_ME}

User’s Question: ${question}
Answer:
    `;

    const result = await model.generateContent(prompt);
    const response = await result.response;
    const text = response.text();

    return new Response(JSON.stringify({ answer: text }), { status: 200 });

  } catch (error) {
    console.error('Gemini API Error:', error);
    if (error.message.includes('API key')) {
      return new Response(JSON.stringify({ message: 'Check your API key.' }), { status: 401 });
    }
    return new Response(JSON.stringify({ message: 'Something went wrong.' }), { status: 500 });
  }
}

That ABOUT_ME constant is where the magic happens. It's essentially the knowledge graph for your personal AI, the sole source of truth it has about you. Be thoughtful about what you include here – think of it like prepping your AI for an interview; you've gotta give it all the key info it needs to shine!

The Prompt is where we truly direct Gemini's behavior. Notice that absolutely crucial instruction: "Only use the information provided below..." This is vital for ensuring the AI stays within the boundaries we've set and doesn't try to pull information from the wider internet (which, in this personalized context, we definitely don't want!).

Oh, and a quick heads-up: don't forget robust error handling! Especially around your GEMINI_API_KEY. You'll want to gracefully handle scenarios where the API key is missing or invalid to prevent any unexpected hiccups on your site.

Step 3: Designing the UI

On the frontend, I focused on creating a smooth and engaging user experience. For instance, the subtle "breathing" animation around the chat input helps draw the user's eye and signals that it's interactive. Oh, and it's fully responsive, too, so it looks great no matter what device you're on!

To make it even easier for visitors, I included pre-filled question categories with examples relevant to developers. This not only guides users on what they can ask but also showcases the kind of information the AI is equipped to provide. When you're brainstorming example questions, think about what a developer visiting your site might be curious about. Maybe stuff like, "What's your experience with React state management?" or "Any tricky parts when you were using Next.js 15?" Even asking about your testing approach could be interesting for them.

Final thoughts

Honestly, this whole AI portfolio thing has been an absolute blast to build. It's truly shown me how we can shake up the traditional online presence and make it way more interactive.

You can actually access this very AI right now, located in the bottom right corner of your screen! Just a heads-up, it's still actively under development, and I'm constantly cooking up and adding new features.

If you're itching for a fun side project that will genuinely make your portfolio stand out, then trust me, you should definitely give something like this a shot!