https://github.com/somnath229/3dpfolio
3D Protfolio
https://github.com/somnath229/3dpfolio
javascript react-motion reactjs three-js
Last synced: 22 days ago
JSON representation
3D Protfolio
- Host: GitHub
- URL: https://github.com/somnath229/3dpfolio
- Owner: somnath229
- Created: 2025-11-04T14:51:29.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-01T12:01:04.000Z (6 months ago)
- Last Synced: 2025-12-04T00:29:20.058Z (6 months ago)
- Topics: javascript, react-motion, reactjs, three-js
- Language: JavaScript
- Homepage: https://somnathdubey.netlify.app/
- Size: 15.1 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#🌌React 3D Motion — Interactive 3D portfolio with React, Three.js & React Motion
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
It integrates **Three.js** for powerful 3D rendering and **React Motion** for smooth, physics-based animations — allowing you to build dynamic, interactive 3D experiences directly in React.
---
## 🚀 Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/your-username/react-3d-motion.git
cd 3dpfolio
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Run the Development Server
```bash
npm start
```
Runs the app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes, and you may also see lint errors in the console.
---
## 🧱 Built With
* ⚛️ [React](https://reactjs.org/) — UI library for building dynamic interfaces
* 🎨 [Three.js](https://threejs.org/) — 3D graphics engine for WebGL rendering
* 💫 [React Motion](https://github.com/chenglou/react-motion) — physics-based animation library for React
* 🧰 [Create React App](https://github.com/facebook/create-react-app) — for zero-config setup and build system
---
## 📜 Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in development mode.
### `npm test`
Launches the test runner in interactive watch mode.
See [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more info.
### `npm run build`
Builds the app for production to the `build` folder.
It bundles React in production mode and optimizes for best performance.
### `npm run eject`
**Note:** This is a one-way operation. Once you `eject`, you can’t go back!
It copies all configuration files (Webpack, Babel, ESLint, etc.) into your project for full customization.
---
## 🌈 Example Features
* 🎮 Interactive 3D scenes built with Three.js
* 🌀 Smooth animations with React Motion
* 🧭 Responsive and dynamic UI with React hooks
* 🔄 Real-time updates and scene transitions
---
## 🧩 Folder Structure
```
react-3d-motion/
│
├── public/
│ └── index.html
│ └── asseted
│
├── src/
│ ├── components/
│ │ ├── Main.js
│ │ ├── Navbar.js
│ │ └── Projects.js
│ ├── assets/
│ ├── App.js
│ ├── index.js
│ └── styles/
│
└── package.json
```
---
## 🧠 Learn More
* [React Documentation](https://reactjs.org/docs/getting-started.html)
* [Three.js Documentation](https://threejs.org/docs/)
* [React Motion Docs](https://github.com/chenglou/react-motion)
* [Create React App Docs](https://facebook.github.io/create-react-app/docs/getting-started)
---
## 📦 Deployment
See the [deployment guide](https://facebook.github.io/create-react-app/docs/deployment) for more information.
You can easily deploy using:
* **Vercel**
* **Netlify**
* **GitHub Pages**
* or any static hosting provider.
---
## 🛠 Troubleshooting
If `npm run build` fails to minify, check:
[CRA Troubleshooting Guide](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
---
## 📄 License
This project is licensed under the **MIT License** — feel free to use, modify, and distribute!
---
> 💡 *Built with love using React, Three.js, and React Motion.*