🚀 Modern Portfolio Application

A modern, responsive portfolio application built with cutting-edge technologies

🌟 Live Demo | 📖 Documentation | 🚀 Getting Started

---

✨ Features

Modern React React 19 with hooks & functional components	FastAPI Backend High-performance async Python API	Tailwind CSS Utility-first styling framework
MongoDB NoSQL database with async operations	Responsive Design Mobile-first responsive layouts	Performance Optimized for speed and SEO

🎯 Key Features

• 🎨 Modern UI/UX: Beautiful, dark-themed interface with smooth animations
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile devices
• ⚡ Fast Performance: Server-side rendering and optimized bundle sizes
• 🔒 Secure: JWT authentication and secure API endpoints
• 🎭 Interactive: Smooth animations with Framer Motion
• 🧩 Component Library: Built with Radix UI components
• 📊 Analytics Ready: Easy integration with analytics platforms
• 🔍 SEO Optimized: Meta tags and structured data for better search visibility

---

🛠️ Tech Stack

Frontend

📦 React 19.0.0          - Modern React with latest features
🎨 Tailwind CSS 3.4.17   - Utility-first CSS framework
🧩 Radix UI              - Accessible component primitives
✨ Framer Motion 12.23   - Smooth animations and transitions
📱 React Router 7.5.1    - Client-side routing
🎪 Lucide React 0.507    - Beautiful icon library
📊 Recharts              - Data visualization (if needed)
🎯 React Hook Form 7.56  - Form validation and handling

Backend

🚀 FastAPI 0.110.1       - High-performance Python web framework
🐍 Python 3.11+          - Modern Python with type hints
🗄️ MongoDB 4.5.0         - NoSQL database
⚡ Motor 3.3.1           - Async MongoDB driver
🔐 JWT & Passlib         - Authentication and security
📝 Pydantic 2.6.4        - Data validation with type safety
🔄 Uvicorn 0.25.0        - ASGI server for production

Development Tools

🧪 Pytest 8.0.0         - Testing framework
🎯 Black & isort         - Code formatting
🔍 MyPy                  - Static type checking
📝 ESLint & Prettier     - Frontend code quality
🔧 CRACO                 - Create React App configuration

---

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v18.0.0 or higher)
• Python (v3.11 or higher)
• MongoDB (v4.4 or higher)
• Git

📥 Installation

1. Clone the repository

   git clone https://github.com/MRSHAKILS/Portfolio.git
   cd Portfolio

2. Backend Setup

   # Navigate to backend directory
   cd backend
   
   # Create virtual environment
   python -m venv .venv
   
   # Activate virtual environment
   # Windows:
   .venv\Scripts\activate
   # macOS/Linux:
   source .venv/bin/activate
   
   # Install dependencies
   pip install -r requirements.txt

3. Frontend Setup

   # Navigate to frontend directory
   cd ../frontend
   
   # Install dependencies
   npm install --legacy-peer-deps

4. Environment Configuration

   # Backend (.env)
   cp backend/.env.example backend/.env
   
   # Frontend (.env)
   cp frontend/.env.example frontend/.env

   Update the environment variables:

   # Backend .env
   MONGO_URL=mongodb://localhost:27017
   DB_NAME=portfolio_db
   JWT_SECRET=your-super-secret-jwt-key
   CORS_ORIGINS=http://localhost:3000,http://localhost:3001
   
   # Frontend .env
   REACT_APP_BACKEND_URL=http://localhost:8000

🏃‍♂️ Running the Application

🚀 Quick Start (Recommended)

1. Install all dependencies:

   npm run install:all

2. Run both frontend and backend together:

   npm run dev

🔧 Manual Start (Alternative)

1. Start the Backend Server

   npm run dev:backend

   Or manually:

   cd backend
   python -m uvicorn server:app --reload --host 0.0.0.0 --port 8000

2. Start the Frontend Development Server (in another terminal)

   npm run dev:frontend

   Or manually:

   cd frontend
   npm start

🌐 Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• API Documentation: http://localhost:8000/docs

🐛 Troubleshooting

If you encounter issues:

1. Frontend dependency conflicts:

   cd frontend
   rm -rf node_modules package-lock.json
   npm install --legacy-peer-deps

2. Backend dependencies:

   cd backend
   pip install -r requirements.txt

3. Clean and reinstall everything:

   npm run clean
   npm run install:all

---

📱 Screenshots

🖥️ Desktop View

📱 Mobile View

🎨 Dark Theme

---

🏗️ Project Structure

📁 Portfolio/
├── 📁 backend/                 # FastAPI backend
│   ├── 📄 server.py           # Main FastAPI application
│   ├── 📄 requirements.txt    # Python dependencies
│   ├── 📄 .env                # Environment variables
│   └── 📁 __pycache__/        # Python cache files
├── 📁 frontend/               # React frontend
│   ├── 📁 public/             # Static files
│   ├── 📁 src/                # Source code
│   │   ├── 📁 components/     # React components
│   │   │   ├── 📄 About.jsx   # About section
│   │   │   ├── 📄 Hero.jsx    # Hero section
│   │   │   ├── 📄 Projects.jsx # Projects showcase
│   │   │   └── 📁 ui/         # Reusable UI components
│   │   ├── 📁 data/           # Mock data
│   │   ├── 📁 hooks/          # Custom React hooks
│   │   └── 📁 lib/            # Utility functions
│   ├── 📄 package.json        # Node.js dependencies
│   └── 📄 tailwind.config.js  # Tailwind configuration
├── 📁 tests/                  # Test files
├── 📄 README.md              # Project documentation
└── 📄 .gitignore             # Git ignore rules

---

🎨 Customization

🎨 Theming

The portfolio uses CSS custom properties for easy theming:

:root {
  --color-bg-primary: #0a0a0b;
  --color-bg-secondary: #1a1a1b;
  --color-accent-primary: #00d4ff;
  --color-text-primary: #ffffff;
  /* ... more variables */
}

🧩 Components

All UI components are built with Radix UI and styled with Tailwind CSS:

// Example component usage
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

export function ProjectCard({ project }) {
  return (
    <Card className="bg-card hover:bg-accent transition-colors">
      <h3>{project.title}</h3>
      <Button variant="outline">View Project</Button>
    </Card>
  );
}

---

🧪 Testing

Backend Testing

cd backend
pytest tests/ -v

Frontend Testing

cd frontend
npm test

---

🚀 Deployment

📦 Build for Production

Frontend:

cd frontend
npm run build

Backend:

cd backend
pip install -r requirements.txt
python -m uvicorn server:app --host 0.0.0.0 --port 8000

🌐 Deployment Options

• Frontend: Vercel, Netlify, GitHub Pages
• Backend: Railway, Heroku, DigitalOcean
• Database: MongoDB Atlas, Railway MongoDB

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

📞 Contact

MRSHAKILS - @MRSHAKILS

Project Link: https://github.com/MRSHAKILS/Portfolio

---

🌟 Show your support

Give a ⭐️ if this project helped you!