Enhance skill evaluation UI with category icons and URL state management

- Added category icons to the skill evaluation components for better visual representation.
- Implemented URL parameter handling in SkillEvaluation to maintain selected category state across navigation.
- Improved the HomePage layout with expandable skill categories and enhanced user interaction.
- Updated skill data files to include icon properties for each category.

components/skill-evaluation.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { SkillCategory, SkillLevel, CategoryEvaluation } from "@/lib/types";
 import { SkillSelector } from "./skill-selector";
@@ -26,10 +27,31 @@ export function SkillEvaluation({
   onAddSkill,
   onRemoveSkill,
 }: SkillEvaluationProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const categoryParam = searchParams.get("category");
+
   const [selectedCategory, setSelectedCategory] = useState(
     categories[0]?.category || ""
   );
 
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    // Update URL without page reload
+    const newUrl = new URL(window.location.href);
+    newUrl.searchParams.set("category", category);
+    router.replace(newUrl.pathname + newUrl.search);
+  };
+
+  // Update selected category when URL param changes or categories load
+  useEffect(() => {
+    if (categoryParam && categories.some((c) => c.category === categoryParam)) {
+      setSelectedCategory(categoryParam);
+    } else if (categories.length > 0 && !selectedCategory) {
+      setSelectedCategory(categories[0].category);
+    }
+  }, [categoryParam, categories]); // Remove selectedCategory from deps to avoid loop
+
   const currentCategory = categories.find(
     (cat) => cat.category === selectedCategory
   );
@@ -55,7 +77,7 @@ export function SkillEvaluation({
           <CategoryTabs
             categories={categories}
             selectedCategory={selectedCategory}
-            onCategoryChange={setSelectedCategory}
+            onCategoryChange={handleCategoryChange}
           />
 
           <div className="space-y-8">