Building an AI Chatbot for My Portfolio with Google Gemini API

When building my portfolio, I wanted something that would stand out and showcase my ability to integrate modern AI technologies. Instead of a static "About Me" section, I built an interactive AI chatbot using Google's Gemini API.

Why an AI Chatbot?

Traditional portfolios are passive - visitors read and leave. An AI chatbot makes the experience:

• Interactive: Visitors can ask specific questions
• Personalized: Answers adapt to what they're interested in
• Memorable: Much more engaging than static text
• Demonstrative: Shows I can integrate AI APIs

Architecture Overview

The chatbot consists of three main components:

1. Frontend (React Component)

A chat interface with typing animation, bilingual support (English/Arabic with RTL), and a clean UI.

2. Backend API (Next.js API Route)

Handles requests, calls Gemini API, and stores conversations in MongoDB.

3. Database (MongoDB)

Stores all questions and answers for analytics and continuous improvement.

Implementation Highlights

Frontend Features

The React component includes:

• Real-time typing animation effect
• Bilingual support with automatic language detection
• RTL layout support for Arabic
• Loading states and error handling
• Responsive design with dark mode support

Backend Integration

The API route handles:

• Request validation and sanitization
• Gemini API calls with custom prompt templates
• MongoDB storage for analytics
• Error handling and fallback responses
• Rate limiting to prevent abuse

Prompt Engineering

I created a detailed prompt template that includes:

• My work experience at 3Pillars and bld.ai
• Educational background from GUC
• Technical skills and expertise
• Project portfolio
• Instructions for tone and format

Key Features

1. Typing Animation

Instead of showing the full response instantly, I added a character-by-character typing effect to make it feel more natural and engaging.

2. Bilingual Support

The chatbot detects if the question is in Arabic and adjusts:

• Text direction (RTL for Arabic)
• Response language
• UI layout

3. Context-Aware Responses

By providing detailed context in the prompt template, Gemini gives accurate, specific answers about my:

• Work experience
• Technical skills
• Projects
• Education
• Achievements

Challenges and Solutions

Challenge 1: Cost Management

Problem: Gemini API has costs per token.

Solution:

• Set maxOutputTokens limit to control response length
• Store questions and answers in database to analyze patterns
• Could implement caching for frequently asked questions

Challenge 2: Response Quality

Problem: Sometimes AI gives generic or inaccurate answers.

Solution:

• Detailed, structured prompt template
• Explicit instructions on tone and format
• Regular review and refinement of the prompt

Challenge 3: Rate Limiting

Problem: Users could spam the API.

Solution:

• Client-side button disable during loading
• Backend rate limiting per IP address
• Cooldown period between requests

Analytics Insights

After collecting data, I analyzed the stored questions to understand what visitors care about most:

Most Common Topics:

1. Technical skills and expertise
2. Work experience at previous companies
3. Project portfolio and achievements
4. Education and academic background

This data helps me understand what recruiters and visitors care about most!

Future Improvements

Ideas I'm considering:

• Conversation History: Show past Q&A in the session
• Suggested Questions: Prompt users with common questions
• Voice Input: Speech-to-text for questions
• Follow-up Context: Remember conversation context for follow-ups
• A/B Testing: Test different prompt templates for better responses

Performance and Cost

Running for several months:

• API Costs: Very affordable with Gemini's pricing
• MongoDB Atlas: Free tier sufficient for current usage
• Response Time: Average 2-3 seconds
• User Satisfaction: Positive feedback from visitors

Tech Stack

• Frontend: React with Next.js
• AI: Google Gemini API (gemini-2.5-flash model)
• Database: MongoDB with Mongoose
• Styling: Tailwind CSS
• Deployment: Vercel

Conclusion

Building this AI chatbot was one of the best decisions for my portfolio. It:

• Makes me stand out from other candidates
• Demonstrates AI integration skills
• Provides valuable analytics data
• Creates an engaging user experience

If you're building a portfolio, I highly recommend adding an AI element. It's easier than you think and makes a huge impression!

---

Try it yourself: Visit my portfolio and ask the chatbot anything about my experience!

Questions? Feel free to reach out through the contact form!