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

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;