feat: ajouter des tailles et des améliorations de style aux composants Skills, Stats, StatusPage, Education et Experiences

app/components/home/Skills.vue

@@ -32,6 +32,7 @@ const { skills } = await useContent()
             :key="item.name"
             :icon="item.icon"
             variant="soft"
+            size="lg"
             color="primary"
             class="transition-colors duration-200 hover:opacity-80"
             :aria-label="item.name"

app/components/home/live/Stats.vue

@@ -17,6 +17,7 @@ const topOS = computed(() => stats.value?.os.slice(0, 2) || [])
 
 <template>
   <ClientOnly>
+    {{ stats }}
     <div
       v-if="stats"
       class="space-y-6"

app/components/home/live/StatusPage.vue

@@ -126,7 +126,7 @@ const statusState = computed(() => {
               name="i-ph-check-circle-duotone"
               class="w-5 h-5"
             />
-            <span class="text-xl font-bold text-neutral-900 dark:text-white">{{ metrics.up }}</span>
+            <span class="text-xl font-bold">{{ metrics.up }}</span>
           </div>
           <USkeleton
             v-else
@@ -145,7 +145,7 @@ const statusState = computed(() => {
               name="i-ph-warning-circle-duotone"
               class="w-5 h-5"
             />
-            <span class="text-xl font-bold text-neutral-900 dark:text-white">{{ metrics.down }}</span>
+            <span class="text-xl font-bold">{{ metrics.down }}</span>
           </div>
           <USkeleton
             v-else
@@ -158,13 +158,13 @@ const statusState = computed(() => {
           <div
             v-if="!isLoading"
             class="flex items-center gap-1.5"
-            :class="metrics.maintenance > 0 ? 'text-amber-500' : 'text-neutral-400'"
+            :class="metrics.maintenance > 0 ? 'text-blue-500' : 'text-neutral-400'"
           >
             <UIcon
               name="i-ph-wrench-duotone"
               class="w-5 h-5"
             />
-            <span class="text-xl font-bold text-neutral-900 dark:text-white">{{ metrics.maintenance }}</span>
+            <span class="text-xl font-bold">{{ metrics.maintenance }}</span>
           </div>
           <USkeleton
             v-else

app/components/home/timeline/Education.vue

@@ -41,8 +41,8 @@ const items = computed<TimelineItem[]>(() => {
       <UTimeline
         :orientation="orientation"
         :items="items"
-        :default-value="items.length - 1"
-        active-color="primary"
+        :default-value="2"
+        size="lg"
         color="neutral"
         class="w-full max-w-5xl"
       />

app/components/home/timeline/Experiences.vue

@@ -42,7 +42,7 @@ const items = computed<TimelineItem[]>(() => {
         :orientation="orientation"
         :items="items"
         :default-value="items.length"
-        active-color="primary"
+        size="lg"
         color="neutral"
         class="w-full max-w-5xl"
       />