A modern, animated portfolio built with React featuring smooth scrolling and sophisticated animations.
- React 18 - UI framework
- Framer Motion - Component animations
- GSAP - Advanced animations (counters, timeline effects)
- Lenis - Smooth scrolling library
- Vite - Build tool
- Tailwind CSS - Styling
✨ Smooth scrolling with Lenis 🎬 Component animations with Framer Motion ✨ Advanced animations with GSAP (counter animations) 📱 Responsive mobile-first design 🌓 Dark mode support ⚡ Fast build with Vite
- Install dependencies:
npm install- Start the development server:
npm run dev- Build for production:
npm run buildsrc/
├── components/
│ ├── Navigation.jsx # Top navigation with menu
│ ├── ProfileSection.jsx # Hero section with animations
│ ├── StatsSection.jsx # Animated stats counters
│ └── BottomNavigation.jsx # Mobile bottom navigation
├── App.jsx # Main app component with Lenis setup
├── main.jsx # React entry point
└── index.css # Tailwind styles
Configuration:
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind theming
├── postcss.config.js # PostCSS setup
└── package.json # Dependencies
Edit tailwind.config.js to modify the primary color and other theme variables.
- Profile section animations: Modify
ProfileSection.jsxfor GSAP and Framer Motion - Stats animations: Adjust counter animations in
StatsSection.jsx - Component transitions: Edit component variants in respective files
Adjust Lenis configuration in App.jsx:
duration- Scroll animation durationeasing- Easing functionmouseMultiplier- Desktop scroll speedtouchMultiplier- Mobile scroll speed
All modern browsers that support ES6 and CSS Grid.
