Modern 3D Portfolio using React, Three.js and Typescript
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
.env
file in root directory..env
:# .env
# email js configuration
VITE_APP_SERVICE_ID=XXXXXXXXXXXXXXXX
VITE_APP_TEMPLATE_ID=XXXXXXXXXXXXXXXX
VITE_APP_EMAILJS_KEY=XXXXXXXXXXXXXXXX
[email protected]
Open terminal in root directory. Run npm install --legacy-peer-deps
or yarn install --legacy-peer-deps
.
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.
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.
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
yarn run build
fails to minifyThis 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.