refactor(projects): redesign cards UI and update project data (#97)

* refactor: remove toggle behavior from project cards, always show content

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: remove unused projects

* chore: update screenshot and description

* chore: update laravel-js-routes project link

* chore: update description

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: halivert

src/components/ProjectThumbnail.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from "vue"
 import { getLangFromUrl, useTranslations } from "@/i18n/utils"
 import type { Project } from "@/types/project"
 
@@ -14,58 +13,42 @@ const props = defineProps<{
 const lang = getLangFromUrl(props.url)
 const t = useTranslations(lang)
 
-const showLinks = ref(false)
-
 function getTranslation(key: TranslationProp): string {
   return props.project.data.translations[lang]?.[key] ?? ""
 }
 </script>
 
 <template>
   <article
-    class="relative rounded-md overflow-hidden"
-    @click="showLinks = !showLinks"
+    class="rounded-md overflow-hidden border border-background-200 dark:border-background-800 flex flex-col"
   >
-    <label :for="project.id">
-      <figure class="cursor-pointer">
-        <slot />
-
-        <figcaption class="mt-1 text-center italic text-sm">
-          {{ getTranslation("title") }}
-        </figcaption>
-      </figure>
-    </label>
-
-    <Transition>
-      <div
-        v-show="showLinks"
-        class="absolute inset-0 bg-background-200/90 dark:bg-background-950/90 flex flex-col gap-2 px-4 py-2"
-      >
-        <strong class="text-center">{{ getTranslation("title") }}</strong>
-        <span class="flex-1">{{ getTranslation("description") }}</span>
-        <p class="flex items-center justify-center gap-3 text-sm">
-          <a
-            v-if="project.data.live"
-            @click.stop
-            class="underline text-accent-100 bg-accent-800 py-1 px-3 rounded"
-            :href="project.data.live"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            {{ t("Sitio") }}
-          </a>
-          <a
-            v-if="project.data.repo"
-            @click.stop
-            class="underline text-accent-100 bg-accent-800 py-1 px-3 rounded"
-            :href="project.data.repo"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            {{ t("Código") }}
-          </a>
-        </p>
-      </div>
-    </Transition>
+    <figure>
+      <slot />
+    </figure>
+
+    <div class="flex flex-col gap-2 px-4 py-3 flex-1">
+      <strong>{{ getTranslation("title") }}</strong>
+      <p class="flex-1 text-sm">{{ getTranslation("description") }}</p>
+      <p class="flex gap-2 text-sm">
+        <a
+          v-if="project.data.live"
+          class="text-accent-100 bg-accent-800 py-1 px-3 rounded"
+          :href="project.data.live"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {{ t("Sitio") }}
+        </a>
+        <a
+          v-if="project.data.repo"
+          class="border border-accent-800 dark:border-accent-300 text-accent-800 dark:text-accent-300 py-1 px-3 rounded"
+          :href="project.data.repo"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {{ t("Código") }}
+        </a>
+      </p>
+    </div>
   </article>
 </template>

src/content/projects/bookmark-landing-page.png

@@ -1,13 +1,17 @@
 order: 100
 repo: "https://github.com/halivert/laravel-js-routes"
-live: "https://github.com/halivert/laravel-js-routes"
+live: "https://packagist.org/packages/halivert/laravel-js-routes"
 image: "./laravel-js-routes.png"
 translations:
   es-419:
-    title: "Rutas de Laravel en JS"
-    description: "Paquete composer para utilizar rutas de Laravel en archivos JS. Archivado - el problema que resolvía fue solucionado en un paquete oficial."
+    title: "laravel-js-routes"
+    description: >
+      Paquete composer para utilizar rutas de Laravel en archivos JS. Más de 11
+      mil descargas en Packagist. Archivado - paquete sugerido tightenco/ziggy.
     imageAlt: "Screenshot del repo de laravel-js-routes"
   en:
-    title: "Laravel routes in JS"
-    description: "Composer package to use Laravel routes on JS with a command. Archived - the problem solved was addressed by an official package."
+    title: "laravel-js-routes"
+    description: >
+      Composer package to use Laravel routes on JS with a command. 11k+ installs
+      on Packagist. Archived - succeeded by tightenco/ziggy.
     imageAlt: "laravel-js-routes repository screenshot"

src/content/projects/bookmark-landing-page.yml

@@ -26,7 +26,7 @@ function getTranslation(project: Project, key: TranslationProp): string {
 		<section class="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
 			{
 				projects.map((project) => (
-					<ProjectThumbnail client:load url={Astro.url} project={project}>
+					<ProjectThumbnail url={Astro.url} project={project}>
 						{project.data.image ? (
 							<Image
 								class="rounded-md w-full object-cover"