3d-portfolio - GitLite

KO | EN

gitlite — search

#javascript #react #go #deep-learning #linux #docker #nodejs #cli #vue #awesome-list #pytorch #ios #openai #open-source

3d-portfolio

(★ 295)

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

File Explorer

Download Latest Version (.zip)

- - img1.png
  - img2.png
  - img3.png
  - img4.png
  - img_main.png
  - stats.svg
  - step_emailjs.png
- - bug_report.md
  - config.yml
  - feature_request.md
- - update-readme.yml
- dependabot.yml
- FUNDING.yml
- PULL_REQUEST_TEMPLATE.md
- - license.txt
  - scene.bin
  - scene.gltf
- - license.txt
  - scene.bin
  - scene.gltf
- apple-touch-icon.png
- favicon.ico
- favicon16.png
- favicon32.png
- - backend.png
  - bulb.svg
  - close.svg
  - creator.png
  - herobg.png
  - index.ts
  - logo.svg
  - menu.svg
  - mobile.png
  - preview.png
  - web.png
- - about.tsx
  - banner.tsx
  - contact.tsx
  - experience.tsx
  - feedbacks.tsx
  - footer.tsx
  - hero.tsx
  - index.ts
  - loader.tsx
  - navbar.tsx
  - tech.tsx
  - works.tsx
- - index.ts
- - index.ts
  - section-wrapper.tsx
- - lib.ts
  - motion.ts
- app.tsx
- env.d.ts
- index.css
- main.tsx
- styles.ts
.env.example
.gitignore
bun.lock
CODE_OF_CONDUCT.md
CONTRIBUTING.md
index.html
LICENSE.md
netlify.toml
package.json
postcss.config.cjs
README.md
SECURITY.md
tailwind.config.ts
tsconfig.json
tsconfig.tsbuildinfo
vite.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/sanidhyy/3d-portfolio

Downloads the entire project code from GitHub to your computer.

cd 3d-portfolio

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<a name="readme-top"></a>

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

![Modern 3D Portfolio using React, Three.js and Typescript](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/img_main.png "Modern 3D Portfolio using React, Three.js and Typescript")

