Project Overview
Visit WebsiteBuilt with Next.js, TypeScript, and Tailwind CSS, this portfolio integrates Sanity CMS for content management and Resend API for email handling. It features smooth animations with Framer Motion and interactive visuals using R3F.
Key Features
A fluid, mobile-first design built with Next.js and Tailwind CSS, ensuring optimal performance and a perfect experience across all devices. The layout adapts seamlessly with optimized touch interactions.
Tech Stack
Animations & Interactions
Framer Motion:
Utilized for scroll reveals, button hovers, and elegant AnimatePresence transitions for a polished feel.
GSAP (GreenSock Animation Platform):
Employed for sophisticated page entrance animations and complex scroll-triggered sequences to create dynamic storytelling.
React Three Fiber (R3F):
Used to render beautiful 3D models and effects, adding a unique, engaging layer to the user interface.
Challenges & Learnings
Scroll-Synced Navigation:
Creating a smooth, real-time feedback loop between scroll position and the active navigation link.
Combining Animation Libraries:
Using Framer Motion for component-based animations and GSAP for more complex, timeline-based sequences without performance conflicts.
State Management:
Ensuring a clean and predictable state across all modular components and pages, especially for interactive elements.
Custom Theming:
Extending Tailwind CSS to create a bespoke, consistent design system that matches a specific aesthetic.
Final Outcome
Blazing-Fast Performance: Deployed on Netlify, the site achieves high scores on Lighthouse, demonstrating a focus on performance optimization.
Recruiter Engagement: The polished design and interactive elements have proven to be a valuable tool for showcasing frontend and animation capabilities to potential employers and clients.
Reusable Structure: The modular architecture has served as a template for other client-facing projects, saving significant development time.