🚀 Gaurav Kumar Yadav - Developer Portfolio

Python Developer | AI & Data Science | Full Stack Web Development

Student Developer from Lucknow, India 🇮🇳 | Open for Internships & Freelance Projects

🔗 View Live Portfolio →

🎭 Access Admin Panel →

✨ Key Features

🎨 Modern UI/UX	Beautiful gradient designs with smooth animations
📱 Fully Responsive	Perfect experience on mobile, tablet, and desktop
⚡ Lightning Fast	Optimized with Vite for instant loading
📬 Contact System	Working contact form with MongoDB storage
🔍 SEO Ready	Optimized for Google and all search engines
� Admin Panel	Fast & secure dashboard to manage database
�🌙 Dark Theme	Eye-friendly dark mode design
🔒 Secure	Input validation, rate limiting, and security headers
🎯 Dynamic Pages	Home, About, Skills, Projects, Contact, Links

🛠️ Built With

🎨 Frontend	⚙️ Backend
🔒 Security	🚀 Deployment

🚀 Quick Start

Prerequisites

Node.js 18+
MongoDB database
Git

Installation

1️⃣ Clone the repository

git clone https://github.com/ggauravky/Dev-Portfolio.git
cd Dev-Portfolio

2️⃣ Install frontend dependencies

npm install

3️⃣ Install backend dependencies

cd backend
npm install
cd ..

4️⃣ Setup environment variables

Create .env in root:

VITE_API_URL=http://localhost:5000

Create backend/.env:

MONGODB_URI=your_mongodb_connection_string
PORT=5000
NODE_ENV=development
FRONTEND_URL=http://localhost:5173

5️⃣ Run the project

# Start backend (from backend folder)
cd backend
npm start

# Start frontend (from root folder)
npm run dev

🎉 Open http://localhost:5173 in your browser!

📁 Project Structure

Dev-Portfolio/
│
├── 📂 src/                      # Frontend source code
│   ├── 📂 components/           # Reusable components
│   │   ├── Navbar.jsx          # Navigation bar
│   │   ├── Navbar.css          # Navbar styles
│   │   ├── Footer.jsx          # Footer component
│   │   └── Footer.css          # Footer styles
│   ├── 📂 pages/               # Page components
│   │   ├── Home.jsx            # Home page
│   │   ├── About.jsx           # About page
│   │   ├── Skills.jsx          # Skills showcase
│   │   ├── Projects.jsx        # Projects portfolio
│   │   ├── Blog.jsx            # Blog listing
│   │   ├── Contact.jsx         # Contact form
│   │   ├── Links.jsx           # Social links
│   │   ├── Privacy.jsx         # Privacy policy
│   │   ├── Terms.jsx           # Terms of service
│   │   ├── NotFound.jsx        # 404 page
│   │   └── *.css               # Page-specific styles
│   ├── 📂 data/                # Static data
│   │   └── blogsData.js        # Blog content
│   ├── 📂 hooks/               # Custom React hooks
│   │   └── useSEO.jsx          # SEO optimization
│   ├── App.jsx                 # Main app component
│   ├── main.jsx                # Entry point
│   └── index.css               # Global styles
│
├── 📂 backend/                  # Backend source code
│   ├── 📂 controllers/          # Request handlers
│   │   ├── contactController.js    # Contact form handler
│   │   └── newsletterController.js # Newsletter handler
│   ├── 📂 models/              # Database schemas
│   │   ├── Contact.js          # Contact schema
│   │   └── Newsletter.js       # Newsletter schema
│   ├── 📂 routes/              # API routes
│   │   ├── contactRoutes.js    # Contact endpoints
│   │   └── newsletterRoutes.js # Newsletter endpoints
│   ├── 📂 middleware/          # Custom middleware
│   │   ├── validator.js        # Input validation
│   │   └── rateLimiter.js      # Rate limiting
│   ├── 📂 config/              # Configuration
│   │   └── database.js         # MongoDB setup
│   └── server.js               # Express server
│
├── 📂 public/                   # Static assets
│   ├── 📂 images/              # Image assets
│   │   ├── 📂 blogs/           # Blog images
│   │   └── 📂 projects/        # Project images
│   ├── robots.txt              # SEO crawlers
│   └── sitemap.xml             # Site structure
│
├── index.html                   # HTML template
├── package.json                 # Frontend dependencies
├── vite.config.js              # Vite configuration
├── tailwind.config.js          # Tailwind setup
├── postcss.config.js           # PostCSS configuration
└── vercel.json                 # Vercel config

🌐 Deployment Guide

Deploy Frontend to Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Or push to GitHub and import in Vercel dashboard

Environment Variables on Vercel:

VITE_API_URL → Your backend URL (without trailing slash)

Deploy Backend to Render

Create new Web Service
Connect your GitHub repo
Build command: npm install
Start command: node server.js
Add environment variables:
- MONGODB_URI
- FRONTEND_URL
- PORT
- NODE_ENV=production

📄 API Documentation

Endpoints

Method	Endpoint	Description
GET	`/health`	Check server status
POST	`/api/contact`	Submit contact form

POST /api/contact

Request Body:

{
  "name": "John Doe",
  "email": "john@example.com",
  "subject": "Hello",
  "message": "Your message here"
}

Response:

{
  "success": true,
  "message": "Message sent successfully!",
  "contactId": "507f1f77bcf86cd799439011"
}

🎭 Admin Panel

🎯 The Problem

Managing portfolio data through MongoDB directly or basic tools is:

❌ Slow - Waiting for database queries to load
❌ Inefficient - No proper filtering or search capabilities
❌ Clunky - Poor user experience for data management
❌ Time-consuming - Manual data operations take forever

✨ The Solution

A modern, blazing-fast admin panel that gives you:

✅ Instant Access - View all contact messages and newsletter subscriptions in seconds
✅ Smart Filtering - Powerful search, sort, and filter capabilities
✅ Full Control - Complete CRUD operations with intuitive UI
✅ Professional Dashboard - Beautiful analytics and data visualization
✅ Secure - JWT-based authentication with protected routes

🚀 Admin Panel Features

Feature	Description
📊 Dashboard	Real-time analytics and statistics
💬 Contact Management	View, filter, and manage contact submissions
📧 Newsletter	Manage newsletter subscriptions
🔍 Search & Filter	Advanced search across all data
🔐 Authentication	Secure JWT-based login system
📱 Responsive	Works perfectly on all devices
⚡ Fast	Optimized performance for instant data access

🎭 Access Admin Panel →

🔒 Security Features

✅ Input validation with express-validator
✅ Rate limiting (100 requests per 15 minutes)
✅ MongoDB injection prevention
✅ XSS protection with Helmet
✅ CORS configuration
✅ Secure HTTP headers
✅ Data sanitization

📈 Performance Metrics

Metric	Score
🚀 Performance	95+
♿ Accessibility	100
💡 Best Practices	100
🔍 SEO	100
⚡ First Contentful Paint	< 1.5s
🎯 Time to Interactive	< 3s

🎨 Color Palette

Background:   #0f172a  /* Slate 900 */
Text:         #e2e8f0  /* Slate 200 */
Primary:      #3b82f6  /* Blue 500 */
Secondary:    #8b5cf6  /* Purple 500 */
Accent:       #06b6d4  /* Cyan 500 */

🤝 Contributing

Contributions make the open source community amazing! Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information.

👨‍💻 Author