As developers, our portfolio is often the first impression we make. Instead of just listing my skills and projects, I wanted visitors to experience what I can build. That's why I decided to rebuild my portfolio as an AI-powered interactive web experience.
In this post, I'll walk you through how I built my new high-performance portfolio using React 19, Vite, Tailwind CSS 4, and the incredible Google Gemini 2.5 Flash model.
The Vision: More Than Just a Website
My goal was to create a site that was not only fast and accessible but also highly interactive. I wanted an AI assistant that could:
- Answer questions about my experience and skills.
- Control the UI (e.g., scroll to specific sections, filter projects, or toggle themes).
- Act as an intelligent lead-capture tool.
The Tech Stack
I chose a stack optimized for speed and developer experience:
- Frontend Framework: React 19 & Vite
- Styling: Tailwind CSS 4 with custom CSS and glassmorphism design.
-
AI Integration: Google Gemini 2.5 Flash (via API) &
react-markdownfor formatting. - Visualizations: Recharts & custom SVGs for interactive skill radars.
- Deployment: Netlify (Functions + CDN) to securely handle API keys.
Integrating Google Gemini for Function Calling
The standout feature of this portfolio is the AI Chatbot. Instead of just returning text, the chatbot utilizes Function Calling.
When a user asks, "Show me your web development projects", or "Switch to dark mode", Gemini processes the intent. Using predefined tools, it returns a structured JSON response to call a specific frontend function.
Here is a simplified look at how I implemented this:
// Defining the tool schema for Gemini
const tools = [
{
name: "filterProjects",
description: "Filters the project gallery based on the user's request.",
parameters: {
type: "object",
properties: {
category: { type: "string" }
}
}
},
{
name: "scrollToSection",
description: "Scrolls the page to a specific section like 'Experience' or 'Contact'."
}
];
When the frontend receives this tool invocation, it triggers the necessary React state changes to filter the project gallery smoothly.
Dynamic UI and Animations
A chatbot is cool, but the aesthetics matter. I incorporated:
- Time-based ambient backgrounds that subtly shift colors.
- Glassmorphism design featuring backdrop blurs to keep text readable over dynamic elements.
- Scroll Spy Navigation and staggered animations using intersection observers.
All of this was achieved while maintaining WCAG 2.1 AA compliance. Accessibility shouldn't be an afterthought, even heavily customized UIs need screen-reader optimizations and keyboard navigation support.
Content Management Architecture
One of the best developer decisions I made was centralizing all the content into a single constants.ts file:
export const PROJECTS = [...];
export const EXPERIENCE = [...];
export const SKILL_CATEGORIES = [...];
Instead of hunting down specific components to update my resume or add a new project, I simply modify the data object. The entire UI trickles down from these constants, making the portfolio incredibly maintainable.
What's Next?
The portfolio is live, but software is never really "finished." My roadmap includes:
- Migrating the server-side chatbot logic to n8n for more complex workflow automation.
- Enhancing lead capture directly into Google Sheets using Apps Script (already underway!).
- Expanding end-to-end testing with Playwright.
Building this was a fantastic journey merging modern frontend performance with cutting-edge AI integrations. If you're looking to stand out, I highly recommend finding creative ways to weave LLMs into your personal projects.
Feel free to explore the code on my GitHub or chat with the AI on my live portfolio at someshbhardwaj.me!
This article was originally published on my blog at someshbhardwaj.me.
Top comments (0)