Personal_Portfolio_Website — Next.js 作品集模板

SHA-256: 9b816b745c07a6d8aec9b27dd122256a07b38bc8e669b9c1dad32ead9e3594af

2026-10-13T02:06:43.100Z

# Ayush Nathani - Personal Portfolio

A modern, high-performance portfolio website built with the latest web technologies. This project showcases my skills, featured projects, and professional background with a premium, motion-rich aesthetic.

[![Live Demo](https://img.shields.io/badge/-Live%20Demo-blue?style=for-the-badge)](https://personal-portfolio-website-srxo.vercel.app/)
[![Tech Stack](https://img.shields.io/badge/Next.js%2016-React%2019-black?style=for-the-badge&logo=next.js)](https://nextjs.org)
[![Aesthetics](https://img.shields.io/badge/Tailwind%204-Framer%20Motion-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com)

## 📸 Portfolio Walkthrough

### 1. Dynamic Hero Interface
<div align="center">
  <img src="public/portfolio-1.png" alt="Hero Section" width="100%">
</div>

*The landing page features a modern, motion-rich hero section with dynamic typography, introducing the core expertise in AI and Full-Stack Engineering.*

### 2. Professional Profile & Tech Stack
<div align="center">
  <img src="public/portfolio-2.png" alt="About and Skills" width="100%">
</div>

*A comprehensive overview of my professional background, paired with a visual grid highlighting proficiency in modern tools like Next.js, Python, and MongoDB Vector Search.*

### 3. Featured AI Projects
<div align="center">
  <img src="public/portfolio-3.png" alt="Projects Section" width="100%">
</div>

*A dedicated showcase of production-grade AI applications, complete with high-quality mockups, tech stack details, and links to live repositories.*

### 4. Interactive Contact Form
<div align="center">
  <img src="public/portfolio-4.png" alt="Contact Section" width="100%">
</div>

*A sleek, responsive contact section integrated with a database for reliable, real-time message delivery and seamless user communication.*

## 🚀 Key Features

- **Standard-Setting Tech Stack**: Built with **Next.js 16 (App Router)**, **React 19**, and **Tailwind CSS 4** for cutting-edge performance and developer experience.
- **Dynamic Theming**: Seamless switching between premium Light and Dark modes using `next-themes`.
- **Advanced Animations**: motion-driven UI using **Framer Motion**, including:
  - Custom scroll progress tracking.
  - Interactive magnetic effects for buttons and links.
  - Staggered entrance animations for refined reveal effects.
- **Responsive & Liquid Layout**: Optimized for every screen size, from mobile devices to ultra-wide displays.
- **Clean Console Technology**: Custom console noise suppression to filter out browser extension warnings for a distraction-free development experience.
- **Interactive Elements**: Real-time typewriter effects, scroll-native navigation, and high-performance image optimization.
- **Automated Inquiry System**: Fully integrated contact form using **Resend** for instant email notifications and **@libsql/client** for cloud-ready data persistence.
- **Secure Admin Dashboard**: A private repository of all messages with magnetic UI actions (Reply/Delete) and secure password protection.

## 🛠️ Performance Tech Stack

- **Framework**: [Next.js 16 (App Router)](https://nextjs.org/)
- **UI Logic**: [React 19](https://react.dev/)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
- **Animations**: [Framer Motion 12](https://www.framer.com/motion/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Icons**: [Heroicons](https://heroicons.com/)
- **Deployment**: [Vercel](https://vercel.com)

## 📁 Featured Projects

### [1. TurfGrid AI – Smart City Command Center](https://github.com/ayus1234/turfgrid-ai)
![TurfGrid AI Dashboard](public/turfgrid.png)
*An autonomous agent swarm that protects cities and businesses from the logistical chaos of global sporting surges.*
- **Tech Stack**: Next.js, MongoDB Vector Search, FastAPI, Python, Gemini AI, Groq.
- **Key Features**: Multi-agent orchestration, high-availability Gemini-to-Groq failover, autonomous state-altering actions, real-time API integrations, and multi-tenant operational dashboard.

### [2. ReelForge AI – Autonomous Creative Studio](https://github.com/ayus1234/reelforge-ai)
![ReelForge AI Dashboard](public/reelforge.png)
*A complete 6-agent AI pipeline that automatically turns ideas into export-ready short videos.*
- **Tech Stack**: Next.js, TypeScript, Runway API, ElevenLabs, FFmpeg, React.
- **Key Features**: Auto-writes viral scripts, directs cinematic scenes, generates storyboards, animates clips, mixes audio, and scores viral potential.

### [3. Email Triage AI – Command Center](https://github.com/ayus1234/ai-email-triage-agent-openenv)
![Email Triage AI Dashboard](public/email-triage.png)
*A production-grade multi-agent AI system optimized for live email triage and workflow automation.*
- **Tech Stack**: Python, FastAPI, Groq, Llama-3.1, OpenEnv, Docker.
- **Key Features**: Autonomous classification, empathetic dynamic replying, secure department routing with transparent chain-of-thought and privacy masking.

## 🎓 About & Background

I am a Computer Science student currently pursuing my **MCA at IIT Patna & IIIT Ranchi**. I am a full-stack developer and AI engineer passionate about building production-grade, multi-agent AI systems, sophisticated web applications, and autonomous agents that solve complex real-world problems.

### 📜 Certifications
- **[Microsoft Azure AI Essentials](https://www.linkedin.com/learning/certificates/0e1255d6fd94595e6bb5b00fd22ec8b8e1665d920371672c5394b546c613e000?trk=share_certificate)**: Workloads and Machine Learning on Azure.
- **[Gemini for Google Workspace](https://drive.google.com/file/d/1HUTpGLIfTLFSSbMnlv1hV-VWTjrUumG9/view?usp=sharing)**: Leveraging generative AI for productivity.

## 🏁 Getting Started

### Prerequisites
- Node.js 18+ 
- npm or yarn

### Installation
1. Clone the repository
2. Run `npm install`
3. Create a `.env` file in the root and add the following variables:

```env
# Cloud SQLite (Turso)
TURSO_DATABASE_URL=libsql://your-db-url.turso.io
TURSO_AUTH_TOKEN=your_auth_token_here

# Admin Dashboard
ADMIN_PASSWORD=your_secure_password

# Email (Resend)
[email protected]
RESEND_API_KEY=re_your_api_key
```

### Development
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) to view the application in development mode.

## 📦 Deployment

Optimized for deployment on **Vercel**. 

### Important Steps for Production:
1. **Database**: Create a free account at [Turso](https://turso.tech) and create a new database.
2. **Environment Variables**: Add the 5 keys mentioned in the `.env` section to your Vercel Project Settings.
3. **Build**: Ensure you have `@react-email/render` installed (already included in `package.json`).
4. **Deploy**: Simply push your code to GitHub and Vercel will handle the rest.

---
Built with 💙 by [Ayush Nathani](https://github.com/ayus1234)