shadow-portfolio

byBhavik Tanna

You are a senior full-stack developer. I want you to build a FULLY FUNCTIONAL dynamic portfolio website with an admin panel. ## 🎯 GOAL: Create a personal portfolio website with: * Public website (for visitors) * Hidden admin panel (only accessible by me) * Dynamic content (projects, achievements, etc. editable via admin panel) --- ## ⚙️ TECH STACK (MANDATORY): * Frontend: React (with Vite) * Backend: Node.js + Express * Database: MongoDB * Styling: Tailwind CSS * Authentication: JWT-based login system * Image Upload: Multer / Cloudinary * Deployment ready (Frontend + Backend separate) --- ## 🌐 PUBLIC WEBSITE FEATURES: ### 1. Home Page * Name, intro, tagline * Resume-style summary * Profile photo * Social links (LinkedIn, GitHub) ### 2. Filter System * Default: Show ALL data * Toggle Button: * "All" * "Tech Only" * Tech filter should show: * Technical skills * Tech projects * Tech achievements only ### 3. Projects Section * Dynamic (from database) * Each project must include: * Title * Description * Tech stack * Image * GitHub / Live link * Tag (Tech / Non-tech) ### 4. Achievements Section * Dynamic (from database) * Fields: * Title * Description * Date * Image * Category (Tech / Non-tech) ### 5. Skills Section * Categorized (Tech / Non-tech) * Should respond to filter toggle ### 6. Responsive UI * Mobile + Desktop optimized * Clean modern design * Smooth animations --- ## 🔐 ADMIN PANEL (VERY IMPORTANT): ### Hidden Access: * URL should NOT be linked anywhere (example: /admin-xyz123) * Only I should know the URL ### Authentication: * Login system (email + password) * JWT-based authentication ### Admin Features: 1. Add Project 2. Edit Project 3. Delete Project 4. Add Achievement 5. Edit Achievement 6. Delete Achievement 7. Upload images 8. Add external links ### Dashboard UI: * Simple, clean panel * Form-based input --- ## 🗄️ DATABASE DESIGN: Create MongoDB models for: * User (admin login) * Project * Achievement * Skills (optional static or DB-based) Each project/achievement should have: * title * description * category (tech / non-tech) * image URL * link (optional) * createdAt --- ## 🔌 BACKEND API: Create REST APIs: ### Auth: * POST /api/auth/login ### Projects: * GET /api/projects * POST /api/projects * PUT /api/projects/:id * DELETE /api/projects/:id ### Achievements: * GET /api/achievements * POST /api/achievements * PUT /api/achievements/:id * DELETE /api/achievements/:id --- ## 🎨 FRONTEND STRUCTURE: Create: * Navbar * Home * Projects * Achievements * Admin Panel pages * Filter Toggle Component Use React Router. --- ## 🧠 SPECIAL LOGIC: * Filter system: * Default = ALL * If "Tech Only" selected → filter by category === "tech" * Admin updates → instantly reflected on frontend (via API) --- ## 📁 PROJECT STRUCTURE: Create full folder structure: portfolio/ │ ├── backend/ │ ├── models/ │ ├── routes/ │ ├── controllers/ │ ├── middleware/ │ ├── server.js │ ├── frontend/ │ ├── src/ │ │ ├── components/ │ │ ├── pages/ │ │ ├── services/api.js │ │ ├── App.jsx │ │ └── main.jsx --- ## 🚀 OUTPUT REQUIREMENTS: 1. Generate FULL WORKING CODE for: * Backend * Frontend 2. Provide installation steps 3. Provide environment variables (.env) 4. Provide MongoDB setup guide 5. Provide run commands 6. Provide deployment steps (Vercel + Render or similar) --- ## ❗ IMPORTANT: Before starting: ASK ME FOR: * My Name * My Resume details * My LinkedIn data * My projects * My achievements * Admin email/password DO NOT assume data. --- ## 🎯 END GOAL: I should be able to: * Run the project locally * Login to admin panel * Add/edit/delete content * See it instantly on portfolio website Build production-level clean code.