techstack tooltip / tall Content main => particle playground

src/components/TechStack.jsx

@@ -17,16 +17,14 @@ 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";
 import { useTheme } from "../Context/ThemeContext";
 import { useLang } from "../Context/LangContext";
 
 const TechStack = ({
   initialAnimation,
-  /* onMouseEnter, */
   onAnimationEnd,
   isExpanded,
-  onExpandToggle, // Receive the handler as a prop
+  onExpandToggle,
 }) => {
   const techStack = [
     { name: "React", component: ReactIcon, className: "reactIcon", id: 1 },
@@ -99,6 +97,7 @@ const TechStack = ({
   const [animation, setAnimation] = useState(initialAnimation);
   const { colormode } = useTheme();
   const { language } = useLang();
+
   return (
     <div
       className={clsx(
@@ -107,20 +106,20 @@ const TechStack = ({
         colormode === "light" ? "light" : "dark",
         "animate__animated",
         animation,
-        { expanded: isExpanded } // Conditional class
+        { expanded: isExpanded }
       )}
-      /*   onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
       <h2>Tech Stack</h2>
       <div className="techStack">
         {techStack
-          .filter((tech) => isExpanded || !tech.needExpand) // Filter based on isExpanded
+          .filter((tech) => isExpanded || !tech.needExpand)
           .map((tech) => {
             const IconComponent = tech.component;
             return (
-              <div key={tech.id} className="techStackItem">
+              <div key={tech.id} className="techStackItem tooltip">
                 <IconComponent className={`techIcon ${tech.className}`} />
+                <span className="tooltipText">{tech.name}</span>
               </div>
             );
           })}