🚀 Vetha Insights — Personal Portfolio & Technical Blog

A modern, full-stack personal portfolio and technical blog built with React, Express.js, and MongoDB. Features an AI-powered chatbot, admin dashboard for blog management, GitHub project integration, and a sleek dark-themed UI.

---

✨ Features

🎨 Frontend (React + Vite)

• Home — Hero section with animated intro and social links
• About — Professional bio and background
• Skills — Interactive skill visualization
• Experience — Timeline of professional experience
• Projects — GitHub-integrated project showcase
• Blog — Markdown-rendered technical blog with categories & tags
• Certifications — Professional certifications display
• Resume — Embedded PDF resume viewer with download option
• Contact — Email contact form with SMTP integration
• Admin Dashboard — Protected admin panel for blog CRUD operations
• AI Chat Widget — Floating AI chatbot powered by Gemini API (via Pollinations fallback)
• Dark Mode — Elegant slate-dark theme with smooth animations
• SEO Optimized — Open Graph meta tags, semantic HTML, proper heading structure

⚙️ Backend (Express.js + MongoDB)

• Authentication — JWT-based admin login with bcrypt password hashing
• Blog API — Full CRUD for blog posts (create, read, update, delete)
• Contact API — Email dispatch via Nodemailer (Gmail SMTP)
• GitHub API — Fetches & displays public repos from GitHub
• AI API — Proxies requests to AI services for the chatbot
• Admin Seeding — CLI script to seed initial admin credentials

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 18, Vite, TailwindCSS, Framer Motion, React Router v6
Backend	Node.js, Express.js, Mongoose (MongoDB)
Auth	JSON Web Tokens (JWT), bcryptjs
Email	Nodemailer (Gmail SMTP)
AI	Gemini API / Pollinations AI (fallback)
Icons	Lucide React
Fonts	Inter, Outfit (Google Fonts)

---

📁 Project Structure

Personal-Blog/
├── backend/
│   ├── config/
│   │   └── db.js              # MongoDB connection
│   ├── middleware/
│   │   └── auth.js            # JWT authentication middleware
│   ├── models/
│   │   ├── Blog.js            # Blog post schema
│   │   └── User.js            # User schema
│   ├── routes/
│   │   ├── aiRoutes.js        # AI chatbot endpoints
│   │   ├── authRoutes.js      # Login / register endpoints
│   │   ├── blogRoutes.js      # Blog CRUD endpoints
│   │   ├── contactRoutes.js   # Contact form email endpoint
│   │   └── githubRoutes.js    # GitHub repos endpoint
│   ├── scripts/
│   │   └── seedAdmin.js       # Admin seeding script
│   ├── services/
│   │   └── aiService.js       # AI provider logic
│   ├── .env.example           # Environment variable template
│   ├── package.json
│   └── server.js              # Express app entry point
│
├── frontend/
│   ├── public/
│   │   ├── profile.jpeg       # Profile photo
│   │   ├── resume.pdf         # Downloadable resume
│   │   └── vite.svg           # Vite favicon
│   ├── src/
│   │   ├── assets/            # Static assets (SVGs)
│   │   ├── components/
│   │   │   ├── AIBotWidget.jsx # Floating AI chatbot
│   │   │   ├── BlogCard.jsx   # Blog post card
│   │   │   ├── Footer.jsx     # Site footer
│   │   │   ├── Navbar.jsx     # Navigation bar
│   │   │   └── ProjectCard.jsx# Project card
│   │   ├── context/
│   │   │   ├── AuthContext.jsx # Auth state management
│   │   │   └── ThemeContext.jsx# Theme state management
│   │   ├── pages/
│   │   │   ├── About.jsx
│   │   │   ├── AdminDashboard.jsx
│   │   │   ├── AdminLogin.jsx
│   │   │   ├── BlogList.jsx
│   │   │   ├── BlogPost.jsx
│   │   │   ├── Certifications.jsx
│   │   │   ├── Contact.jsx
│   │   │   ├── Experience.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── Projects.jsx
│   │   │   ├── ResumePage.jsx
│   │   │   └── Skills.jsx
│   │   ├── utils/
│   │   │   └── api.js         # Axios / fetch API config
│   │   ├── App.jsx            # Root app with routing
│   │   ├── index.css          # Global styles
│   │   └── main.jsx           # React entry point
│   ├── index.html             # HTML template with SEO meta
│   ├── package.json
│   ├── tailwind.config.js
│   ├── postcss.config.js
│   ├── vite.config.js
│   └── eslint.config.js
│
├── .gitignore
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js v18+ and npm
• MongoDB (local or MongoDB Atlas)
• Gmail App Password (for contact form emails) — Guide

1. Clone the Repository

git clone https://github.com/GVethaNarayanan/Personal-Blog.git
cd Personal-Blog

2. Setup Backend

cd backend
npm install

Create a .env file by copying the example:

cp .env.example .env

Edit .env with your configuration:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/portfolio_db
JWT_SECRET=your_jwt_secret_key_here

# Admin credentials for seeding
ADMIN_EMAIL=your_email@gmail.com
ADMIN_PASSWORD=your_secure_password

# Gmail SMTP for contact form
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your_email@gmail.com
SMTP_PASS=your_gmail_app_password
CONTACT_RECEIVER=your_email@gmail.com

# GitHub username for project showcase
GITHUB_USERNAME=GVethaNarayanan

# Gemini AI API Key (optional)
GEMINI_API_KEY=your_gemini_api_key_here

Seed the admin account:

npm run seed

Start the backend server:

npm run dev

Backend runs at http://localhost:5000

3. Setup Frontend

cd ../frontend
npm install
npm run dev

Frontend runs at http://localhost:5173

---

📡 API Endpoints

Method	Endpoint	Description	Auth
POST	/api/auth/login	Admin login	—
GET	/api/blogs	Get all blog posts	—
GET	/api/blogs/:slug	Get single blog post	—
POST	/api/blogs	Create blog post	Admin
PUT	/api/blogs/:id	Update blog post	Admin
DELETE	/api/blogs/:id	Delete blog post	Admin
POST	/api/contact	Send contact email	—
GET	/api/github/repos	Get GitHub repositories	—
POST	/api/ai/chat	AI chatbot interaction	—

---

🖼️ Screenshots

Screenshots will be added soon.

---

📜 License

This project is open source and available under the MIT License.

---

👤 Author

Vetha Narayanan G

• 🌐 Portfolio
• 📧 vethanarayanang007@gmail.com
• 🔗 LinkedIn
• 🐙 GitHub