A modern, AI-powered portfolio showcasing my journey as a Software Engineer and AI/ML enthusiast
- Interactive Assistant — Ask questions about my experience, projects, and skills
- Google Gemini 2.5 Flash — Powered by the latest AI technology
- Preset Responses — Optimized responses to save API quota
- Tool Integration — Dynamic data retrieval for projects, skills, resume, and contact info
- Responsive Layout — Seamless experience across all devices
- Smooth Animations — Powered by Framer Motion
- Dark Mode Ready — Built with next-themes
- Radix UI Components — Accessible, customizable UI primitives
- About Me — Professional summary and personality traits
- Projects — Showcase of featured work with live demos and GitHub links
- Skills — Comprehensive technical skillset visualization
- Experience — Professional work history and internships
- Education — Academic background and achievements
- Contact — Multiple ways to connect
- Framework: Next.js 16.1.6 with App Router
- Language: TypeScript 5
- Styling: Tailwind CSS 4
- UI Components: Radix UI
- Animations: Framer Motion 12
- State Management: React 19 Hooks
- API Routes: Next.js API Routes
- AI SDK: @ai-sdk/google
- AI Model: Google Gemini 2.5 Flash
- Streaming: Vercel AI SDK with streaming support
- Package Manager: pnpm
- Linting: ESLint with Next.js config
- Formatting: Prettier with Tailwind plugin
- Deployment: Vercel with CI/CD
thekavishshah.github.io/
├── public/ # Static assets
│ ├── avatar.png # Profile picture
│ └── ...
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/
│ │ │ └── chat/ # AI chatbot API endpoint
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home page
│ ├── components/ # React components
│ │ ├── chat/ # Chatbot UI components
│ │ ├── ui/ # Reusable UI components
│ │ ├── projects/ # Project showcase
│ │ ├── skills/ # Skills section
│ │ └── ...
│ ├── lib/ # Utilities and configs
│ │ ├── config-loader.ts # Portfolio data loader
│ │ └── config-parser.ts # Data parser
│ └── types/ # TypeScript definitions
├── portfolio-config.json # Portfolio data (single source of truth)
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── package.json # Dependencies
- Node.js 20+
- pnpm (recommended) or npm/yarn
- Google Gemini API Key (Get one here)
-
Clone the repository
git clone https://github.com/thekavishshah/thekavishshah.github.io.git cd thekavishshah.github.io -
Install dependencies
pnpm install
-
Set up environment variables
cp .env.example .env.local
Then edit
.env.localand add your API key:GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here
-
Run development server
pnpm dev
-
Open http://localhost:3000 in your browser
pnpm build
pnpm startAll portfolio data is centralized in portfolio-config.json. Update this file to customize:
- Personal information
- Projects and experiences
- Skills and technologies
- Social links
- Chatbot personality and preset responses
- Resume details
The config is automatically parsed and used throughout the application.
This project is deployed on Vercel with automatic CI/CD.
Remember to add your environment variable:
GOOGLE_GENERATIVE_AI_API_KEYin Vercel project settings
The chatbot uses Google Gemini API with the following limits (free tier):
- 15 requests per minute
- 1,000 requests per day
- 250,000 tokens per minute
Preset responses are used for common questions to optimize API usage.
Found a bug or want to suggest an improvement? Feel free to open an issue or submit a pull request!
Kavish Shah
- 📧 Email: kshah77@asu.edu
- 💼 LinkedIn: shah-kavish
- 💻 GitHub: thekavishshah
- 🔗 LeetCode: thekavishshah
If you found this project helpful or interesting, please consider giving it a ⭐ on GitHub!
This project is open source and available under the MIT License.
Built with ❤️ using Next.js, TypeScript, and Google Gemini AI