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

src/components/LangSelect.jsx

@@ -8,7 +8,7 @@ const LangSelect = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   return (
     <div
       className={`langSelect container animate__animated ${animation}`}
-      onMouseEnter={() => onMouseEnter(setAnimation)}
+     /*  onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
       <div className="eng">🇬🇧</div>

src/components/Mail.jsx

@@ -1,16 +1,23 @@
 import React from "react";
 import "../css/Mail.css";
 import { useState } from "react";
+import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react";
 
 const Mail = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   const [animation, setAnimation] = useState(initialAnimation);
+  const emailUser = "yousif.paulus";
+  const domain = "hotmail.de";
   return (
     <div
       className={`eMail container animate__animated ${animation}`}
-      onMouseEnter={() => onMouseEnter(setAnimation)}
+   /*    onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
-      Mail
+      <a
+        className="emailAnchor"
+        href="mailto:yousif.paulus@hotmail.de"
+      >{`${emailUser}@${domain}`}</a>
+      <p className="copyright">&copy; 2025 | Yousif Paulus</p>
     </div>
   );
 };

src/components/Switch.jsx

@@ -6,7 +6,10 @@ import "animate.css";
 const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   const [animation, setAnimation] = useState(initialAnimation);
   return (
-    <div className={`switch container animate__animated ${animation}`}>
+    <div
+      className={`switch container animate__animated ${animation}`}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
       switch
     </div>
   );

src/components/TechStack.jsx

@@ -21,7 +21,7 @@ import "animate.css";
 
 const TechStack = ({
   initialAnimation,
-  onMouseEnter,
+  /* onMouseEnter, */
   onAnimationEnd,
   isExpanded,
   onExpandToggle, // Receive the handler as a prop
@@ -105,7 +105,7 @@ const TechStack = ({
         animation,
         { expanded: isExpanded } // Conditional class
       )}
-      onMouseEnter={() => onMouseEnter(setAnimation)}
+    /*   onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
       <h2>Tech Stack</h2>

src/components/mainViews/About.jsx

@@ -36,7 +36,7 @@ const About = () => {
       />
       <LangSelect />
       <Mail />
-      <Switch isOn={false} handleToggle={toggleSwitch} />
+      <Switch/>
       <Navigation
       /*  initialAnimation="animate__bounceInDown"
         onMouseEnter={handleMouseEnter}

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;

src/components/subComponents/Projects/ProjectCard.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "../../../css/ProjectCard.css";
+import GitHubIcon from "../../../assets/icons/socials/square-github.svg?react";
+import GlobeIcon from "../../../assets/icons/socials/globe.svg?react";
+
+const ProjectCard = ({ project }) => {
+  return (
+    <div className="projectCard">
+      <div className={project.imgs.length > 1 ? "imgs" : "img"}>
+        {project.imgs.map((img, index) => (
+          <img
+            key={index}
+            src={img}
+            alt={`${project.name} screenshot ${index + 1}`}
+            style={
+              project.imgs.length > 1
+                ? { width: `${100 / project.imgs.length}%` }
+                : {}
+            }
+          />
+        ))}
+      </div>
+
+      <div className="projectInfo">
+        <h3>
+          {project.name} <span>({project.year})</span>
+        </h3>
+        <p className="projectJob">{project.job}</p>
+        <div className="projectLinks">
+        {Object.entries(project.urls).map(([key, value]) => {
+            // Determine the correct icon to render based on the key
+            const Icon = key === "ghUrl" ? GitHubIcon : GlobeIcon;
+
+            return (
+              <a
+                key={key}
+                className="socialIconAnchor"
+                target="_blank"
+                rel="noopener noreferrer"
+                href={value}
+              >
+                <Icon className="socialIcon"/>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;

src/components/subComponents/Projects/ProjectsMain.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import "../../../css/ProjectsMain.css";
+import { useState } from "react";
+import ProjectCard from "./ProjectCard";
+
+const ProjectsMain = ({
+  initialAnimation,
+  onMouseEnter,
+  onAnimationEnd,
+  projects,
+}) => {
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  return (
+    <div
+      className={`projectsMain container animate__animated ${animation}`}
+      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <h2>Some of my latest projects:</h2>
+      <div className="projectsDiv">
+          {projects.map((project) => (
+            <ProjectCard key={project.id} project={project} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectsMain;