From d3ec3755c2d022bca69e51c5b8d26ec7a154f26c Mon Sep 17 00:00:00 2001
From: yousifpa98 <yousif.paulus@dci-student.org>
Date: Wed, 22 Jan 2025 15:59:56 +0100
Subject: [PATCH] added js icon to techstack

---
 src/components/Switch.jsx    | 18 ++++++++----------
 src/components/TechStack.jsx |  8 ++++++++
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx
index ff4602f..004960b 100644
--- a/src/components/Switch.jsx
+++ b/src/components/Switch.jsx
@@ -45,8 +45,6 @@ const SwitchContainer = styled.div`
   }
 `;
 
-
-
 const StyledSunIcon = styled(SunIcon)`
   fill: #fff145;
 `;
@@ -77,15 +75,21 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
     >
       <div className="wrapper">
         <PlanetsContainer rotation={rotation} className="planets">
+          <StyledMoonIcon
+            colormode={colormode}
+            className={`moon1 toggleIcon ${
+              colormode === "dark" ? "setting" : "rising"
+            }`}
+          />
           <StyledSunIcon
             colormode={colormode}
             className={`sun1 toggleIcon ${
-              colormode === "dark" ? "setting" : "rising"
+              colormode === "dark" ? "rising" : "setting"
             }`}
           />
           <StyledMoonIcon
             colormode={colormode}
-            className={`moon1 toggleIcon ${
+            className={`moon2 toggleIcon ${
               colormode === "dark" ? "rising" : "setting"
             }`}
           />
@@ -95,12 +99,6 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
               colormode === "dark" ? "setting" : "rising"
             }`}
           />
-          <StyledMoonIcon
-            colormode={colormode}
-            className={`moon2 toggleIcon ${
-              colormode === "dark" ? "rising" : "setting"
-            }`}
-          />
         </PlanetsContainer>
       </div>
       <SwitchBtn
diff --git a/src/components/TechStack.jsx b/src/components/TechStack.jsx
index 7c4a124..f36b91a 100644
--- a/src/components/TechStack.jsx
+++ b/src/components/TechStack.jsx
@@ -14,6 +14,7 @@ import TailwindIcon from "../assets/icons/skill-icons/icons/TailwindCSS-Dark.svg
 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 JavaScript from "../assets/icons/skill-icons/icons/JavaScript.svg?react";
 
 import "../css/TechStack.css";
 import { Link } from "react-router-dom";
@@ -92,6 +93,13 @@ const TechStack = ({
       id: 14,
       needExpand: true,
     },
+    {
+      name: "JavaScript",
+      component: JavaScript,
+      className: "jsIcon",
+      id: 15,
+      needExpand: true,
+    },
   ];
 
   const [animation, setAnimation] = useState(initialAnimation);