added js icon to techstack

This commit is contained in:
yousifpa98
2025-01-22 15:59:56 +01:00
parent f888ec18d5
commit d3ec3755c2
2 changed files with 16 additions and 10 deletions

View File

@@ -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

View File

@@ -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);