create nav + base css

src/About.jsx

@@ -1,9 +0,0 @@
-function About() {
-  return (
-    <div>
-      <h1>Welcome to About</h1>
-    </div>
-  );
-}
-
-export default About;

src/App.css

@@ -0,0 +1,25 @@
+.container {
+  border: 2px solid red;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.nav {
+  background-color: rgb(84, 84, 84);
+  height: 3em;
+}
+
+.nav-items {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  align-items: center;
+}
+
+.menu-items {
+  display: flex;
+}
+
+.menu-items div {
+  margin-right: 1em;
+}

src/App.jsx

@@ -1,17 +1,19 @@
 import "./App.css";
 import { Routes, Route, Link } from "react-router-dom";
-import Home from "./Home";
+import Home from "./pages/Home";
-import About from "./About";
+import Experiance from "./pages/Experiance";
+import Contact from "./pages/Contact";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 
 function App() {
   return (
-    <div className="App">
+    <div>
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="about" element={<About />} />
+        <Route path="experiance" element={<Experiance />} />
+        <Route path="contact" element={<Contact />} />
       </Routes>
       <Footer />
     </div>

src/Home.jsx

@@ -1,9 +0,0 @@
-function Home() {
-  return (
-    <div>
-      <h1>Welcome to Home</h1>
-    </div>
-  );
-}
-
-export default Home;

src/components/Footer.jsx

@@ -1,5 +1,5 @@
 function Footer() {
-  return <div>Footer</div>;
+  return <div className="container">Footer</div>;
 }
 
 export default Footer;

src/components/Header.jsx

@@ -1,5 +1,26 @@
+import { Routes, Route, Link } from "react-router-dom";
+
 function Header() {
-  return <div>Header</div>;
+  return (
+    <div className="nav">
+      <div className="container nav-items">
+        <div className="logo">
+          <Link to="/">LOGO</Link>
+        </div>
+        <div className="menu-items">
+          <div>
+            <Link to="/">About</Link>
+          </div>
+          <div>
+            <Link to="/experiance">Experiance</Link>
+          </div>
+          <div>
+            <Link to="/contact">Contact</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Header;

src/index.css

@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}

src/pages/Contact.jsx

@@ -0,0 +1,9 @@
+function Contact() {
+  return (
+    <div className="container">
+      <h1>Welcome to Contact</h1>
+    </div>
+  );
+}
+
+export default Contact;

src/pages/Experiance.jsx

@@ -0,0 +1,9 @@
+function Experiance() {
+  return (
+    <div className="container">
+      <h1>Welcome to Experiance</h1>
+    </div>
+  );
+}
+
+export default Experiance;

src/pages/Home.jsx

@@ -0,0 +1,9 @@
+function Home() {
+  return (
+    <div className="container">
+      <h1>Welcome to Home + About me</h1>
+    </div>
+  );
+}
+
+export default Home;