navigation done only animations left to do for it

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "animate.css": "^4.1.1",
+        "clsx": "^2.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^7.0.2",
@@ -1785,6 +1786,14 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "animate.css": "^4.1.1",
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.2",

src/App.jsx

@@ -3,6 +3,10 @@ import Layout from "./layout/Layout";
 import { Route, Routes } from "react-router-dom";
 import Home from "./components/Home";
 import "./App.css";
+import About from "./components/mainViews/About";
+import Experience from "./components/mainViews/Experience";
+import Projects from "./components/mainViews/Projects";
+import Contact from "./components/mainViews/Contact";
 
 const App = () => {
   return (
@@ -10,6 +14,10 @@ const App = () => {
       {/* <Layout> */}
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/workExp" element={<Experience />} />
+        <Route path="/projects" element={<Projects />} />
+        <Route path="/contact" element={<Contact />} />
       </Routes>
       {/* </Layout> */}
     </main>

src/assets/icons/navIcons/address-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M512 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l448 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM208 256a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16l192 0c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80l-64 0zM376 144c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0z"/></svg>

src/assets/icons/navIcons/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>

src/assets/icons/navIcons/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>

src/assets/icons/navIcons/house.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

src/assets/icons/navIcons/suitcase.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M176 56l0 40 160 0 0-40c0-4.4-3.6-8-8-8L184 48c-4.4 0-8 3.6-8 8zM128 96l0-40c0-30.9 25.1-56 56-56L328 0c30.9 0 56 25.1 56 56l0 40 0 32 0 352-256 0 0-352 0-32zM64 96l32 0 0 384-32 0c-35.3 0-64-28.7-64-64L0 160c0-35.3 28.7-64 64-64zM448 480l-32 0 0-384 32 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64z"/></svg>

src/components/Hero.jsx

@@ -15,7 +15,7 @@ const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
         <span>
           Hi, I'm Yousif. <br />
         </span>{" "}
-        I'm a Full-Stack Developer from Germany.
+        I'm a Full-Stack Developer from <span>Germany</span>.
       </p>
     </div>
   );

src/components/Home.jsx

@@ -37,7 +37,11 @@ const Home = () => {
       <LangSelect />
       <Mail />
       <Switch />
-      <Navigation />
+      <Navigation
+        initialAnimation="animate__backInDown"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
       <div className="linkedIn container">
         <LinkedInIcon className="linkedInIcon" />
       </div>

src/components/Navigation.jsx

@@ -1,8 +1,49 @@
 import React from "react";
 import "../css/Navigation.css";
+import { useState } from "react";
+import AddressCardIcon from "../assets/icons/navIcons/address-card.svg?react";
+import CodeIcon from "../assets/icons/navIcons/code.svg?react";
+import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react";
+import HouseIcon from "../assets/icons/navIcons/house.svg?react";
+import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react";
+import { NavLink } from "react-router-dom";
+import clsx from "clsx";
 
-const Navigation = () => {
+const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
-  return <div className="navigation container">Nav</div>;
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  const navItems = [
+    { name: "Home", to: "/", icon: HouseIcon, id: 1 },
+    { name: "About", to: "/about", icon: AddressCardIcon, id: 2 },
+    { name: "Experience", to: "/workExp", icon: SuitcaseIcon, id: 3 },
+    { name: "Projects", to: "/projects", icon: CodeIcon, id: 4 },
+    { name: "Contact", to: "/contact", icon: EnvelopeIcon, id: 5 },
+  ];
+  return (
+    <div
+      className={`navigation container animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <ul className="navList">
+        {navItems.map((item) => {
+          const IconComponent = item.icon;
+          return (
+            <li className="navItem" key={item.id}>
+              <NavLink
+                to={item.to}
+                className={({ isActive }) =>
+                  clsx("navLink", { active: isActive })
+                }
+              >
+                <span>{item.name}</span> <IconComponent className="navIcon" />
+              </NavLink>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
 };
 
 export default Navigation;

src/components/mainViews/About.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <div>About</div>
+  )
+}
+
+export default About

src/components/mainViews/Contact.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Contact = () => {
+  return (
+    <div>Contact</div>
+  )
+}
+
+export default Contact

src/components/mainViews/Experience.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Experience = () => {
+  return (
+    <div>Experience</div>
+  )
+}
+
+export default Experience

src/components/mainViews/Projects.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Projects = () => {
+  return (
+    <div>Projects</div>
+  )
+}
+
+export default Projects

src/css/Hero.css

@@ -3,10 +3,6 @@
   animation-duration: 1.5s;
 }
 
-.hero:hover {
-  animation-duration: .5s;
-}
-
 .hero p span {
   color: white;
   font-weight: bold;

src/css/Home.css

@@ -16,6 +16,7 @@
 
 .container:hover {
   cursor: pointer;
+  animation-duration: .5s;
 }
 
 h2 {

src/css/Navigation.css

@@ -1,3 +1,35 @@
 .navigation {
   grid-area: 1 / 9 / 9 / 12;
 }
+
+.navList {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  list-style-type: none;
+  height: 100%;
+}
+
+.navItem {
+  font-size: 1.5rem;
+}
+
+.navIcon {
+  fill: white;
+  height: 1.5rem;
+  width: auto;
+}
+
+.navLink {
+  text-decoration: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.navLink.active span {
+  border-bottom: 1px solid white;
+}

src/css/TechStack.css

@@ -7,9 +7,7 @@
   animation-duration: 1s;
 }
 
-.techStackContainer:hover {
+
-  animation-duration: 0.5s;
-}
 
 .techStackContainer h2 {
   margin-bottom: 10px;