This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
Personal Portfolio website using more advanced React and tailwind UI components.
Use the package manager pip to install foobar.
npm install
npm run dev
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emailjs/browser": "^3.11.0",
"@react-three/drei": "^9.88.17",
"@react-three/fiber": "^8.15.11",
"framer-motion": "^10.16.5",
"maath": "^0.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.19.0",
"react-router-hash-link": "^2.4.3",
"react-tilt": "^1.0.2",
"react-vertical-timeline-component": "^3.6.0",
"three": "^0.158.0"
},
"devDependencies": {
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.16",
"dotenv": "^16.3.1",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"vite": "^5.0.0"
}
The goal of this project was to incorporate more advanced UI components and functionality (for instance the nav bar / project links / contact page.) Some of the more advanced functionality such as the 3d Earth Component was already provided, in addition to the standard styles.css file, however I used tailwind throughout the project.