Here is the folder structure of this app.

3d-portfolio/
  |- netlify/
    |-- functions/
  |- 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
    |-- hooks/
      |--- use-in-view.ts
      |--- use-limited-webgl.ts
    |-- lib/
      |--- contact.ts
    |-- utils/
      |--- lib.ts
      |--- motion.ts
    |-- app.tsx
    |-- env.d.ts
    |-- index.css
    |-- main.tsx
    |-- styles.ts
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- index.html
  |- netlify.toml
  |- package.json
  |- pnpm-lock.yaml
  |- pnpm-workspace.yaml
  |- tsconfig.json
  |- vite.config.ts

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:

# resend
RESEND_API_KEY="re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
RESEND_FROM_EMAIL="Your Name <me@example.com>"
CONTACT_TO_EMAIL="contact@example.com"
CONTACT_SITE_URL="https://example.com"
RESEND_TEMPLATE_CONTACT_USER="contact-thank-you"
RESEND_TEMPLATE_CONTACT_ADMIN="contact-admin"

# google recaptcha v3
VITE_RECAPTCHA_SITE_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
RECAPTCHA_SECRET_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
RECAPTCHA_MIN_SCORE="0.5"

5. Create an account at Resend and add + verify a sending domain.

6. Create an API key at Resend API Keys with Sending access. Copy it to RESEND_API_KEY.

7. Set RESEND_FROM_EMAIL to an address on that verified domain. Set CONTACT_TO_EMAIL to the inbox that should receive new contact notifications. Set CONTACT_SITE_URL to your site's public URL (no trailing slash).

8. In Resend Templates, create two templates and Publish each.

   Template 1 — thank you to the user

   • Name: contact-thank-you
   • Variables: USER_NAME, USER_MESSAGE, SITE_URL

   Template 2 — new message to admin

   • Name: contact-admin
   • Variables: USER_NAME, USER_EMAIL, USER_MESSAGE, SITE_URL

   Copy each template's alias into RESEND_TEMPLATE_CONTACT_USER and RESEND_TEMPLATE_CONTACT_ADMIN.

9. Create a Google reCAPTCHA v3 project. Choose Score based (v3), add your production domain(s) and localhost, then copy the Site key to VITE_RECAPTCHA_SITE_KEY and the Secret key to RECAPTCHA_SECRET_KEY.

10. Open terminal in root directory. Run npm install --legacy-peer-deps or pnpm install --legacy-peer-deps.

11. Now the app is fully configured 👍 and you can start it with npm run dev or pnpm dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

If you run into issues during installation or setup:

• GitHub Discussions — Open a Q&A discussion for setup and troubleshooting help.
• Email — sanidhyyy@gmail.com
• Discord — @sanidhyy

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.

Useful resources and dependencies that are used in 3D Portfolio.

• @netlify/functions: ^6.0.2
• @netlify/vite-plugin: ^3.0.1
• @react-three/drei: ^10.7.8
• @react-three/fiber: ^9.8.1
• @tailwindcss/vite: ^4.3.3
• @types/node: ^26.6.4
• @types/react: ^19.2.18
• @types/react-dom: ^19.2.7
• @types/react-vertical-timeline-component: ^3.3.6
• @vitejs/plugin-react: ^6.1.2
• clsx: ^2.1.1
• framer-motion: ^13.4.4
• maath: ^0.10.8
• react: ^19.2.8
• react-dom: ^19.2.8
• react-google-recaptcha-v3: ^1.11.0
• react-router-dom: ^7.18.4
• react-tilt: ^1.0.2
• react-vertical-timeline-component: ^4.0.0
• resend: ^6.32.0
• sonner: ^2.0.8
• tailwind-merge: ^3.7.0
• tailwindcss: ^4.3.3
• three: ^0.186.1
• three-stdlib: ^2.36.1
• typescript: ^7.0.2
• vite: ^8.3.2

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

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

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

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

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

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

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

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

Check out Vite.js deployment documentation for more details.

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

(back to top)