swarnim55/3d-portfolio

3d Portfolio Application with Vite, React JS and Three.js

3d-portfolio

3d Portfolio Application with React and 3js

1. Initialized React App Using Vite (npm create vite@latest ./ -- -- template react)
2. Installed TailWind CSS. (npm install -D tailwindcss)
3. Initialize TailWind CSS. (npx tailwindcss init)
4. Installed Additional Libraries (3js/ 3js(Math)/ tilt/ vertical-timeline/ emailjs )(npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom)
5. Added 3d models, assets and components
6. Added styling components and config for tailwind
7. Added framer motion animation in motion.js
8. Implemented a dummy portfolio dataset for futher reusability.
9. Imported BrowserRouter and other components to the App.jsx file
10. Added navbar component with dymanic sections and mobile responsiveness.
11. Created slider(hero) section and added 3d computer model with framer motion and threejs
12. Added animated scroller below slider section to link to about section.
13. Created about section with motion framer and added a higher order component for wrapping.
14. Added experience section with vertical timeline.
15. Created Tech Section with Ball Loader and Canvas from Three Fiber.
16. Created Project Section with React Tilt.
17. Added Feedback Section
18. Created Contact Form with 3d earth model with framer motion and emailjs to let users send email to contact.
19. Added stars background to the contact form section.
20. Added EmailJs API to receive email from users.