Amazing 3D Portfolio in React using Three.js

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Give A Star
• Star History
• Give A Star

‼️ 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

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

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

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

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

💎 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

☕ Buy Me a Coffee

🚀 Follow Me

⭐ Give A Star

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

🌟 Star History

(back to top)