About view done. all styled and animated. some minor animation fixes overall and codecleaning

src/components/TechStack.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import clsx from "clsx";
 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";
@@ -7,11 +8,24 @@ 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 KubernetesIcon from "../assets/icons/skill-icons/icons/Kubernetes.svg?react";
+import GitIcon from "../assets/icons/skill-icons/icons/Git.svg?react";
+import TailwindIcon from "../assets/icons/skill-icons/icons/TailwindCSS-Dark.svg?react";
+import PostgreSQL from "../assets/icons/skill-icons/icons/PostgreSQL-Dark.svg?react";
+import NestjsIcon from "../assets/icons/skill-icons/icons/NestJS-Dark.svg?react";
+import Linux from "../assets/icons/skill-icons/icons/Linux-Dark.svg?react";
+
 import "../css/TechStack.css";
 import { Link } from "react-router-dom";
 import "animate.css";
 
-const TechStack = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
+const TechStack = ({
+  initialAnimation,
+  onMouseEnter,
+  onAnimationEnd,
+  isExpanded,
+  onExpandToggle, // Receive the handler as a prop
+}) => {
   const techStack = [
     { name: "React", component: ReactIcon, className: "reactIcon", id: 1 },
     { name: "Node.js", component: NodeIcon, className: "nodeIcon", id: 2 },
@@ -36,30 +50,86 @@ const TechStack = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
       className: "expressIcon",
       id: 8,
     },
+    {
+      name: "Kubernetes",
+      component: KubernetesIcon,
+      className: "kubernetesIcon",
+      id: 9,
+      needExpand: true,
+    },
+    {
+      name: "Git",
+      component: GitIcon,
+      className: "gitIcon",
+      id: 10,
+      needExpand: true,
+    },
+    {
+      name: "Tailwind CSS",
+      component: TailwindIcon,
+      className: "tailwindIcon",
+      id: 11,
+      needExpand: true,
+    },
+    {
+      name: "PostgreSQL",
+      component: PostgreSQL,
+      className: "postgresqlIcon",
+      id: 12,
+      needExpand: true,
+    },
+    {
+      name: "NestJS",
+      component: NestjsIcon,
+      className: "nestjsIcon",
+      id: 13,
+      needExpand: true,
+    },
+    {
+      name: "Linux",
+      component: Linux,
+      className: "linuxIcon",
+      id: 14,
+      needExpand: true,
+    },
   ];
 
-  /* Animations */
   const [animation, setAnimation] = useState(initialAnimation);
 
   return (
     <div
-      className={`techStackContainer container animate__animated ${animation}`}
+      className={clsx(
+        "techStackContainer",
+        "container",
+        "animate__animated",
+        animation,
+        { expanded: isExpanded } // Conditional class
+      )}
       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>
-          );
-        })}
+        {techStack
+          .filter((tech) => isExpanded || !tech.needExpand) // Filter based on isExpanded
+          .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
+        to="#"
+        className="techStackShowMore"
+        onClick={(e) => {
+          e.preventDefault(); // Prevent default link behavior
+          onExpandToggle(); // Toggle the expanded state
+        }}
+      >
+        {isExpanded ? "Show Less" : "Show More"} {/* Toggle link text */}
       </Link>
     </div>
   );