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;