Vikash Kushwaha — Data_Analytics 3D Portfolio

A full-stack portfolio built with the MERN stack (MongoDB, Express, React, Node.js) plus Three.js for the animated 3D hero. All content is pulled from Vikash Kushwaha's resume.

Structure

portfolio/
├── client/     React + Vite + Tailwind + Three.js (react-three-fiber) frontend
└── server/     Express + Mongoose backend (handles the contact form)

Design

• Palette: near-black graphite/navy (#080B12) with a cyan/teal accent (#2FE6C6) and a warm amber highlight (#F5B84F) — a "data" palette (signal against dark background).
• Typography: Space Grotesk (display) + Inter (body) + JetBrains Mono (labels/eyebrows).
• Signature element: an animated 3D "data constellation" in the hero — a rotating sphere of connected nodes, representing turning scattered data into structure (react-three-fiber + three.js).
• Sections: Hero → About → Experience → Skills → Projects → Education/Certifications → Contact.

Run locally

1. Backend (server/)

cd server
cp .env.example .env      # edit MONGO_URI if using a remote MongoDB (e.g. MongoDB Atlas)
npm install
npm run dev                # starts on http://localhost:5000

The server starts even without MongoDB running, but the contact form's "save to DB" step needs a real MongoDB connection (local mongod or a free MongoDB Atlas cluster).

2. Frontend (client/)

cd client
cp .env.example .env       # points VITE_API_URL at your backend
npm install
npm run dev                 # starts on http://localhost:5173

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

Deploying

• Frontend: build with npm run build in client/, then deploy the dist/ folder to Vercel, Netlify, or GitHub Pages.
• Backend: deploy server/ to Render, Railway, or a VPS. Set MONGO_URI to a MongoDB Atlas connection string and CLIENT_ORIGIN to your deployed frontend URL.
• Update VITE_API_URL in the client's .env to your deployed backend URL before building.

What to personalize next

• Swap in a real headshot/illustration if you want an image in the hero.
• Add real screenshots or live links to the projects array in client/src/data/profile.js.
• Connect a real email service (e.g. Nodemailer + Gmail/SendGrid) in server/src/controllers/contactController.js if you want email notifications in addition to database storage.