How I Built an AI-Powered Portfolio Assistant
The Portfolio Chatbot is a site-wide AI assistant that appears on every page of this portfolio. It's designed to answer questions about my skills, projects, experience, and technical expertise in real-time, providing visitors with an interactive way to explore my work.
This project showcases my ability to integrate AI technologies into production applications, combining frontend React components with backend API architecture and database systems.
Understands portfolio content and provides accurate, relevant answers about skills, projects, and experience.
Tracks conversations in MySQL database for improved context and personalized follow-up responses.
Automatically stays updated with portfolio changes, ensuring responses reflect current information.
Instant responses with smooth animations, typing indicators, and suggested questions for better UX.
Glassmorphism design that matches portfolio aesthetic, fully responsive across all devices.
Built with security best practices, error handling, and optimized for deployment.
Managing complex chat state including messages, loading indicators, scroll behavior, and user input while maintaining smooth performance.
Implemented React hooks (useState, useEffect, useRef) with proper memoization. Used refs for scroll management and input focus, ensuring 60fps animations and responsive feel.
Creating intelligent responses that understand portfolio context without constant LLM API calls, balancing accuracy with cost and latency.
Built a hybrid approach: rule-based system for common queries with portfolio knowledge base, prepared for future LLM integration. Implemented smart keyword matching and response templating.
Designing a MySQL schema that supports conversation history, portfolio data sync, and future vector embeddings while maintaining query performance.
Created normalized schema with proper indexes, JSON metadata fields for flexibility, and foreign key relationships. Designed for horizontal scaling with session-based partitioning strategy.
Connecting Next.js frontend with separate Python backend while handling CORS, session management, and error scenarios gracefully.
Implemented proper CORS configuration, session ID generation, fallback responses for API failures, and comprehensive error handling with user-friendly messages.
Chat message handling with TypeScript:
const handleSendMessage = async () => {
const userMessage: Message = {
id: Date.now().toString(),
content: inputValue.trim(),
sender: 'user',
timestamp: new Date()
};
setMessages(prev => [...prev, userMessage]);
setIsLoading(true);
const response = await fetch('/api/chatbot', {
method: 'POST',
body: JSON.stringify({ message: inputValue })
});
const data = await response.json();
// Handle response...
};Conversation storage with MySQL:
def store_conversation(session_id, message, response):
connection = get_db_connection()
cursor = connection.cursor()
query = """
INSERT INTO conversations
(session_id, message, response, sender)
VALUES (%s, %s, %s, %s)
"""
cursor.execute(query, (session_id, message, response, 'user'))
connection.commit()The chatbot is available on every page of this portfolio. Click the floating button in the bottom-right corner to start a conversation and ask questions about my work!
Look for the chat button →