Joy Portfolio

A futuristic, sci-fi–themed interactive portfolio designed to showcase creativity, motion design and front-end engineering. The project blends immersive visuals with smooth performance, offering a cinematic browsing experience that adapts seamlessly across devices.

Tech Stack Used

• Frontend: React.js
• Styling: Tailwind CSS, Glassmorphism CSS
• Animations: Framer Motion, GSAP (ScrollTrigger, Timeline)
• Icons & Assets: Lucide Icons, SVG filters, Particle effects
• Build & Deployment: Netlify

Features Implemented

• Interactive Landing Section: Dynamic hero with layered parallax effects and animated titles.
• Scroll-Triggered Animations: Seamless transitions and component reveals using GSAP’s ScrollTrigger.
• Custom Navigation Bar: Responsive navbar that reacts to scroll position and section visibility.
• Themed UI: Futuristic glassmorphism elements and glowing hover states.
• Performance Optimizations: Reduced animation density on mobile devices for smoother UX.
• Mobile-First Design: Fully responsive layout with touch-optimized interactions.
• Smooth Page Transitions: Framer Motion page exit and entry effects.

Custom Elements & Animations

• Scroll Detection Hook: A custom React hook to detect and trigger section-based animations.
• 3D-inspired Transitions: Depth illusion using layered transforms and lighting gradients.
• Animated Cursor: Reactive cursor that changes behavior on hover for interactive feel.
• GSAP Timelines: Fine-tuned animation sequences controlling text reveals and background transitions.
• Glassmorphic Panels: Semi-transparent, blurred content cards inspired by futuristic interfaces.

Built With

• framer-motion
• glassmorphism
• gsap
• react.js
• tailwind