glacial-role

bysumit mokasare

[Role] You are an Expert Creative Frontend Architect and UI/UX Engineer specializing in Awwwards-level immersive web experiences. [Context] Project: Personal Developer Portfolio. Aesthetic: World-class, immersive 3D futuristic aesthetic (Dark UI, WebGL effects, Glassmorphism, Neon Blue/Cyan). Asset Strategy: Use the provided uploaded 3D workspace image as the primary hero visual. Treat it as a 3D object with tilt/glow/perspective, not a flat rectangular image. Color Palette: Background: #05070A / #080B10 Deep Navy: #071426 Neon Blue: #159CFF Electric Cyan: #20D9FF Text: #F5F7FA (White), #7F8B9D (Muted) Accent Glow: rgba(20,160,255,0.35) Typography: Premium modern fonts (Inter, Manrope, Space Grotesk). Massive headings (clamp(4rem, 9vw, 10rem)). Tech Stack: React/Next.js, GSAP/Framer Motion, Three.js (optimized), Tailwind CSS, Lenis (smooth scroll). [Task] Build the complete, fully functional website codebase. Do not create an outline, plan, or description; generate the actual production-ready code. The site must include all specified sections with high-fidelity interactions, responsive design, and performance optimization. The final result must feel like a premium creative agency site, NOT a generic template. [Constraints] Execution: Generate all files required to run the project immediately. Data Structure: Use editable data structures (JSON/Config) for Name, Bio, Projects, Skills, etc. Do not hardcode content directly into components. Performance: Optimize for Lighthouse (lazy loading, WebP/AVIF, code splitting, GPU-friendly transforms). Maintain 60fps. Disable heavy WebGL on mobile if necessary. Accessibility: Semantic HTML, keyboard navigation, visible focus states, reduced-motion support. Responsiveness: Desktop (12-col), Tablet (8-col), Mobile (4-col). Mobile must not feel like a reduced desktop version. Interactions: Custom cursor (magnetic/glowing), smooth scroll, scroll-triggered reveals, 3D tilts on images/cards. Code Quality: Use efficient algorithms, implement error handling, and include clear comments. Design Quality: Prioritize Typography, Composition, Motion, 3D depth, Whitespace, Interaction, and Performance. Avoid generic Bootstrap layouts or excessive cards. [Steps] Analyze Requirements: Review the design specs and plan the component architecture. Project Setup: Initialize structure with editable data configurations. Core Systems: Implement global styles, typography, custom cursor, and smooth scroll. Section Implementation: Build each section sequentially with specified interactions: Navbar: Glass effect, fixed, status indicator ("Available for Work"). Preloader: Cinematic black screen with percentage counter. Hero: Split composition, 3D image presentation, editorial typography, CTAs. About: Editorial layout, animated stats counters. Skills: Interactive ecosystem/node graph (not boring cards), orbiting nodes. Projects: Vertical editorial layout, 3D tilt, scroll storytelling, hover effects. Experience: Premium timeline with glowing nodes and animated details. Certificates: Horizontal gallery, 3D perspective, glass frames. Services: Large typography blocks with hover expansion. Tech Marquee: Infinite scrolling technology list. Testimonials: Minimal fade/slide transitions. Contact: Interactive email CTA, magnetic button, social links. Footer: Minimal, system status indicator. 3D Integration: Apply Three.js/WebGL effects (particles, wireframes) carefully without sacrificing performance. Optimization: Ensure accessibility, mobile responsiveness, and load performance. Final Review: Verify all interactions match the "Awwwards Site of the Day" quality bar. [Output Format] Provide the complete file structure and code for each file. Ensure the solution is ready to deploy. Do not explain your process unless asked. Provide the final result directly.