A premium, immersive, and performance-optimized portfolio website. This project leverages cutting-edge web technologies to create a high-fidelity experience that reflects a career at the intersection of AI Systems, Data Science, and Creative Development.
This portfolio is designed to be as intelligent and responsive as the systems it showcases. It features a custom-built 3D background system that adapts in real-time to navigation, paired with cinematic typography and glassmorphic UI elements.
- Framework: React + Vite
- 3D Graphics: Three.js via @react-three/fiber & @react-three/drei
- Animation: GSAP (ScrollTrigger, Timelines)
- Scrolling: Lenis (Sleek Smooth Scrolling)
- Styling: Tailwind CSS
- Icons: Lucide React
The background environment isn't just static; it evolves as you navigate:
- Portfolio (Home): Deep-space
Galactic Spiral— A massive, interactive 3D particle vortex representing data scale. - Resume:
Wave Grid— An undulating topographic mesh that tracks your scroll speed. - GitHub Analysis:
Cyber Holograph— A Matrix-inspired data rain combined with a wireframe torus knot, optimized for 60fps.
- OM YADAO Branding: Custom-built text blocks with independent 3D transformations.
- Staggered Animations: Each letter responds to hover with a unique rotation, scale, and offset, creating a tactile, "touchable" feel.
- Perspective Rendering: Uses
perspective-1000CSS containers for realistic depth.
- Glassmorphism: Elegant, blurred-background containers (
backdrop-blur-xl) for content blocks. - Cinematic Reveal: GSAP-powered entrance sequences for all hero elements and section titles.
- Mobile-First Optimization: Fluid layouts that retain their 3D impact on high-and-low-end mobile devices.
App.tsx: Central logic, state-driven navigation, and theImmersiveCorebackground engine.BgOptionCyber.tsx: High-performance falling particle system.GithubInsights.tsx: Deep-dive project categorization with interactive repo cards.BentoSkills.tsx: Modern, grid-based skill visualization.ExperienceTimeline.tsx: Detailed career progression with glass-morphic styling.
We've moved to a Top-Right Navigation Pill system for maximum visibility and accessibility, freeing up the bottom of the screen for ambient 3D visuals.
- Polygon-Lean Geometries: Reduced segment counts in complex 3D shapes to prevent GPU throttling.
- Particle Balancing: Fine-tuned point counts (2000-3000) for high density without frame-drops.
- Layered Rendering: Strategic use of
will-change-transformand reducedbackdrop-blurin high-interaction areas to maintain 60fps.
Built with ❤️ by OM YADAO.