animation updated on skills

app/page.tsx

@@ -1,6 +1,9 @@
 "use client";
 
 import Skills from "./src/components/skills";
+import style from "./src/styles/style.module.scss";
+import { getRandomColor } from "./src/components/utils";
+import { useEffect } from "react";
 
 export default function HomePage() {
 	const navigation = [
@@ -9,6 +12,17 @@ export default function HomePage() {
 		{ title: "Achievments", path: "" },
 	];
 
+	useEffect(() => {
+		const skillIcons = document.querySelectorAll(`.${style.skillIcon}`);
+		skillIcons.forEach((skillIcon: any) => {
+			skillIcon.addEventListener("mouseover", () => {
+				const randomColor = `${getRandomColor()}`;
+				skillIcon.style.fill = randomColor;
+				skillIcon.style.color = randomColor;
+			});
+		});
+	}, []);
+
 	return (
 		<>
 			<nav className="relative mt-9 items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md:space-x-6">

app/src/components/skill-records.ts

@@ -12,6 +12,7 @@ import { CiPenpot } from "react-icons/ci";
 import { DiDart } from "react-icons/di";
 import { FaGulp, FaLinux, FaNode } from "react-icons/fa";
 import { FaFreebsd, FaGitAlt } from "react-icons/fa6";
+import { GiDolphin } from "react-icons/gi";
 import {
 	IoLogoCss3,
 	IoLogoElectron,
@@ -33,26 +34,23 @@ import {
 import {
 	SiAdobeillustrator,
 	SiAdobephotoshop,
+	SiCplusplus,
 	SiExpress,
 	SiFoodpanda,
 	SiGooglesearchconsole,
 	SiJest,
 	SiKeystone,
-	SiMysql,
 	SiNumpy,
 	SiPassport,
 	SiPhp,
 	SiPuppeteer,
 	SiSelenium,
+	SiSocketdotio,
 	SiWebassembly,
 	SiWebpack,
+	SiWindowsterminal,
 } from "react-icons/si";
-import {
-	TbBrandCpp,
-	TbBrandOffice,
-	TbBrandSocketIo,
-} from "react-icons/tb";
-import { VscTerminalCmd } from "react-icons/vsc";
+import Office from "../icons/office";
 
 const skills: Record<string, any>[] = [
 	{ text: "TypeScript", icon: BiLogoTypescript },
@@ -65,7 +63,7 @@ const skills: Record<string, any>[] = [
 
 	{ text: "Next JS", icon: RiNextjsFill },
 	{ text: "Mongo DB", icon: BiLogoMongodb },
-	{ text: "Socket.io", icon: TbBrandSocketIo },
+	{ text: "Socket.io", icon: SiSocketdotio },
 	{ text: "Electron JS", icon: IoLogoElectron },
 	{ text: "PHP", icon: SiPhp },
 
@@ -79,9 +77,9 @@ const skills: Record<string, any>[] = [
 	{ text: "Tailwind CSS", icon: RiTailwindCssFill },
 	{ text: "SCSS", icon: BiLogoSass },
 	{ text: "Java", icon: RiJavaFill },
-	{ text: "C & C++", icon: TbBrandCpp },
+	{ text: "C & C++", icon: SiCplusplus },
 	{ text: "Web Assembly", icon: SiWebassembly },
-	{ text: "My SQL", icon: SiMysql },
+	{ text: "My SQL", icon: GiDolphin },
 	{ text: "Linux", icon: FaLinux },
 
 	{ text: "Windows", icon: RiWindowsFill },
@@ -99,12 +97,11 @@ const skills: Record<string, any>[] = [
 	{ text: "Passport JS", icon: SiPassport },
 	{ text: "MatPlotlib", icon: MdScatterPlot },
 	{ text: "Bash", icon: IoTerminal },
-	{ text: "CMD", icon: VscTerminalCmd },
+	{ text: "CMD", icon: SiWindowsterminal },
 	{ text: "Photoshop", icon: SiAdobephotoshop },
 	{ text: "Illustrator", icon: SiAdobeillustrator },
 	{ text: "Penpot", icon: CiPenpot },
-
-	{ text: "MS Office", icon: TbBrandOffice },
+	{ text: "MS Office", icon: Office },
 	{ text: "SEO", icon: SiGooglesearchconsole },
 	{ text: "Puppeteer", icon: SiPuppeteer },
 	{ text: "Jest", icon: SiJest },

app/src/components/utils.ts

@@ -0,0 +1,11 @@
+export function getRandomColor(): string {
+	let color: string;
+	const min: number = 50;
+	const max: number = 255;
+	do {
+		color = `rgb(${Math.floor(Math.random() * (max - min) + min)}, 
+                     ${Math.floor(Math.random() * (max - min) + min)}, 
+                     ${Math.floor(Math.random() * (max - min) + min)})`;
+	} while (color === "rgb(0, 0, 0)");
+	return color;
+}

app/src/icons/office.tsx

@@ -0,0 +1,35 @@
+export default ({ className, color, size }: any): any => {
+	return (
+		<svg
+			className={className}
+			color={color}
+			xmlns="http://www.w3.org/2000/svg"
+			x="0px"
+			y="0px"
+			width={size}
+			height={size}
+			viewBox="0 0 256 256">
+			<g
+				fill="currentColor"
+				fill-rule="nonzero"
+				stroke="none"
+				stroke-width="1"
+				stroke-linecap="butt"
+				stroke-linejoin="miter"
+				stroke-miterlimit="10"
+				stroke-dasharray=""
+				stroke-dashoffset="0"
+				font-family="none"
+				font-weight="none"
+				font-size="none"
+				text-anchor="none"
+				style={{ mixBlendMode: "normal" }}>
+				<g transform="scale(5.33333,5.33333)">
+					<path d="M36.883,7.341c1.843,0.509 3.117,2.167 3.117,4.056v25.162c0,1.906 -1.301,3.57 -3.168,4.065l-11.542,3.239l3.71,-7.863v-25l-3.148,-6.885z"></path>
+					<path d="M29,35v3.927c0,3.803 -3.824,6.249 -7.019,4.491l-6.936,-4.445c-0.802,-0.466 -1.236,-1.462 -0.964,-2.457c0.253,-0.926 1.121,-1.516 2.034,-1.516z"></path>
+					<path d="M15.456,32.228l-3.4,1.502c-1.362,0.802 -3.056,-0.212 -3.056,-1.829v-16.997c0,-1.536 0.811,-2.95 2.116,-3.691l11.83,-6.687c2.723,-1.543 6.054,0.488 6.054,3.692v3.09l-10.037,3.486c-1.183,0.469 -1.963,1.642 -1.963,2.949v11.742c0,1.133 -0.59,2.18 -1.544,2.743z"></path>
+				</g>
+			</g>
+		</svg>
+	);
+};

app/src/styles/style.module.scss

@@ -14,7 +14,6 @@
 
 .skillIcon:hover {
 	scale: 5;
-	fill: rgb(140, 21, 224);
 }
 
 body:has(.skillIcon:hover) {