https://github.com/sanidhyy/3d_portfolio
Amazing 3D Portfolio in React using Three.js
https://github.com/sanidhyy/3d_portfolio
3d 3d-portfolio 3d-website css html javascript js modern-ui modern-ui-ux portfolio react reactjs three threejs website
Last synced: about 1 year ago
JSON representation
Amazing 3D Portfolio in React using Three.js
- Host: GitHub
- URL: https://github.com/sanidhyy/3d_portfolio
- Owner: sanidhyy
- License: mit
- Created: 2023-11-13T09:58:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-29T13:38:54.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T08:09:39.910Z (about 1 year ago)
- Topics: 3d, 3d-portfolio, 3d-website, css, html, javascript, js, modern-ui, modern-ui-ux, portfolio, react, reactjs, three, threejs, website
- Language: JavaScript
- Homepage: https://3-dportfolio.netlify.app/
- Size: 33.8 MB
- Stars: 26
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Amazing 3D Portfolio in React using Three.js
[](https://github.com/sanidhyy "Ask Me Anything!")
[](https://github.com/sanidhyy/3d_portfolio/blob/main/LICENSE "GitHub license")
[](https://github.com/sanidhyy/3d_portfolio/commits/main "Maintenance")
[](https://github.com/sanidhyy/3d_portfolio/branches "GitHub branches")
[](https://github.com/sanidhyy/3d_portfolio/commits "Github commits")
[](https://3-dportfolio.netlify.app/ "Netlify Status")
[](https://github.com/sanidhyy/3d_portfolio/issues "GitHub issues")
[](https://github.com/sanidhyy/3d_portfolio/pulls "GitHub pull requests")
# :notebook_with_decorative_cover: Table of Contents
- [Folder Structure](#bangbang-folder-structure)
- [Getting Started](#toolbox-getting-started)
- [Screenshots](#camera-screenshots)
- [Tech Stack](#gear-tech-stack)
- [Stats](#wrench-stats)
- [Contribute](#raised_hands-contribute)
- [Acknowledgements](#gem-acknowledgements)
- [Buy Me a Coffee](#coffee-buy-me-a-coffee)
- [Follow Me](#rocket-follow-me)
- [Give A Star](#star-give-a-star)
- [Star History](#star2-star-history)
- [Give A Star](#star-give-a-star)
## :bangbang: Folder Structure
Here is the folder structure of 3D Portfolio.
```bash
3d_portfolio/
|- public/
|-- favicon.ico
|- src/
|-- assets/
|--- onboarding/
|--- 3d/
|--- icons/
|--- images/
|--- sakura.mp3
|-- components/
|--- index.js
|-- constants/
|--- index.js
|-- hooks/
|--- useAlert.js
|-- models/
|--- index.js
|-- pages/
|--- index.js
|-- App.jsx
|-- index.css
|-- main.jsx
|- .env.local
|- .env.example
|- vite.config.js
|- package-lock.json
|- package.json
|- postcss.config.js
|- tailwind.config.js
|- .eslintrc.cjs
```
## :toolbox: Getting Started
1. Make sure **Git** and **NodeJS** is installed.
2. Clone this repository to your local computer.
3. Create `.env.local` file in root folder.
4. Contents of `.env.local`:
```bash
# .env.local file
VITE_APP_EMAILJS_SERVICE_ID=service_xxxxxxxxxxxxx
VITE_APP_EMAILJS_TEMPLATE_ID=template_xxxxxxxxxxxx
VITE_APP_EMAILJS_PUBLIC_KEY=XXXXXXXXXXXXXXXXXXXXX
VITE_APP_EMAILJS_TO_EMAIL=
```
5. Open terminal in root directory. Run `npm install` or `yarn install`.
6. Create new account in [EmailJS](emailjs.com "EmailJS")
7. From dashboard Choose Email Services > Add New Service and connect your mail to emailjs.
**NOTE:** Make Sure you type same email in `VITE_APP_EMAILJS_TO_EMAIL` in `.env.local`
8. Once, New service is configured, copy your **service id** to `VITE_APP_EMAILJS_SERVICE_ID`
9. Now, go to Email Templates > Create New Template to create your mail template. Once it is done, you can copy **Template ID** to `VITE_APP_EMAILJS_TEMPLATE_ID`
10. To get your **Public Key**, click on your username on navbar and go to account settings > Copy Public Key to `VITE_APP_EMAILJS_PUBLIC_KEY`
11. Now app is fully configured :+1: and you can start using this app using `npm run dev` or `yarn run dev`. The app is created using vite.
### :books: Additional Resources
- ThreeJS Documentation: https://threejs.org/docs/
- EmailJS Documentation: https://www.emailjs.com/docs/
- Vite Documentation: https://vitejs.dev/guide/
**NOTE:** Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
## :camera: Screenshots:
## :gear: Tech Stack
[](https://react.dev/ "React JS") [](https://vitejs.dev/ "Vite JS") [](https://developer.mozilla.org/en-US/docs/Web/JavaScript/ "JavaScript") [](https://tailwindcss.com/ "Tailwind CSS") [](https://netlify.com/ "Netlify") [](https://threejs.org/ "Three JS")
## :wrench: Stats
[](https://pagespeed-insights-svg.glitch.me/?url=https://3-dportfolio.netlify.app/ "Stats for this App")
## :raised_hands: Contribute
You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
## :gem: Acknowledgements
Useful resources and libraries that are used in My Portfolio
- [React Three Drei](https://github.com/pmndrs/drei "React Three Drei")
- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber "React Three Fiber")
- [React Vertical Timeline Component](https://stephane-monnot.github.io/react-vertical-timeline/ "React Vertical Timeline Component")
- [React Router DOM](https://reactrouter.com/ "React Router DOM")
- [Prettier](https://prettier.io "Prettier")
- [ESLint](https://eslint.org "ESLint")
## :coffee: Buy Me a Coffee
[
](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")
## :rocket: Follow Me
[](https://github.com/sanidhyy "Follow Me")
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2Fmedical-chat-app "Tweet")
[](https://www.youtube.com/channel/UCNAz_hUVBG2ZUN8TVm0bmYw "Subscribe my Channel")
## :star: Give A Star
You can also give this repository a star to show more people and they can use this repository.
## :star2: Star History
