🔗 ➡️ View Live Demo — sagarxdev.netlify.app

---

📌 Overview

A modern, full-featured personal developer portfolio built with Next.js 16, React 19, and TypeScript. The portfolio dynamically fetches live GitHub data, features a 3D interactive background powered by Three.js, an integrated AI Assistant, and a secure Admin Dashboard — all deployed on Netlify.

---

✨ Features

Feature	Description
🌐 Live GitHub Integration	Fetches real-time profile & repositories via GitHub API with ISR (5-min revalidation)
🎮 3D Interactive Background	Three.js powered animated 3D scene & globe
🤖 AI Assistant	Built-in AI assistant for visitor interaction
🗂️ Project Showcase	Cards with modals displaying live project details
🔐 Admin Dashboard	JWT-secured admin panel for content management
📱 Fully Responsive	Mobile-first design across all screen sizes
⚡ ISR Caching	Smart fallback static data when GitHub API is unavailable

---

🛠️ Tech Stack

Core

Styling

3D & Visuals

Auth & Security

Deployment

---

🗂️ Project Structure

PORTFOLIO/
├── app/
│   ├── admin/          # Secure admin dashboard (JWT protected)
│   ├── api/            # Next.js API routes
│   ├── layout.tsx      # Root layout
│   └── page.tsx        # Home page (GitHub data fetching + ISR)
├── components/
│   ├── PortfolioClient.tsx     # Main portfolio UI
│   ├── AIAssistant.tsx         # AI chat assistant
│   ├── Background3D.tsx        # Three.js animated background
│   ├── Globe3D.tsx             # Interactive 3D globe
│   ├── ProjectCard.tsx         # Project display card
│   ├── ProjectModal.tsx        # Detailed project modal
│   └── AdminDashboardClient.tsx
├── lib/
│   └── github.ts       # GitHub API integration
├── data/               # Static fallback data
└── public/             # Static assets

---

🚀 Projects Showcased

Project	Tech	Description
QuickBite	JS, MERN, Stripe	Full food delivery app with JWT auth & Stripe payments
SmartScribe	JS, OpenAI, MERN	AI study assistant — summaries, flashcards & quizzes
ChatWave	JS, Socket.io, MERN	Real-time chat with group channels & typing indicators
Quill	HTML, CSS, JS	Minimal journaling app with category-based log system
Brick Breaker	Java, AWT/Swing	Desktop game with collision physics & dynamic levels
WeatherForecast	HTML, CSS, JS	Live weather dashboard using Weather API

---

⚙️ Getting Started

Prerequisites

• Node.js v18+
• npm / yarn / pnpm

Installation

# Clone the repository
git clone https://github.com/SagarXdev23/MY_PORTFOLIO.git
cd MY_PORTFOLIO

# Install dependencies
npm install

Environment Variables

Create a .env.local file in the root directory:

GITHUB_TOKEN=your_github_personal_access_token
ADMIN_USERNAME=your_admin_username
ADMIN_PASSWORD=your_admin_password
JWT_SECRET=your_jwt_secret_key

Run Locally

npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm run start

---

🌐 Deployment

This project is deployed on Netlify using the @netlify/plugin-nextjs adapter.

Configure the following in your Netlify dashboard:

• Build command: npm run build
• Publish directory: .next
• Environment variables: Same as .env.local

---

📬 Connect

---