fix: update portfolio branding to "Killian' DAL-CIN" across all documentation and components

- Corrected the name in various files including CLAUDE.md, README.md, and configuration files to reflect the updated branding.
- Ensured consistency in the use of the new name throughout the project, enhancing brand identity.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/components/ProjectCard.vue

@@ -17,7 +17,7 @@ const translatedCategory = computed(() => {
 
 <template>
   <article
-    class="group relative rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-all duration-300 hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 hover:-translate-y-1"
+    class="group relative rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm overflow-hidden transition-all duration-300 hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1.5"
     itemscope
     itemtype="https://schema.org/CreativeWork"
   >
@@ -30,21 +30,26 @@ const translatedCategory = computed(() => {
         format="webp"
         width="400"
         height="300"
-        class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"
+        class="w-full h-52 object-cover transition-transform duration-500 group-hover:scale-105"
         itemprop="image"
       />
-      <!-- Overlay on hover -->
-      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      <!-- Gradient overlay -->
+      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-5">
+        <span class="text-white text-sm font-semibold flex items-center gap-1.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
+          {{ t('projects.buttons.viewProject') }}
+          <UIcon name="i-lucide-arrow-right" class="w-4 h-4" />
+        </span>
+      </div>
     </NuxtLink>
 
     <!-- Content -->
-    <div class="p-5 flex flex-col gap-3">
+    <div class="p-5 sm:p-6 flex flex-col gap-3">
       <!-- Category & Date -->
       <div class="flex items-center justify-between">
         <UBadge v-if="project.category" color="primary" variant="subtle" itemprop="genre">
           {{ translatedCategory }}
         </UBadge>
-        <time v-if="project.date" class="text-xs text-gray-400 dark:text-gray-500 font-medium" :datetime="project.date" itemprop="dateCreated">
+        <time v-if="project.date" class="text-xs text-gray-400 dark:text-gray-500 font-mono" :datetime="project.date" itemprop="dateCreated">
           {{ project.date }}
         </time>
       </div>
@@ -60,29 +65,26 @@ const translatedCategory = computed(() => {
       </p>
 
       <!-- Technologies -->
-      <div v-if="project.technologies?.length" class="flex flex-wrap gap-1.5 pt-1" itemprop="keywords">
+      <div v-if="project.technologies?.length" class="flex flex-wrap gap-1.5 pt-2" itemprop="keywords">
         <span
           v-for="tech in project.technologies.slice(0, 3)"
           :key="tech"
-          class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 font-medium"
+          class="text-[11px] px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800/80 text-gray-600 dark:text-gray-400 font-medium border border-gray-200/50 dark:border-gray-700/30"
         >
           {{ tech }}
         </span>
-        <span v-if="project.technologies.length > 3" class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-500 font-medium">
+        <span v-if="project.technologies.length > 3" class="text-[11px] px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800/80 text-gray-500 dark:text-gray-500 font-medium border border-gray-200/50 dark:border-gray-700/30">
           +{{ project.technologies.length - 3 }}
         </span>
       </div>
-
-      <!-- Action link -->
-      <NuxtLink
-        :to="`/project/${project.id}`"
-        class="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 transition-colors mt-1 group/link"
-        :aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
-        itemprop="url"
-      >
-        {{ t('projects.buttons.viewProject') }}
-        <UIcon name="i-lucide-arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-0.5" />
-      </NuxtLink>
     </div>
+
+    <!-- Hidden SEO link -->
+    <NuxtLink
+      :to="`/project/${project.id}`"
+      class="absolute inset-0 z-10"
+      :aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
+      itemprop="url"
+    />
   </article>
 </template>