A Modern Portfolio Landing Page developed by combining efficient code with engaging visuals using Next.js 14, Three.js, and Framer Motion.
- Features
- Tech Stack
- Quick Start
- Architecture
- Strengths & Improvement Areas
- Component Highlights
- Core Technologies
- Acknowledgments
- License
- Dynamic 3D Elements: Interactive Three.js components with graceful fallbacks
- Motion-Responsive UI: Framer-powered animations that respect user preferences
- Developer Experience: Type-safe components, atomic design structure, and reusable hooks
| Category | Technologies |
|---|---|
| Core | Next.js, React, TypeScript |
| Styling | Tailwind CSS, Framer Motion, GSAP |
| 3D Graphics | Spline, Three.js, @react-three/fiber, @react-three/drei |
| Analytics | Sentry |
| Infrastructure | Vercel hosting, GitHub Actions CI/CD |
Make sure you have the following installed:
| Tool | Tested Version | Notes |
|---|---|---|
| Node.js | ≥ 18.x | https://nodejs.org/ |
| Npm | any | https://docs.npmjs.com/ |
| Git | any | https://git-scm.com/ |
Using pnpm is recommended for its speed and disk-space savings, but npm or yarn will work too.
git clone https://github.com/rr3s1/portfolio.git
cd portfolionpm installnpm run devOpen http://localhost:3000 in your browser – the app will hot-reload on changes.
Frontend Framework & Runtime
- Next.js, React, TypeScript
Styling & UI
- Tailwind CSS, GSAP, Framer Motion
3D & Graphics
- Three.js, React Three Fiber, Three-Globe, Spline Tool, Lottie Files
Monitoring & Error Tracking
-Sentry, Custom error boundaries
Component-Based Architecture: Modular, reusable components
Advanced Animation: Framer Motion, interactive elements
Responsive & Accessible Design: Tailwind CSS, semantic HTML
## 6. 🎯 Strengths & Improvement Areas
✅ Strengths
-
Modern technologies
-
Rich visual interactions
⚒️ Potential Improvements
-
Enhance state management
-
Implement testing (Jest/React Testing Library)
-
Comprehensive documentation and Storybook
-
Advanced build optimizations
## 7. 🧩 Component Highlights
Hero Component
- Interactive landing with AuroraBackground, Spotlight, SplashCursor, SplineSceneBasic, HeroScrollDemo
Experience Component
- Professional timeline, gradient effects, detailed role descriptions
Approach Component
- Methodology visualization, interactive hover effects
Recent Projects Component
- Portfolio showcase, dynamic 3D pin effects, responsive interactions
UI Components
- Reusable animations, consistent styling, responsiveness
Built with care, passion, and the open-source spirit. ✨
Built primarily by me, but inspired by:
-
Adrian Hajdin's JavaScript Mastery community JavaScript Mastery
-
The Next.js community for endless resources
-
Open-source contributors who share their knowledge freely
MIT License - see LICENSE.md for details.