shadow-portfolio
Bhavik TannaYou 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.
Comments (0)
Sign in to leave a comment
My Achievements
A curated record of milestones, certifications, hackathon victories, and technical recognitions earned throughout my journey as an IT engineering student and developer at Gujarat.
Milestones & Recognition
A curated collection of competitions, certifications, research, and community work. Hover a card to flip and reveal the full story.
National Hackathon Winner
First place at Smart India Hackathon 2023 â built a real-time disaster response coordination system with 12,000+ teams competing nationwide.
Flip for detailsLed a 6-member team to design and deploy a full-stack emergency coordination platform in 36 hours. Judges praised the real-time geospatial clustering and offline-first architecture.
Click to flip back
Top Open Source Contributor
Recognized among top contributors to a 15k-star Python ML library. Merged 7 PRs improving performance by 23% on sparse matrix operations.
Flip for detailsContributed optimized Cython-backed sparse matrix routines, added comprehensive unit tests, and co-authored documentation improvements adopted by the core team.
Click to flip back
Published Research Paper
Co-authored peer-reviewed paper on federated learning privacy preservation published in IEEE Xplore. Cited 18 times within 6 months of publication.
Flip for detailsResearch focused on differential privacy mechanisms for federated learning in healthcare IoT environments. Presented at ICCS 2023 in Lisbon, Portugal.
Click to flip back
GTU University Rank Holder
Secured Rank 3 in Gujarat Technological University among 8,400+ IT engineering students for academic excellence across six semesters.
Flip for detailsMaintained a 9.4+ CGPA across all semesters with distinction in Data Structures, Cloud Computing, and Machine Learning core subjects.
Click to flip back
TechFest Lead Organizer
Spearheaded the annual college TechFest 2023 with 1,200 attendees, 40+ events, and partnerships with 6 industry sponsors including Tata Consultancy.
Flip for detailsManaged a 25-person core committee, coordinated logistics for workshops, hackathons, and coding contests. Raised âš3.5L in sponsorships and delivered the event under budget.
Click to flip back
AWS Solutions Architect Associate
Earned AWS certification demonstrating expertise in designing distributed systems, cloud-native architecture, and cost-optimized infrastructure solutions.
Flip for detailsPassed with a score of 847/1000, covering EC2, S3, RDS, Lambda, VPC, IAM, and CloudFormation. Deployed a production-grade microservices app on AWS as part of prep.
Click to flip back
Google DSC Chapter Lead
Founded and led the Google Developer Student Club at L.D. College of Engineering, growing membership from 0 to 320 students in one academic year.
Flip for detailsOrganized 18 technical workshops, 4 hackathons, and partnered with Google engineers for guest talks. Mentored 60+ students through project-based learning cohorts.
Click to flip back
Kaggle Competition Expert
Achieved Expert tier on Kaggle with top 2% finish in the Tabular Playground Series. Competed across 14 ML competitions with 3 silver medals.
Flip for detailsSpecialized in gradient boosting ensembles, feature engineering pipelines, and time-series forecasting. Silver medals in Bengali.AI NLP challenge and G-Research crypto forecasting.
Click to flip back
Full-Stack Dev Intern @ Razorpay
Selected from 4,000+ applicants for a competitive SWE internship at Razorpay. Contributed to the payment reconciliation microservice used by 100k+ merchants.
Flip for detailsBuilt a configurable rules engine for flagging suspicious transactions, reducing manual review load by 34%. Tech stack was Node.js + React + MySQL with Kafka event streaming.
Click to flip back
Milestones At a Glance
Total Achievements
Across academics, tech & leadership
Awards Received
National & state-level recognitions
Certifications Earned
Cloud, dev & engineering credentials
Years Active
Consistent growth since 2021
Certifications & Credentials
Industry-recognized certifications earned through hands-on learning, validating expertise across cloud, development, and machine learning domains.
My Achievement Timeline
A chronological look at the milestones, awards, and key moments that have shaped Bhavik's engineering path.
SSC Board â 94.6% Distinction
Achieved outstanding distinction in the Gujarat Secondary School Certificate examination, ranking among the top students in the district.
HSC Board â 91.2% Distinction
Completed Higher Secondary Certificate with a focus on Science & Mathematics, earning distinction and securing admission to a top-tier engineering college.
1st Place â State-Level Hackathon
Led a 4-person team to build a real-time disaster relief coordination platform using IoT sensors and a React dashboard. Won first place out of 120+ teams at the Gujarat State Tech Fest.
Google Summer of Code Contributor
Selected as a GSoC contributor for an open-source Python developer tooling project, contributing over 3,200 lines of code across 18 merged pull requests.
AWS Certified Solutions Architect
Earned the AWS Certified Solutions Architect â Associate credential, validating expertise in designing distributed systems, cloud infrastructure, and fault-tolerant architectures.
Technical Head â IT Students Association
Appointed as Technical Head of the departmental student body, organizing coding workshops, hackathons, and industry speaker sessions attended by 400+ students.
shadow-portfolio â Live Production Launch
Designed, built, and deployed this fully production-ready personal portfolio with dynamic content management, an admin panel, dark mode, and scroll-driven animations.
Let's Build Something Remarkable Together
Bhavik is a passionate IT engineering student with a track record of excellence in tech, leadership, and innovation. Explore his projects or reach out to start a conversation.
shadow-portfolio â Crafted with passion by Bhavik Tanna, Gujarat, India
No comments yet. Be the first!