Amazing 3D Portfolio in React using Three.js

:bangbang: Folder Structure

Here is the folder structure of 3D Portfolio.

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:

# .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=<your-email-here>

5. Open terminal in root directory. Run npm install or yarn install.

6. Create new account in 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

:wrench: Stats

: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
• React Three Fiber
• React Vertical Timeline Component
• React Router DOM
• Prettier
• ESLint

:coffee: Buy Me a Coffee

:rocket: Follow Me

: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

(back to top)