Modern 3D Portfolio using React, Three.js and Typescript

📔 Table of Contents

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

‼️ Folder Structure

Here is the folder structure of this app.

3d-portfolio/
  |- public/
    |-- desktop_pc/
    |-- planet/
    |-- apple-touch-icon.png
    |-- favicon.ico
    |-- favicon16.png
    |-- favicon32.png
  |- src/
    |-- assets/
        |--- company/
        |--- projects/
        |--- socials/
        |--- tech/
        |--- testimonials/
        |--- index.ts
    |-- components/
        |--- canvas/
        |--- about.tsx
        |--- banner.tsx
        |--- contact.tsx
        |--- experience.tsx
        |--- feedbacks.tsx
        |--- footer.tsx
        |--- hero.tsx
        |--- index.ts
        |--- loader.tsx
        |--- navbar.tsx
        |--- tech.tsx
        |--- works.tsx
    |-- constants/
        |--- index.ts
    |-- hoc/
        |--- index.ts
        |--- section-wrapper.tsx
    |-- utils/
        |--- lib.ts
        |--- motion.ts
    |-- app.tsx
    |-- env.d.ts
    |-- index.css
    |-- main.tsx
    |-- styles.ts
  |- .env
  |- .env.example
  |- .gitignore
  |- index.html
  |- package-lock.json
  |- package.json
  |- postcss.config.cjs
  |- tailwind.config.ts
  |- tsconfig.json
  |- vite.config.ts

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env file in root directory.
4. Contents of .env:

# .env

# email js configuration
VITE_APP_SERVICE_ID=XXXXXXXXXXXXXXXX
VITE_APP_TEMPLATE_ID=XXXXXXXXXXXXXXXX
VITE_APP_EMAILJS_KEY=XXXXXXXXXXXXXXXX
VITE_APP_EMAILJS_RECIEVER=your@email.com

5. Service ID (Replace VITE_APP_SERVICE_ID):

• Visit the website where you are obtaining the service ID.
• Log in to your account or sign up if needed.
• Navigate to the section related to API keys or services.
• Find and copy the Service ID associated with your account.

6. Template ID (Replace VITE_APP_TEMPLATE_ID):

• Visit EmailJS Website.
• Log in to your account or sign up if necessary.
• Access the section for email templates or integration.
• Locate the template you want to use and copy its Template ID.

7. EmailJS Public Key (Replace VITE_APP_EMAILJS_KEY):

• Go to the EmailJS website.
• Log in to your account or create one if you haven't.
• Navigate to the dashboard or settings page.
• Look for API keys or integration settings.
• Copy the Public Key associated with your account.

8. EmailJS Receiver (Replace VITE_APP_EMAILJS_RECIEVER):

• Choose the email address where you want to receive emails.
• If needed, create an email address or use an existing one.
• Ensure that the chosen email address is accessible and ready to receive emails.

9. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

10. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

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 dependencies that are used in 3D Portfolio.

• @emailjs/browser: ^3.11.0
• @react-three/drei: ^9.96.1
• @react-three/fiber: ^8.13.4
• clsx: ^2.1.0
• framer-motion: ^10.12.18
• maath: ^0.10.7
• react: ^18.2.0
• react-dom: ^18.2.0
• react-router-dom: ^6.21.3
• react-tilt: ^1.0.2
• react-vertical-timeline-component: ^3.6.0
• sonner: ^1.3.1
• tailwind-merge: ^2.2.1
• three: ^0.160.1
• @types/react: ^18.2.48
• @types/react-dom: ^18.2.18
• @types/react-vertical-timeline-component: ^3.3.6
• @types/tailwindcss: ^3.1.0
• @vitejs/plugin-react: ^4.0.3
• autoprefixer: ^10.4.17
• postcss: ^8.4.31
• tailwindcss: ^3.3.3
• typescript: ^5.3.3
• vite: ^5.0.12

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

📃 Deploy on Netlify

The easiest way to deploy your Vite.js app is to use the Netlify Platform.

Check out Vite.js deployment documentation for more details.

⭐ 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)