feat: homepage and skills : sorting and coloring

components/home/skill-progress.tsx

@@ -1,11 +1,13 @@
 import { TechIcon } from "@/components/icons/tech-icon";
 import { getSkillLevelLabel } from "@/lib/score-utils";
+import { getImportanceColors } from "@/lib/tech-colors";
 
 interface SkillProgressProps {
   skill: {
     id: string;
     name: string;
     icon?: string;
+    importance: "incontournable" | "majeure" | "standard";
   };
   skillEval?: {
     skillId: string;
@@ -14,15 +16,19 @@ interface SkillProgressProps {
 }
 
 export function SkillProgress({ skill, skillEval }: SkillProgressProps) {
+  const colors = getImportanceColors(skill.importance);
+
   return (
-    <div className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg">
+    <div
+      className={`flex items-center justify-between p-2 ${colors.bg} border ${colors.border} rounded-lg`}
+    >
       <div className="flex items-center gap-2">
         <TechIcon
           iconName={skill.icon || ""}
-          className="w-4 h-4 text-blue-400"
+          className={`w-4 h-4 ${colors.text}`}
           fallbackText={skill.name}
         />
-        <span className="text-sm text-white">{skill.name}</span>
+        <span className={`text-sm ${colors.text}`}>{skill.name}</span>
       </div>
       <div className="flex items-center gap-2">
         {skillEval?.level && (