labguage and colormode support

src/components/TechStack.jsx

@@ -18,6 +18,8 @@ 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,
@@ -95,17 +97,19 @@ const TechStack = ({
   ];
 
   const [animation, setAnimation] = useState(initialAnimation);
-
+  const { colormode } = useTheme();
+  const { language } = useLang();
   return (
     <div
       className={clsx(
         "techStackContainer",
         "container",
+        colormode === "light" ? "light" : "dark",
         "animate__animated",
         animation,
         { expanded: isExpanded } // Conditional class
       )}
-    /*   onMouseEnter={() => onMouseEnter(setAnimation)} */
+      /*   onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
       <h2>Tech Stack</h2>
@@ -125,11 +129,13 @@ const TechStack = ({
         to="#"
         className="techStackShowMore"
         onClick={(e) => {
-          e.preventDefault(); // Prevent default link behavior
-          onExpandToggle(); // Toggle the expanded state
+          e.preventDefault();
+          onExpandToggle();
         }}
       >
-        {isExpanded ? "Show Less" : "Show More"} {/* Toggle link text */}
+        {isExpanded
+          ? `${language === "en-GB" ? "Show Less" : "Weniger"}`
+          : `${language === "en-GB" ? "Show More" : "Mehr"}`}
       </Link>
     </div>
   );