Hyper-Interactive 3D Developer Portfolio with Three.js
Hyper-interactive dark mode portfolio with Three.js 3D background, neon cyan-purple-pink color palette, and high-end editorial typography. Featuring glassmorphism, 3D tilt interactions, and scroll-triggered reveal animations. Optimized for developer portfolios, SaaS dashboards, and creative agencies wanting a futuristic, high-performance aesthetic.
Summary
A high-fidelity developer portfolio design characterized by a deep space background (#030712), vibrant neon accents, and a dynamic 3D WebGL hero section. It utilizes a grid-pattern texture, glassmorphism cards with 12px blur, and perspective-based hover effects to create depth and interactivity.
Style
The style utilizes a 'Dark Cyber' aesthetic. Typography pairs 'Cabinet Grotesk' (Heavy, tracking-tighter) for headings with 'Satoshi' for body text. Colors are centered around a dark charcoal base (#030712) with a primary gradient of Cyan (#22d3ee), Purple (#a855f7), and Pink (#f472b6). Animations include Three.js wireframe mesh rotations, particle systems orbiting in the background, and smooth CSS 3D transforms on cards.
Layout & Structure
A single-page vertical layout with clearly defined sections (Hero, Services, Skills, Projects, Contact). Uses a sticky navigation and wide margins (max-width 7xl) to maintain readability.
Navigation
Hero Section
Services Grid
Project Sections
Contact Section
Components
3D Interactive Perspective Cards
Cards that tilt based on mouse movement or hover.
Three.js Wireframe Background
A dynamic WebGL scene with orbiting geometric shapes.
Special Notes
MUST include Three.js for the background to achieve the intended depth. MUST use 'Cabinet Grotesk' or a similar geometric display font for the headers to maintain the editorial look. MUST NOT use solid solid colors for cards; they must remain translucent with backdrop-blur. MUST ensure all animations are triggered by scroll (reveal class) using an Intersection Observer for performance.