Skip to content

sanidhyy/3d-portfolio

Repository files navigation

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

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

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits GitHub issues GitHub pull requests Netlify status

πŸ“” Table of Contents

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

Copy public key

  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:

Showcase your skills

Showcase your projects

Modern UI/UX

Functional Contact form

βš™οΈ Tech Stack

React JS Vite JS Typescript Tailwind CSS Netlify

πŸ”§ Stats

Stats for 3D Portfolio

πŸ™Œ 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.

β˜• Buy Me a Coffee

πŸš€ Follow Me

GitHub followers Twitter YouTube

πŸ“š 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

Star History Chart

(back to top)