feat: add some data & color change

hyperz111 · hyperz111 · commit d0a76f211c73 · 2026-02-15T10:12:40.000+07:00
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -29,7 +29,14 @@
 	const gridMenu = [
 		["Bahasa Pemograman", "languages"],
 		["Alat-alat", "tools"],
+		["Kerangka Kerja & Pustaka", "frameworkLibrary"],
 	];
+
+	function applyStyle(style) {
+		return (event) => {
+			event.target.style = style;
+		};
+	}
 </script>
 
 <Head {config} />
@@ -83,9 +90,14 @@
 				<h2>{menu[0]}</h2>
 				<div class="grid gap-2 min-[375px]:grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
 					{#each data[menu[1]] as { name, icon, color } (name)}
-						<div class="group flex cursor-pointer gap-2 rounded-xl border-2 border-neutral-300 p-4 hover:scale-90">
-							<Icon {icon} style="color: {color}" />
-							<span class="">{name}</span>
+						<!-- svelte-ignore a11y_no_static_element_interactions -- how to fix it? -->
+						<div
+							class="group flex cursor-pointer gap-2 rounded-xl border-2 border-neutral-300 p-4 hover:scale-90"
+							onmouseenter={applyStyle(`color: ${color}; border-color: ${color};`)}
+							onmouseleave={applyStyle(``)}
+							aria-label={name}>
+							<Icon {icon} />
+							<span>{name}</span>
 						</div>
 					{/each}
 				</div>
diff --git a/src/routes/data-for-home.json b/src/routes/data-for-home.json
@@ -35,12 +35,12 @@
 		{
 			"name": "Markdown",
 			"icon": "markdown",
-			"color": "white"
+			"color": "gray"
 		},
 		{
 			"name": "HTML",
 			"icon": "html5",
-			"color": "orange"
+			"color": "orangered"
 		},
 		{
 			"name": "CSS",
@@ -59,11 +59,31 @@
 			"icon": "nodedotjs",
 			"color": "green"
 		},
+		{
+			"name": "ESBuild",
+			"icon": "esbuild",
+			"color": "yellow"
+		},
+		{
+			"name": "RollUp",
+			"icon": "rollupdotjs",
+			"color": "red"
+		},
 		{
 			"name": "Vite",
 			"icon": "vite",
 			"color": "darkviolet"
 		},
+		{
+			"name": "ESLint",
+			"icon": "eslint",
+			"color": "darkorchid"
+		},
+		{
+			"name": "Prettier",
+			"icon": "prettier",
+			"color": "darkslategray"
+		},
 		{
 			"name": "NPM",
 			"icon": "npm",
@@ -74,5 +94,32 @@
 			"icon": "pnpm",
 			"color": "yellow"
 		}
+	],
+	"frameworkLibrary": [
+		{
+			"name": "PostCSS",
+			"icon": "postcss",
+			"color": "red"
+		},
+		{
+			"name": "Svelte",
+			"icon": "svelte",
+			"color": "orangered"
+		},
+		{
+			"name": "SvelteKit",
+			"icon": "svelte",
+			"color": "orangered"
+		},
+		{
+			"name": "SASS",
+			"icon": "sass",
+			"color": "pink"
+		},
+		{
+			"name": "Tailwind CSS",
+			"icon": "tailwindcss",
+			"color": "cyan"
+		}
 	]
 }
