This is a project where I built a personal portfolio.
Link to the finalized website (click on the Link below): 👇
https://ayandas.cloud/
Note: The framework used to build this app was React, which contained various javascript based libraries such as three.js, framer-motion, react-router-dom, react-three-fiber/drei etc. Vite was used to keep track of live changes made to the website, which made the build process a lot more efficient since the changes were being made live.
Prerequisite: Install node.js on your device.
Step 1: Open up an empty folder on visual studio, go to "view" -> "terminal" and type in "npm create vite@latest". To learn more about vite, check out the following link: https://www.npmjs.com/package/create-vite
Rather than typing in "npm install" afterwards as instructured, type in the following instruction on your terminal:
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, this will install the neccessary react based dependancies.
Step 2: Install the dependancies needed for tailwind css, which is a CSS based framework which will speed up the design process: npm install -D tailwindcss The to initialize it: npx tailwindcss innit Majority of the classname keywords are based on tailwindcss, each keyword connects to different set of CSS code, and we can look them up on the official tailwindcss website in the following link: https://tailwindcss.com/