Portfolio Website - Md Farhan Parwez

Minimal navy blue and white themed portfolio built with React.js and Node.js.

✅ Latest Update: Full code review completed! 25+ bugs fixed including contact form integration, accessibility improvements, and error handling. See FIXES_APPLIED.md for details.

🌐 Live Demo

• Website: [Coming Soon - Deploy to see your live site!]
• API: [Coming Soon - Your Render backend URL]

🎨 Design Features

• Minimal Design - Clean navy blue (#001433) and white color scheme
• No Gradients - Simple, professional styling
• Unified Tech Stack - All technologies in one section with icons
• Responsive - Works on all devices
• Smooth Animations - Framer Motion powered

🛠️ Tech Stack

Frontend

• React.js (Vite)
• Tailwind CSS
• Framer Motion
• React Icons
• React Router DOM

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)
• CORS

📁 Project Structure

myPortFolio/
├── client/          # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── Layout/      # Navbar, Footer, BackToTop
│   │   │   ├── Sections/    # Hero, About, Skills, Projects, Experience
│   │   │   └── UI/          # LoadingScreen, ProjectCard
│   │   ├── context/         # ThemeContext
│   │   ├── hooks/           # useScrollReveal
│   │   └── App.jsx
│   └── package.json
├── server/          # Node.js backend
│   ├── src/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── models/
│   │   └── routes/
│   └── server.js
└── README.md

🚀 Local Development

Prerequisites

• Node.js (v18+)
• MongoDB (local or Atlas)

Backend Setup

cd server
npm install

Create .env file in server/:

MONGO_URI=your_mongodb_atlas_connection_string
PORT=5000
CLIENT_URL=http://localhost:5173
NODE_ENV=development

⚠️ Important: Replace your_mongodb_atlas_connection_string with your actual MongoDB Atlas URI. Get it from: MongoDB Atlas → Cluster → Connect → Drivers

Start backend:

npm run dev

Backend runs on: http://localhost:5000

Frontend Setup

cd client
npm install

Create .env file in client/:

VITE_API_URL=http://localhost:5000

Start frontend:

npm run dev

Frontend runs on: http://localhost:5173

📦 Deployment

🚀 Quick Deploy (15 minutes)

See QUICK_START.md for fastest deployment

📖 Detailed Deployment Guide

See DEPLOYMENT.md for step-by-step instructions

✅ Pre-Deployment Checklist

See DEPLOYMENT_CHECKLIST.md for complete checklist

Deployment Stack

• Frontend: Vercel (Free tier)
• Backend: Render (Free tier)
• Database: MongoDB Atlas (Free tier)
• Total Cost: $0/month 🎉

🎯 Features

• ✅ Hero section with introduction
• ✅ About section with background
• ✅ Unified Tech Stack with icons
• ✅ Projects showcase with filtering
• ✅ Contact form with backend integration (NEW)
• ✅ Responsive navbar with logo
• ✅ Footer with social links and copyright
• ✅ Smooth scroll animations
• ✅ Loading screen (displays on first visit)
• ✅ 404 page
• ✅ Back to top button
• ✅ Full accessibility (ARIA labels)
• ✅ Graceful error handling

🎨 Color Palette

Navy-900: #001433 (Main background)
Navy-800: #002966 (Cards, sections)
Navy-700: #003d99 (Borders)
Navy-600: #0052cc (Buttons, accents)
Navy-500: #0066ff (Hover states)
White: #ffffff (Text)
Gray-300: #d1d5db (Secondary text)

📝 API Endpoints

POST /api/contact

Submit contact form

• Body: { name: string, email: string, message: string }
• Response: { success: boolean, message: string }
• Status Codes: 201 (success), 400 (validation error), 500 (server error)

GET /

Health check endpoint

• Response: { message: "Portfolio API is running" }

🔗 Links

• GitHub: famyali786-hash
• Repository: my-portfolio-web

📄 License

MIT License - Feel free to use this project for your own portfolio!

---

Made with ❤️ by Md Farhan Parwez