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