A 3D-Portfolio Designed Using Vite - React along with Tailwind CSS for Designs, Three JS for 3D-Models, Email JS for Mail Management and FramerMotions for Different Animation.
Installing Node Js and NPM:
Recommended : 18.16.0 LTS and above
Note: --legacy-peer-deps is used for version Controls.
Creating a React Template via Vite:
npm create vite@latest ./ -- --template react
Installing and Initializing Tailwind CSS:
npm install -D tailwindcss
npx tailwindcss init
Installing Requirements:
npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-domInitializing Tailwind CSS Compatible for Vite:
npm install --legacy-peer-deps -D postcss autoprefixer
npx tailwindcss init -p
Installing three:
npm install --legacy-peer-deps threeVisual Studio Code
WebStorm IDE
If WebStorm IDE is installed on your PC, you can simply run the following commands to start the project locally:
To install all the dependencies:
npm installTo run:
npm run devThen, open your browser and navigate to http://localhost:5173 to view the project.
Creating and using a Service from Email.JS:
Outputs Required from the Services are:
SERVICE_KEY
TEMPLATE_KEY
PUBLIC_KEY
And Use the Above Three Here
Clone the project
git clone https://github.com/Mukuta-Manit-D/Portfolio-Mukuta.gitGo to the project directory
cd my-projectInstall dependencies
npm installStart the server
npm run startCan also use
npm run devTo deploy this project run
npm run deployUsables:
The Current Project is Built and deployed Using Github Pages on live:
- Usage of 3D Models
- Usage of Framer Motions
- Usage of Email JS Services for Mailing System
- Form Validations
- Usage of Vertical Timeline and Tilt Cards
Check out the Output site for the Project Here
If you have any feedback, please reach out to us at mukutamanitd6@gmail.com