👨‍💻 Manish Kafle — Portfolio Website

A dynamic, full-stack Django + React portfolio website showcasing projects, skills, certifications, and professional experience — built with scalability and clean architecture in mind.

---

🌐 Tech Stack

🖥 Backend

• Django
• Django REST Framework (DRF)
• PostgreSQL / SQLite
• CORS & CSRF Security

🎨 Frontend

• React (Vite)
• TailwindCSS
• Axios

🚀 Deployment

• Render (Backend)
• Vercel (Frontend)

---

✨ Features

✅ Full-stack architecture (Django + React)
✅ RESTful API with filtering & custom endpoints
✅ Admin dashboard for content management
✅ Contact form with backend email handling
✅ Featured & ML project filters
✅ Dynamic skills with proficiency levels
✅ Environment-based configuration
✅ Secure production-ready setup
✅ Easy deployment (Render + Vercel)
✅ Scalable and modular project structure

---

📸 Screenshots

(Add your screenshots inside a /screenshots folder and update paths below)

🏠 Homepage

📂 Projects Page

🛠 Admin Dashboard

---

⚙️ Backend Setup (Django)

1️⃣ Create Virtual Environment

python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

2️⃣ Install Dependencies

pip install -r requirements.txt

3️⃣ Configure Environment Variables

cp .env.example .env

Edit .env and configure:

SECRET_KEY=your_secret_key
DEBUG=True
ALLOWED_HOSTS=127.0.0.1,localhost
DATABASE_URL=your_database_url

4️⃣ Setup Database

python manage.py migrate
python manage.py createsuperuser

5️⃣ Populate Initial Data (Optional)

python manage.py populate_portfolio

6️⃣ Collect Static Files

python manage.py collectstatic --noinput

7️⃣ Run Development Server

python manage.py runserver

🔗 Backend: http://localhost:8000
🔗 Admin Panel: http://localhost:8000/admin

---

🎨 Frontend Setup (React + Vite)

1️⃣ Navigate to Frontend Directory

cd frontend

2️⃣ Install Dependencies

npm install

3️⃣ Start Development Server

npm run dev

🔗 Frontend: http://localhost:3000

---

📚 API Endpoints

🧠 Skills

Method	Endpoint	Description
GET	/api/skills/	Get all skills
GET	/api/skills/?category=backend	Filter by category

---

📂 Projects

Method	Endpoint	Description
GET	/api/projects/	Get all projects
GET	/api/projects/featured/	Get featured projects
GET	/api/projects/ml_projects/	Get ML projects
GET	/api/projects/{slug}/	Get project details

---

🎓 Education & Experience

Method	Endpoint
GET	/api/education/
GET	/api/experience/
GET	/api/certifications/

---

⚙️ Site Settings

Method	Endpoint
GET	/api/settings/current/

---

📩 Contact

Method	Endpoint
POST	/api/contact/

Request Body

{
  "name": "Your Name",
  "email": "your.email@example.com",
  "subject": "Subject",
  "message": "Your message"
}

---

🔧 Django Admin Panel

Access via:

/admin

Manage:

• ✅ Skills (categories + proficiency)
• ✅ Projects (tech stack, highlights, links)
• ✅ Education
• ✅ Certifications
• ✅ Work Experience
• ✅ Site Settings (bio, social links)
• ✅ Contact Messages

---

🚀 Deployment Guide

---

🟣 Deploy Backend to Render

git add .
git commit -m "Deploy portfolio"
git push origin main

Steps:

1. Go to Render.com
2. Create New Web Service
3. Connect GitHub repository
4. Add Environment Variables
5. Deploy 🚀

---

🟢 Deploy Frontend to Vercel

cd frontend
npm install -g vercel
vercel

Follow CLI instructions to deploy.

---

📦 Project Structure

portfolio/
│
├── portfolio_site/          # Project settings
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
│   └── asgi.py
│
├── main/                    # Portfolio app
│   ├── models.py
│   ├── views.py
│   ├── serializers.py
│   ├── admin.py
│   └── management/
│       └── commands/
│           └── populate_portfolio.py
│
├── contact/                 # Contact app
│   ├── models.py
│   ├── views.py
│   ├── serializers.py
│   └── signals.py
│
├── frontend/                # React frontend
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── App.jsx
│   │   └── index.js
│   └── package.json
│
├── requirements.txt
├── manage.py
├── .env.example
└── README.md

---

🧪 Testing

Run backend tests:

python manage.py test

---

📝 How to Add Content

➕ Add New Project

1. Go to /admin
2. Click Projects → Add Project
3. Fill:
   • Title
   • Slug (auto-generated)
   • Description
   • Tech stack (comma-separated)
   • Image & Links
   • Highlights (comma-separated)
4. Mark as Featured if needed
5. Save ✅

---

➕ Add Skills

1. Go to /admin
2. Click Skills → Add Skill
3. Select category:
   • Backend
   • Frontend
   • ML
   • Soft Skills
   • Tools
4. Enter proficiency percentage
5. Save ✅

---

🔐 Security Highlights

✔ CORS configured
✔ CSRF protection enabled
✔ Secure password validators
✔ Environment variables for secrets
✔ ORM-based SQL injection protection
✔ Production-ready configuration

---

📞 Contact

📧 manishkafle49@gmail.com

---

📄 License

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

---

🙏 Acknowledgments

• Django & DRF Communities
• React Ecosystem
• TailwindCSS
• Open-source Contributors

---

💖 Made with Passion by Manish Kafle

If you like this project, consider giving it a ⭐ on GitHub!