Portfolio V2 - 3D Interactive Website
About This Project
A stunning 3D interactive portfolio website built with React and Three.js. Features immersive 3D graphics, smooth animations with Framer Motion, and a modern Material-UI design. Includes 3D scenes, interactive elements, and a fully responsive layout.
Technologies Used
Key Features
- ✓Immersive 3D graphics with Three.js and React Three Fiber
- ✓Interactive 3D models and animations
- ✓Smooth page transitions with Framer Motion
- ✓Material-UI component library integration
- ✓3D scene management with Drei helpers
- ✓Responsive design for all devices
- ✓Contact form with EmailJS integration
- ✓React Router for smooth navigation
- ✓Typewriter effect for dynamic text
- ✓Vertical timeline component for experience
- ✓React Tilt for interactive card effects
Technical Architecture
framework
React with Create React App
language
JavaScript
three D
Three.js, @react-three/fiber, @react-three/drei
animations
Framer Motion
ui
Material-UI (MUI)
EmailJS
routing
React Router DOM
styling
Styled Components
deployment
Netlify with gh-pages
Challenges Faced
- ⚠Integrating Three.js with React components
- ⚠Optimizing 3D model performance
- ⚠Managing complex animation sequences
- ⚠Creating smooth transitions between 3D scenes
- ⚠Implementing responsive 3D graphics
- ⚠Optimizing bundle size with heavy 3D libraries
Achievements
- ✓Stunning 3D interactive portfolio
- ✓Seamless 3D/2D integration
- ✓Professional Material-UI design
- ✓Smooth Framer Motion animations
- ✓Production deployment on Netlify
Get in touch
Vehan Rajintha
Full-Stack Developer
Designed & Built by Vehan Rajintha
© 2025, All rights reserved.
Portfolio V2 - 3D Interactive Website
About This Project
A stunning 3D interactive portfolio website built with React and Three.js. Features immersive 3D graphics, smooth animations with Framer Motion, and a modern Material-UI design. Includes 3D scenes, interactive elements, and a fully responsive layout.
Technologies Used
Key Features
- ✓Immersive 3D graphics with Three.js and React Three Fiber
- ✓Interactive 3D models and animations
- ✓Smooth page transitions with Framer Motion
- ✓Material-UI component library integration
- ✓3D scene management with Drei helpers
- ✓Responsive design for all devices
- ✓Contact form with EmailJS integration
- ✓React Router for smooth navigation
- ✓Typewriter effect for dynamic text
- ✓Vertical timeline component for experience
- ✓React Tilt for interactive card effects
Technical Architecture
framework
React with Create React App
language
JavaScript
three D
Three.js, @react-three/fiber, @react-three/drei
animations
Framer Motion
ui
Material-UI (MUI)
EmailJS
routing
React Router DOM
styling
Styled Components
deployment
Netlify with gh-pages
Challenges Faced
- ⚠Integrating Three.js with React components
- ⚠Optimizing 3D model performance
- ⚠Managing complex animation sequences
- ⚠Creating smooth transitions between 3D scenes
- ⚠Implementing responsive 3D graphics
- ⚠Optimizing bundle size with heavy 3D libraries
Achievements
- ✓Stunning 3D interactive portfolio
- ✓Seamless 3D/2D integration
- ✓Professional Material-UI design
- ✓Smooth Framer Motion animations
- ✓Production deployment on Netlify
Contributions
