about view done, projects mostly done, some minor styling left!

src/components/mainViews/Projects.jsx

@@ -1,9 +1,107 @@
-import React from 'react'
+import React from "react";
+import "../../css/Home.css";
+import "animate.css";
+import "../../css/GridContainer.css";
+import LangSelect from "../LangSelect";
+import Mail from "../Mail";
+import Switch from "../Switch";
+import Navigation from "../Navigation";
+import LinkedInIcon from "../../assets/icons/socials/linkedin.svg?react";
+import GitHubIcon from "../../assets/icons/socials/square-github.svg?react";
+import Location from "../Location";
+import { useState } from "react";
+import ProjectsMain from "../subComponents/Projects/ProjectsMain";
+import inkspireImg from "../../assets/img/projects/inkspire.png";
+import debImg from "../../assets/img/projects/deb.png";
+import animedbImg1 from "../../assets/img/projects/animedb1.png";
+import animedbImg2 from "../../assets/img/projects/animedb2.png";
+import animedbImg3 from "../../assets/img/projects/animedb3.png";
+import strogasoImg from "../../assets/img/projects/strogaso.png";
 
 const Projects = () => {
-  return (
-    <div>Projects</div>
-  )
-}
+  const projectArr = [
+    {
+      name: "inkspire.",
+      urls: { ghUrl: "https://github.com/yousifpa98/inkspire" },
+      year: "2024",
+      job: "freelance",
+      imgs: [inkspireImg],
+      id: 1,
+    },
+    {
+      name: "Client Website",
+      urls: {
+        ghUrl: "N/A",
+        liveUrl: "https://druckerei-eberwein.de/",
+      },
+      year: "2024",
+      job: "freelance",
+      imgs: [debImg],
+      id: 2,
+    },
+    {
+      name: "Otaku Critics",
+      urls: {
+        ghUrl: "https://github.com/yousifpa98/animeDB-react",
+        liveUrl: "https://otakucritics.netlify.app/",
+      },
+      year: "2024",
+      job: "personal project",
+      imgs: [animedbImg1, animedbImg2, animedbImg3],
+      id: 3,
+    },
+    {
+      name: "strogaso",
+      urls: {
+        ghUrl: "https://github.com/yousifpa98/strogaso-react",
+        liveUrl: "https://www.strogaso.de",
+      },
+      year: "2023/24",
+      job: "Salescape",
+      imgs: [strogasoImg],
+      id: 4,
+    },
+  ];
 
-export default Projects
+  const social = (url) => () => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");
+
+  const handleMouseEnter = (setAnimation) => {
+    setAnimation(hoverAnimation); // Trigger hover animation
+  };
+
+  const handleAnimationEnd = (setAnimation) => {
+    setAnimation(""); // Clear animation to prevent re-triggering
+  };
+  return (
+    <div className="gridContainer">
+      <Navigation />
+      <Location />
+      <div
+        className="linkedIn container"
+        onClick={social("https://www.linkedin.com/in/yousifpaulus/")}
+      >
+        <LinkedInIcon className="linkedInIcon" />
+      </div>
+      <div
+        className="github container"
+        onClick={social("https://github.com/yousifpa98")}
+      >
+        <GitHubIcon className="githubIcon" />
+      </div>
+      <Switch />
+      <Mail />
+      <LangSelect />
+      <ProjectsMain
+        projects={projectArr}
+        initialAnimation="animate__bounceInDown"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
+    </div>
+  );
+};
+
+export default Projects;