# Building an AI-Powered Portfolio with React 19, Vite, and Gemini 2.5 Flash


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:
1. Answer questions about my experience and skills.
2. Control the UI (e.g., scroll to specific sections, filter projects, or toggle themes).
3. 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-markdown` for 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:

```typescript
// 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:

```typescript
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](https://github.com/Dev-Somesh/Somesh-Bhardwaj-Portfolio-Ai-Chatbot) or chat with the AI on my live portfolio at [someshbhardwaj.me](https://someshbhardwaj.me)!*