-

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@react-three/fiber": "^8.15.19",
     "react-router-dom": "^6.22.2"
   }
 }

portfolio-react-threeJS/client/notes.md

@@ -11,4 +11,4 @@ tailwind with vite - https://tailwindcss.com/docs/guides/vite
 [assets folder](https://drive.google.com/file/d/1TACDN8qFpi_NW66I4p48R9_MUmx-JT3P/edit?pli=1)
 [github gist](https://gist.github.com/adrianhajdin/7bc0603ee0b1bd2872b80a62c24b5e5f#file-index-js)
 
-npm install react-router-dom
+npm install react-router-dom @react-three/fiber

portfolio-react-threeJS/client/src/App.jsx

@@ -1,16 +1,18 @@
 import './App.css'
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'
+import Navbar from './components/Navbar'
+import { About, Contact, Home, Projects } from './pages'
 
 function App() {
 	return (
 		<main className=' bg-slate-300/20'>
 			<Router>
-				Navbar
+				<Navbar/>
 				<Routes>
-					<Route path='/' element={'Home'} />
-					<Route path='/about' element={'About'} />
-					<Route path='/project' element={'Project'} />
-					<Route path='/contact' element={'Contact'} />
+					<Route path='/' element={<Home/>} />
+					<Route path='/about' element={<About/>} />
+					<Route path='/project' element={<Projects/>} />
+					<Route path='/contact' element={<Contact/>} />
 				</Routes>
 			</Router>
 		</main>

portfolio-react-threeJS/client/src/components/Navbar.jsx

@@ -0,0 +1,22 @@
+import { NavLink } from 'react-router-dom'
+
+const Navbar = () => {
+	return (
+		<header className='header'>
+			<NavLink to='/' className='w-10 h-10 rounded-lg bg-white items-center justify-center flex font-bold shadow-md'>
+				<p className='blue-gradient_text'>AH</p>
+			</NavLink>
+			<nav className='flex text-lg gap-7 font-medium'>
+				{/* NEW */}
+				<NavLink to='/about' className={({ isActive }) => (isActive ? 'text-blue-500' : 'text-black')}>
+					About
+				</NavLink>
+				<NavLink to='/projects' className={({ isActive }) => (isActive ? 'text-blue-500' : 'text-black')}>
+					Projects
+				</NavLink>
+			</nav>
+		</header>
+	)
+}
+
+export default Navbar

portfolio-react-threeJS/client/src/pages/About.jsx

@@ -0,0 +1,10 @@
+
+const About = () => {
+  return (
+	<div>
+
+	</div>
+  )
+}
+
+export default About

portfolio-react-threeJS/client/src/pages/Contact.jsx

@@ -0,0 +1,5 @@
+const Contact = () => {
+	return <div></div>
+}
+
+export default Contact