A dynamic and interactive showcase of my work, skills, and creativity — powered by smooth animations and modern web technologies.
This portfolio is designed to feel like an experience, not just a website.
🎨 “Every animation, transition, and hover effect has a purpose — to make every scroll feel alive.”
MR PATRA .WEB is a living product that evolves with my skills and experience.
- Showcase real-world frontend engineering skills
- Demonstrate motion design with performance balance
- Highlight clean architecture & scalability
- Act as a single professional identity hub
A modern, high-performance portfolio website built using React + Motion-first UI principles.
- 📱 Fully responsive (mobile-first)
- 🎥 Animation-driven UI
- 🧊 Glassmorphism & depth effects
- ⚡ Ultra-fast builds with Vite
| Technology | Description |
|---|---|
| React.js | Component-based UI architecture |
| Framer Motion | Smooth animations & page transitions |
| TailwindCSS | Utility-first modern styling |
| Vite | Lightning-fast dev & build tool |
| GSAP | High-performance advanced animations |
| Lenis | Smooth scrolling experience |
| Lucide React | Clean & consistent icons |
- ⚡ Smooth scrolling using Lenis
- 🎞️ Page transitions with Framer Motion
- 🖱️ Custom animated cursor
- 🧊 Glassmorphism UI components
- 🧠 Modular & reusable components
- 📱 Mobile-first, desktop-enhanced UX
- Animated hero section
- Motion-based text & elements
- Scroll-triggered reveals
- Timeline-based layout
- Animated milestones
- Clean typography hierarchy
- Interactive project cards
- 3D tilt hover effects
- Live demo & GitHub links
- Structured academic timeline
- Subtle motion-based entries
- Functional contact form
- Animated feedback states
- Social media integration
- 🎨 Dark-first color palette
- ✍️ Clean, readable typography
- 🧊 Glass blur & transparency
- 🌊 Smooth easing & transitions
- 🎯 Motion used with intent
- ⚡ Vite-powered builds
- 🧹 Tree-shaken dependencies
- 🖼️ Optimized assets
- 🎞️ GPU-accelerated animations
- 🧠 Lazy-loaded routes
- Modular folder structure
- Reusable components
- Separation of concerns
- ESLint for consistency
- Scalable animation logic
- ✅ Chrome
- ✅ Firefox
- ✅ Edge
- ✅ Mobile Browsers
- ❌ Internet Explorer
- 🌗 Dark / Light theme toggle
- 🌍 Multi-language support
- 🧠 CMS-based content
- 📊 Analytics integration
- 📝 Blog / Articles section
- 📩 Email service integration
src/
├── assets/
│ ├── Project Photo/
├── components/
│ ├── Navbar/
│ ├── Footer/
│ ├── Projects/
│ ├── Experience/
├── context/
├── pages/
│ ├── ContactPage.jsx
│ ├── EducationPage.jsx
│ ├── ExperiencePage.jsx
├── App.jsx
├── main.jsx
└── index.css