mammoth-portfolio

byJAGA RABARI

Act as a senior full-stack developer, UI/UX designer, and creative frontend engineer with 10+ years of experience building award-winning portfolio websites (Awwwards-level). Your task is to build a COMPLETE "GOD MODE" developer portfolio website with the following strict requirements: ======================== đŸŽ¯ GOAL Create a modern, highly interactive, visually stunning portfolio website that looks like a premium product (not a template). It must impress recruiters within 5 seconds. ======================== 👤 DEVELOPER PROFILE Name: Jaga Rabari Role: Web Developer Skills: HTML, CSS, JavaScript, PHP, MySQL Focus: Frontend UI, animations, real-world projects, freelancing ======================== đŸ—ī¸ STRUCTURE (MULTI-PAGE REQUIRED) Create these pages: 1. Home (index.html) 2. About (about.html) 3. Projects (projects.html) 4. Project Detail Page (project-single.html) 5. Contact (contact.html) ======================== 🎨 DESIGN REQUIREMENTS - Dark theme (Neon Tech ⚡ style) - Glassmorphism + gradient glow effects - Custom cursor animation - Smooth scrolling + section transitions - Fully responsive (mobile-first) - Clean typography (Poppins / Inter) - Modern spacing and layout system ======================== ⚡ INTERACTIONS & ANIMATIONS - Typing animation in hero section - Scroll-triggered animations (IntersectionObserver or GSAP) - Hover animations on buttons/cards - Parallax background effects - Page transition animations - Animated skill bars ======================== 🌌 ADVANCED (MANDATORY) - Add Three.js or Canvas-based animated background - Dynamic GitHub project fetch using API - Project filtering system (by tech stack) - Project cards with: - Image - Description - Tech stack - GitHub link - Live demo link ======================== 📂 PROJECT DETAIL PAGE Each project must open a detailed page showing: - Problem statement - Solution - Technologies used - Screenshots - Challenges & learnings ======================== đŸ“Ŧ CONTACT SYSTEM - Functional contact form - Use EmailJS OR PHP backend - Include validation ======================== 🧠 PERFORMANCE & QUALITY - Clean, modular code - Use separate CSS and JS files - Optimized images - SEO meta tags included - Fast loading ======================== 💎 BONUS (IF POSSIBLE) - Dark/light toggle - Blog section - Admin panel to manage projects (basic) - Cursor effects - Loader animation ======================== đŸ“Ļ OUTPUT FORMAT - Provide full folder structure - Provide all files (HTML, CSS, JS) - Code must be clean and production-ready - No placeholders — use realistic content - Ensure everything WORKS (no broken scripts) ======================== ❗ IMPORTANT RULES - Do NOT create a basic template - Do NOT skip animations - Do NOT use plain design - Focus on uniqueness and creativity - Write like a senior engineer building a real product ======================== đŸŽ¯ FINAL RESULT The output should look like a top 1% developer portfolio that could win design awards and impress recruiters instantly.

HomeProjectsContact
Home

Comments (0)

No comments yet. Be the first!

Home design preview
Home: View Portfolio
About: View Bio
Projects: Manage Projects
Projects: Filter by Tech
ProjectDetail: Edit Details
ProjectDetail: Update Screenshots
Contact: View Messages
Contact: Respond to Inquiry
Home: Update Hero Content
Home: Preview Changes