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/evaluation/skill-evaluation-card.tsx

@@ -94,35 +94,40 @@ export function SkillEvaluationCard({
         </div>
 
         {/* Level Selection */}
-        <div className="flex items-center gap-2 flex-shrink-0 ml-4">
+        <div className="flex items-center gap-3 flex-shrink-0 ml-4">
           {Object.entries(SKILL_LEVELS).map(([value, label]) => {
             const isSelected = currentLevel === value;
             const levelValue = value as Exclude<SkillLevel, null>;
             return (
-              <Tooltip key={value}>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={() => onUpdateSkill(skill.id, levelValue)}
-                    className={`
-                      relative w-5 h-5 rounded-md border-2 transition-all hover:scale-110
-                      ${
-                        isSelected
-                          ? `${getLevelColor(levelValue)} ${getLevelColorBorder(
-                              levelValue
-                            )} shadow-lg`
-                          : "bg-white/5 border-white/20 hover:border-white/30 hover:bg-white/10"
-                      }
-                    `}
-                  >
-                    {isSelected && (
-                      <div className="absolute inset-0.5 bg-white rounded-sm"></div>
-                    )}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p className="text-sm font-medium">{label}</p>
-                </TooltipContent>
-              </Tooltip>
+              <div key={value} className="flex items-center gap-1.5">
+                <button
+                  onClick={() => onUpdateSkill(skill.id, levelValue)}
+                  className={`
+                    relative w-4 h-4 rounded-md border-2 transition-all hover:scale-110
+                    ${
+                      isSelected
+                        ? `${getLevelColor(levelValue)} ${getLevelColorBorder(
+                            levelValue
+                          )} shadow-lg`
+                        : "bg-white/5 border-white/20 hover:border-white/30 hover:bg-white/10"
+                    }
+                  `}
+                >
+                  {isSelected && (
+                    <div className="absolute inset-0.5 bg-white rounded-sm"></div>
+                  )}
+                </button>
+                <span
+                  className={`text-xs font-medium transition-colors cursor-pointer ${
+                    isSelected
+                      ? "text-white"
+                      : "text-slate-400 hover:text-slate-300"
+                  }`}
+                  onClick={() => onUpdateSkill(skill.id, levelValue)}
+                >
+                  {label}
+                </span>
+              </div>
             );
           })}