created animation + hoverAnimation helperFunction. Also Hero + Techstack (prev) styled and animated.

src/components/Hero.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import "../css/Hero.css";
+import "animate.css";
+
+const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  return (
+    <div
+      className={`hero container animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <p>
+        <span>
+          Hi, I'm Yousif. <br />
+        </span>{" "}
+        I'm a Full-Stack Developer from Germany.
+      </p>
+    </div>
+  );
+};
+
+export default Hero;

src/components/Home.jsx

@@ -1,11 +1,50 @@
 import React from "react";
-import Hero from "./subComponents/Hero";
+import Hero from "./Hero";
 import "../css/Home.css";
+import TechStack from "./TechStack";
+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 "animate.css";
+import { useState } from "react";
 
 const Home = () => {
+  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">
-      <Hero />
+      <Hero
+        initialAnimation="animate__flipInX"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
+      <TechStack
+        initialAnimation="animate__backInLeft"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
+      <LangSelect />
+      <Mail />
+      <Switch />
+      <Navigation />
+      <div className="linkedIn container">
+        <LinkedInIcon className="linkedInIcon" />
+      </div>
+      <div className="github container">
+        <GitHubIcon className="githubIcon" />
+      </div>
+      <Location />
     </div>
   );
 };

src/components/LangSelect.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "../css/LangSelect.css";
+
+const LangSelect = () => {
+  return <div className="langSelect container">LangSelect</div>;
+};
+
+export default LangSelect;

src/components/Location.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "../css/Location.css";
+
+const Location = () => {
+  return <div className="location container">Location</div>;
+};
+
+export default Location;

src/components/Mail.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "../css/Mail.css";
+
+const Mail = () => {
+  return <div className="eMail container">Mail</div>;
+};
+
+export default Mail;

src/components/Navigation.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "../css/Navigation.css";
+
+const Navigation = () => {
+  return <div className="navigation container">Nav</div>;
+};
+
+export default Navigation;

src/components/Switch.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "../css/Switch.css";
+
+const Switch = () => {
+  return <div className="switch container">Switch</div>;
+};
+
+export default Switch;

src/components/TechStack.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import ReactIcon from "../assets/icons/skill-icons/icons/React-Dark.svg?react";
+import NodeIcon from "../assets/icons/skill-icons/icons/NodeJS-Dark.svg?react";
+import MongoIcon from "../assets/icons/skill-icons/icons/MongoDB.svg?react";
+import RailsIcon from "../assets/icons/skill-icons/icons/Rails.svg?react";
+import NextJsIcon from "../assets/icons/skill-icons/icons/NextJS-Dark.svg?react";
+import DockerIcon from "../assets/icons/skill-icons/icons/Docker.svg?react";
+import TypeScriptIcon from "../assets/icons/skill-icons/icons/TypeScript.svg?react";
+import ExpressIcon from "../assets/icons/skill-icons/icons/ExpressJS-Dark.svg?react";
+import "../css/TechStack.css";
+import { Link } from "react-router-dom";
+import "animate.css";
+
+const TechStack = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
+  const techStack = [
+    { name: "React", component: ReactIcon, className: "reactIcon", id: 1 },
+    { name: "Node.js", component: NodeIcon, className: "nodeIcon", id: 2 },
+    { name: "MongoDB", component: MongoIcon, className: "mongoIcon", id: 3 },
+    {
+      name: "Ruby on Rails",
+      component: RailsIcon,
+      className: "railsIcon",
+      id: 4,
+    },
+    { name: "Next.js", component: NextJsIcon, className: "nextJsIcon", id: 5 },
+    { name: "Docker", component: DockerIcon, className: "dockerIcon", id: 6 },
+    {
+      name: "TypeScript",
+      component: TypeScriptIcon,
+      className: "typescriptIcon",
+      id: 7,
+    },
+    {
+      name: "Express.js",
+      component: ExpressIcon,
+      className: "expressIcon",
+      id: 8,
+    },
+  ];
+
+  /* Animations */
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  return (
+    <div
+      className={`techStackContainer container animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <h2>Tech Stack</h2>
+      <div className="techStack">
+        {techStack.map((tech) => {
+          const IconComponent = tech.component;
+          return (
+            <div key={tech.id} className="techStackItem">
+              <IconComponent className={`techIcon ${tech.className}`} />
+            </div>
+          );
+        })}
+      </div>
+      <Link to={"/"} className="techStackShowMore">
+        Show More
+      </Link>
+    </div>
+  );
+};
+
+export default TechStack;

src/components/subComponents/Hero.jsx

@@ -1,17 +0,0 @@
-import React from "react";
-import "../../css/Hero.css";
-
-const Hero = () => {
-  return (
-    <div className="hero">
-      <p>
-        <span>
-          Hi, I'm Yousif. <br />
-        </span>{" "}
-        I'm a Full-Stack Developer from Germany.
-      </p>
-    </div>
-  );
-};
-
-export default Hero;