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/
  |- src/
    |-- assets/
    |-- 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.example
  |- .env/.env.local
  |- .gitignore
  |- bun.lock
  |- index.html
  |- netlify.toml
  |- package.json
  |- postcss.config.cjs
  |- tailwind.config.ts
  |- tsconfig.json
  |- tsconfig.tsbuildinfo
  |- 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

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

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

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

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

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

2. 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: ^4.4.1
• @react-three/drei: ^10.7.7
• @react-three/fiber: ^9.6.1
• @types/react: ^19.2.17
• @types/react-dom: ^19.2.3
• @types/react-vertical-timeline-component: ^3.3.6
• @types/tailwindcss: ^3.1.0
• @vitejs/plugin-react: ^6.0.4
• autoprefixer: ^10.5.4
• clsx: ^2.1.1
• framer-motion: ^12.42.2
• maath: ^0.10.8
• postcss: ^8.5.23
• react: ^19.2.8
• react-dom: ^19.2.8
• react-router-dom: ^7.18.1
• react-tilt: ^1.0.2
• react-vertical-timeline-component: ^4.0.0
• sonner: ^2.0.7
• tailwind-merge: ^3.6.0
• tailwindcss: ^3.4.17
• three: ^0.185.1
• three-stdlib: ^2.36.1
• typescript: ^7.0.2
• vite: ^8.1.5

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