[![Ask Me Anything!](https://flat.badgen.net/static/Ask%20me/anything?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy "Ask Me Anything!")
[![GitHub license](https://flat.badgen.net/github/license/sanidhyy/3d-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/3d-portfolio/blob/main/LICENSE "GitHub license")
[![Maintenance](https://flat.badgen.net/static/Maintained/yes?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/3d-portfolio/commits/main "Maintenance")
[![GitHub branches](https://flat.badgen.net/github/branches/sanidhyy/3d-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/3d-portfolio/branches "GitHub branches")
[![Github commits](https://flat.badgen.net/github/commits/sanidhyy/3d-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/3d-portfolio/commits "Github commits")
[![GitHub issues](https://flat.badgen.net/github/issues/sanidhyy/3d-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/3d-portfolio/issues "GitHub issues")
[![GitHub pull requests](https://flat.badgen.net/github/prs/sanidhyy/3d-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/3d-portfolio/pulls "GitHub pull requests")
[![Netlify status](https://api.netlify.com/api/v1/badges/5c77ba92-e2f5-468e-99f1-3543906a90cb/deploy-status)](https://shubam.netlify.app/ "Netlify status")

<details>

<summary>

# :notebook_with_decorative_cover: Table of Contents

</summary>

- [Folder Structure](#bangbang-folder-structure)
- [Getting Started](#toolbox-getting-started)
- [Screenshots](#camera-screenshots)
- [Tech Stack](#gear-tech-stack)
- [Stats](#wrench-stats)
- [Contribute](#raised_hands-contribute)
- [Acknowledgements](#gem-acknowledgements)
- [Buy Me a Coffee](#coffee-buy-me-a-coffee)
- [Follow Me](#rocket-follow-me)
- [Learn More](#books-learn-more)
- [Deploy on Netlify](#page_with_curl-deploy-on-netlify)
- [Give A Star](#star-give-a-star)
- [Star History](#star2-star-history)
- [Give A Star](#star-give-a-star)

</details>

## :bangbang: Folder Structure

Here is the folder structure of this app.

```bash
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
```

<br />

## :toolbox: 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
# .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](https://emailjs.com "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.

![Copy public key](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/step_emailjs.png "Copy public key")

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.

## :camera: Screenshots:

![Showcase your skills](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/img1.png "Showcase your skills")

![Showcase your projects](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/img2.png "Showcase your projects")

![Modern UI/UX](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/img3.png "Modern UI/UX")

![Functional Contact form](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/img4.png "Functional Contact form")

## :gear: Tech Stack

[![React JS](https://skillicons.dev/icons?i=react "React JS")](https://react.dev/ "React JS") [![Vite JS](https://skillicons.dev/icons?i=vite "Vite JS")](https://vitejs.dev/ "Vite JS") [![Typescript](https://skillicons.dev/icons?i=ts "Typescript")](https://www.typescriptlang.org/ "Typescript") [![Tailwind CSS](https://skillicons.dev/icons?i=tailwind "Tailwind CSS")](https://tailwindcss.com/ "Tailwind CSS") [![Netlify](https://skillicons.dev/icons?i=netlify "Netlify")](https://netlify.app/ "Netlify")

## :wrench: Stats

[![Stats for 3D Portfolio](https://raw.githubusercontent.com/sanidhyy/3d-portfolio/main/.github/images/stats.svg "Stats for 3D Portfolio")](https://pagespeed.web.dev/analysis?url=https://shubam.netlify.app/ "Stats for 3D Portfolio")

## :raised_hands: 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.

## :gem: Acknowledgements

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

- [@emailjs/browser](https://www.npmjs.com/package/@emailjs/browser): ^4.4.1
- [@react-three/drei](https://www.npmjs.com/package/@react-three/drei): ^10.7.8
- [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber): ^9.7.0
- [@types/react](https://www.npmjs.com/package/@types/react): ^19.2.18
- [@types/react-dom](https://www.npmjs.com/package/@types/react-dom): ^19.2.4
- [@types/react-vertical-timeline-component](https://www.npmjs.com/package/@types/react-vertical-timeline-component): ^3.3.6
- [@types/tailwindcss](https://www.npmjs.com/package/@types/tailwindcss): ^3.1.0
- [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react): ^6.0.5
- [autoprefixer](https://www.npmjs.com/package/autoprefixer): ^10.5.4
- [clsx](https://www.npmjs.com/package/clsx): ^2.1.1
- [framer-motion](https://www.npmjs.com/package/framer-motion): ^13.1.0
- [maath](https://www.npmjs.com/package/maath): ^0.10.8
- [postcss](https://www.npmjs.com/package/postcss): ^8.5.26
- [react](https://www.npmjs.com/package/react): ^19.2.8
- [react-dom](https://www.npmjs.com/package/react-dom): ^19.2.8
- [react-router-dom](https://www.npmjs.com/package/react-router-dom): ^7.18.2
- [react-tilt](https://www.npmjs.com/package/react-tilt): ^1.0.2
- [react-vertical-timeline-component](https://www.npmjs.com/package/react-vertical-timeline-component): ^4.0.0
- [sonner](https://www.npmjs.com/package/sonner): ^2.0.8
- [tailwind-merge](https://www.npmjs.com/package/tailwind-merge): ^3.6.0
- [tailwindcss](https://www.npmjs.com/package/tailwindcss): ^3.4.17
- [three](https://www.npmjs.com/package/three): ^0.185.1
- [three-stdlib](https://www.npmjs.com/package/three-stdlib): ^2.36.1
- [typescript](https://www.npmjs.com/package/typescript): ^7.0.2
- [vite](https://www.npmjs.com/package/vite): ^8.2.1

## :coffee: Buy Me a Coffee

[<img src="https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" width="200" />](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")

## :rocket: Follow Me

[![GitHub followers](https://img.shields.io/github/followers/sanidhyy?style=social&label=Follow&maxAge=2592000)](https://github.com/sanidhyy "Follow Me")
[![Twitter](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fx.com%2F_sanidhyy)](https://x.com/intent/tweet?text=Check+out+this+amazing+app:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2F3d-portfolio "Tweet")

## :books: Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](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](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](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](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](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](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

## :page_with_curl: Deploy on Netlify

The easiest way to deploy your Vite.js app is to use the [Netlify Platform](https://netlify.app).

Check out [Vite.js deployment documentation](https://vitejs.dev/guide/static-deploy) for more details.

## :star: Give A Star

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

## :star2: Star History

<a href="https://star-history.com/#sanidhyy/3d-portfolio&Timeline">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=sanidhyy/3d-portfolio&type=Timeline&theme=dark" />
  <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=sanidhyy/3d-portfolio&type=Timeline" />
  <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=sanidhyy/3d-portfolio&type=Timeline" />
</picture>
</a>

<br />
<p align="right">(<a href="#readme-top">back to top</a>)</p>