feat: handling SSR on home page

components/home/skill-progress.tsx

@@ -0,0 +1,36 @@
+import { TechIcon } from "@/components/icons/tech-icon";
+import { getSkillLevelLabel } from "@/lib/score-utils";
+
+interface SkillProgressProps {
+  skill: {
+    id: string;
+    name: string;
+    icon?: string;
+  };
+  skillEval?: {
+    skillId: string;
+    level: string | null;
+  };
+}
+
+export function SkillProgress({ skill, skillEval }: SkillProgressProps) {
+  return (
+    <div className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg">
+      <div className="flex items-center gap-2">
+        <TechIcon
+          iconName={skill.icon || ""}
+          className="w-4 h-4 text-blue-400"
+          fallbackText={skill.name}
+        />
+        <span className="text-sm text-white">{skill.name}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        {skillEval?.level && (
+          <span className="text-xs text-slate-400">
+            {getSkillLevelLabel(skillEval.level)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}