added js icon to techstack
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user