Modern UI/UX Portfolio using React and Three.js

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

threejs-portfolio/
  |- public/
    |-- assets/
    |-- models/
    |-- textures/
    |-- apple-icon.png
    |-- favicon.ico
    |-- favicon1.png
    |-- favicon2.png
  |- src/
    |-- components/
        |--- Button.tsx
        |--- CanvasLoader.tsx
        |--- Cube.tsx
        |--- DemoComputer.tsx
        |--- Developer.tsx
        |--- HackerRoom.tsx
        |--- HeroCamera.tsx
        |--- ReactLogo.tsx
        |--- Rings.tsx
        |--- Target.tsx
    |-- constants/
        |--- index.ts
    |-- lib/
        |--- utils.ts
    |-- sections/
        |--- About.tsx
        |--- Clients.tsx
        |--- Contact.tsx
        |--- Experience.tsx
        |--- Footer.tsx
        |--- Hero.tsx
        |--- Navbar.tsx
        |--- Projects.tsx
    |-- App.tsx
    |-- index.css
    |-- main.tsx
    |-- vite-env.d.ts
  |- .env.local.example
  |- .env.local.local
  |- .gitignore
  |- .prettierrc
  |- bun.lockb
  |- eslint-config.js
  |- index.html
  |- package.json
  |- postcss.config.js
  |- tailwind.config.js
  |- tsconfig.app.json
  |- tsconfig.json
  |- tsconfig.node.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.local file in root directory.
4. Contents of .env.local:

# .env.local

# emailjs configuration
VITE_APP_SERVICE_ID=service_xxxxxxxxxx
VITE_APP_TEMPLATE_ID=template_xxxxxxxxxx
VITE_APP_EMAIL=<your-email-here>
VITE_APP_PUBLIC_KEY=xxxxxxxxxxxxxx

5. Service ID (Replace VITE_APP_SERVICE_ID):

• Visit EmailJS Website.
• Log in to your account or sign up with new account.
• Navigate to the API keys or services section.
• Find and copy the Service ID associated with your account.

6. Template ID (Replace VITE_APP_TEMPLATE_ID):

• Access the section for email templates or integration.
• Locate the template you want to use or create a new one and copy its Template ID.

7. EmailJS Public Key (Replace VITE_APP_PUBLIC_KEY):

• 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_EMAIL):

• Enter the email address where you want to receive emails.
• 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 or bun install --legacy-peer-deps to install dependencies.

10. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or bun 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 Threejs portfolio.

• @emailjs/browser: ^4.4.1
• @gsap/react: ^2.1.1
• @react-three/drei: ^9.113.0
• @react-three/fiber: ^8.17.8
• clsx: ^2.1.1
• gsap: ^3.12.5
• leva: ^0.9.35
• maath: ^0.10.8
• react: ^18.3.1
• react-dom: ^18.3.1
• react-globe.gl: ^2.27.2
• react-responsive: ^10.0.0
• sonner: ^1.5.0
• tailwind-merge: ^2.5.2
• three: ^0.168.0
• @eslint/js: ^9.9.0
• @types/react: ^18.3.3
• @types/react-dom: ^18.3.0
• @vitejs/plugin-react: ^4.3.1
• autoprefixer: ^10.4.20
• eslint: ^9.9.0
• eslint-plugin-react: ^7.36.1
• eslint-plugin-react-hooks: ^5.1.0-rc.0
• eslint-plugin-react-refresh: ^0.4.9
• globals: ^15.9.0
• postcss: ^8.4.47
• prettier: ^3.3.3
• prettier-plugin-tailwindcss: ^0.6.8
• tailwindcss: ^3.4.13
• typescript: ^5.5.3
• typescript-eslint: ^8.0.1
• vite: ^5.4.1

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To deepen your understanding of React.js and Netlify, explore the following resources:

• React.js Documentation - delve into React.js features, concepts, and API.
• React Official Tutorial - an interactive tutorial to get hands-on experience with React.

For Netlify-specific information:

• Netlify Documentation - learn about Netlify's features, deployment options, and more.
• Getting Started with Netlify and React - a guide on deploying React applications on Netlify.

You're encouraged to contribute and provide feedback on Netlify's GitHub repository.

📃 Deploy on Netlify

The simplest way to deploy your React.js app is to use the Netlify Platform - a powerful platform for modern web projects.

Explore the Netlify deployment documentation for step-by-step instructions on deploying your React.js app on Netlify.

Happy coding, and feel free to share your thoughts and improvements with the Netlify community!

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