https://github.com/lankesathwik7/3d-portfolio
An immersive and interactive 3D portfolio website built with Three.js and React, featuring animated models, GSAP animations, and responsive design. This project showcases modern web development skills through an engaging visual experience.
https://github.com/lankesathwik7/3d-portfolio
3d-portfolio gsap portfolio-website react react-three-drei react-three-fiber tailwindcss three-js threejs vite
Last synced: 2 months ago
JSON representation
An immersive and interactive 3D portfolio website built with Three.js and React, featuring animated models, GSAP animations, and responsive design. This project showcases modern web development skills through an engaging visual experience.
- Host: GitHub
- URL: https://github.com/lankesathwik7/3d-portfolio
- Owner: LankeSathwik7
- License: apache-2.0
- Created: 2025-04-14T03:06:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-14T03:42:19.000Z (about 1 year ago)
- Last Synced: 2025-04-14T04:33:18.397Z (about 1 year ago)
- Topics: 3d-portfolio, gsap, portfolio-website, react, react-three-drei, react-three-fiber, tailwindcss, three-js, threejs, vite
- Language: JavaScript
- Homepage: https://3d-portfolio-bay-phi.vercel.app/
- Size: 9.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 3D Portfolio
An immersive and interactive 3D portfolio website built with Three.js and React, showcasing my skills, projects, and creativity in a unique visual experience.
## 🌟 Live Demo
[View the live site](https://3d-portfolio-bay-phi.vercel.app/)
## 🤖 Introduction
This 3D Portfolio is a modern, engaging personal website featuring animated 3D scenes, smooth camera transitions, interactive model showcases, and responsive design. It's the perfect way to stand out in the digital crowd and showcase my skills as a developer.
This project was built following the JavaScript Mastery tutorial, with my own customizations and enhancements added throughout the development process.
## ⚙️ Tech Stack
- **Three.js** - 3D graphics library
- **React Three Fiber** - React renderer for Three.js
- **Drei** - Useful helpers for React Three Fiber
- **GSAP** - Animation library
- **Tailwind CSS** - Utility-first CSS framework
- **Vite** - Next generation frontend tooling
- **React 19** - JavaScript library for building user interfaces
## 🔋 Features
- 👉 **Animated 3D models** with smooth reveal animations
- 👉 **Realistic lighting and shadows** for immersive scenes
- 👉 **GSAP-powered scroll interactions** for engaging user experience
- 👉 **Responsive design** with Tailwind CSS, adapting to all screen sizes
- 👉 **Micro-interactions** adding polish and delight
- 👉 **Multi-section layout** (About, Projects, Contact) for organized content
- 👉 **Mobile-optimized 3D experience** for all devices
## 🤸 Quick Start
Follow these steps to set up the project locally on your machine:
### Prerequisites
Make sure you have the following installed:
- Git
- Node.js
- npm (Node Package Manager)
### Cloning the Repository
```bash
git clone https://github.com/LankeSathwik7/3d-Portfolio.git
cd 3d-Portfolio
```
### Installation
Install the project dependencies:
```bash
npm install
```
### Running the Project
```bash
npm run dev
```
Open http://localhost:5173 in your browser to view the project.
## 📁 Project Structure
```
3d-Portfolio/
├── public/ # Static assets and 3D models
│ ├── images/ # Images and UI assets
│ └── models/ # 3D models (.glb files)
├── src/
│ ├── components/ # React components
│ │ └── models/ # 3D model components
│ ├── constants/ # Constants and data
│ ├── sections/ # Page sections
│ ├── App.jsx # Main application component
│ └── main.jsx # Entry point
├── index.html # HTML entry point
├── package.json # Project dependencies and scripts
└── vite.config.js # Vite configuration
```
## 🔧 Customization
To customize the portfolio for your own use:
1. Replace the 3D models in the `public/models` directory with your own models
2. Update project information in `src/constants`
3. Modify the color scheme in your CSS
4. Change personal information and links throughout the components
## 📱 Responsive Design
The portfolio is fully responsive, providing an optimal viewing experience across a wide range of devices:
- Desktop displays
- Tablets
- Mobile phones
## 🙏 Acknowledgements
This project was built following the [JavaScript Mastery](https://www.youtube.com/@javascriptmastery) tutorial. Special thanks to:
- Adrian Hajdin for the excellent tutorial and guidance
- The Three.js and React Three Fiber communities for their amazing tools
- All the open-source contributors who make projects like this possible
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.