jolly-portfolio

byRabar Abas

Create a futuristic 3D animated personal portfolio website that feels like an interactive digital experience, not a traditional portfolio. Goal: Design a visually stunning, immersive portfolio that showcases projects, skills, and personality through 3D interaction and smooth animations. Design Style: - Dark modern UI (black / deep purple / neon accents) - Glassmorphism + soft glow effects - Floating elements in 3D space - Minimal text, focus on visuals and interaction - Smooth cinematic transitions --- Main Experience Flow: 1. Landing (3D Hero Scene) - Fullscreen 3D environment - A central floating object (e.g. sphere, logo, or abstract shape) - Mouse movement creates parallax / camera movement - Your name appears with animated text - Subtitle (e.g. "Frontend Developer | Creative Coder") - CTA: “Enter Portfolio” --- 2. About Section (3D Interaction) - Floating cards orbiting in space - Each card = info (bio, skills, tools) - Clicking a card zooms it forward - Subtle particle background --- 3. Projects Showcase (Core Section) - Projects displayed as 3D floating panels or cubes - Horizontal scroll or drag-to-navigate - Hover = zoom + glow - Click = opens project details panel Each project includes: - Title - Description - Tech stack - Live demo / GitHub link --- 4. Skills Visualization (Interactive) - Skills shown as: - Floating spheres OR - Orbiting icons OR - 3D graph/network - Different sizes represent skill level --- 5. Contact Section - Minimal clean UI (2D overlay) - Email + social links - Optional animated form --- 3D & Animation Features: - Use Three.js or React Three Fiber - Smooth camera transitions between sections - Particle system (stars / dust / light particles) - Depth effects and lighting - Soft shadows and reflections - Scroll-based animations (camera moves as user scrolls) --- UI/UX Features: - Fully responsive (desktop + mobile) - Fallback simple version for low-performance devices - Fast loading (lazy load 3D assets) - Clean navigation (floating or hidden menu) --- Tech Stack: - Next.js or React - Three.js + React Three Fiber - Tailwind CSS - Framer Motion --- Extra Enhancements: - Background ambient sound (optional) - Cursor effects (glow / trail) - Theme toggle (dark/light neon) - Loading animation with 3D object --- Output: - Full working code - Clean folder structure - Reusable components - Instructions to run and deploy