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

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 👍 and you can start using this app using npm run dev or yarn run dev. The app is created using vite.

• 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.

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.

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

You can also give this repository a star to show more people and they can use this repository.

(back to top)