feat: add interactivity with alpinejs (#34)

* first stages of implementing alpinejs

* add link to projects slideshow

* begin adding nav bar

* inpired hero from flaco theme

* fix posts showcase

fixed to publish current work to latest

* revert docker action

* update astro version

src/components/ShowcaseProject.astro

@@ -10,39 +10,31 @@ const { collection } = Astro.props;
 ---
 
 <li>
-  <article
-    class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pt-40 pb-8"
-  >
-    <Image
-      src={collection.data.image.url}
-      alt={collection.data.image.alt}
-      title={collection.data.title}
-      loading="eager"
-      class="absolute inset-0 h-full w-full object-cover transition-all duration-300 group-hover:brightness-50"
-      fit="cover"
-    />
-
-    <a
-      class="absolute inset-0 z-20"
-      href={`/${collection.collection}/${collection.slug}`}
-      aria-label={collection.data.title}></a>
-    <h3
-      class="z-10 w-fit text-xl font-semibold text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-    >
-      {collection.data.title}
-    </h3>
-    <div
-      class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-neutral-400 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-    >
-      {
-        collection.data.collection ? (
-          <span>
-            <FormattedDate date={collection.data.date} /> (Collection)
-          </span>
-        ) : (
-          <FormattedDate date={collection.data.date} />
-        )
-      }
-    </div>
+  <article class="flex-col overflow-clip">
+    <a href={`/${collection.collection}/${collection.slug}`} class="group">
+      <div class="overflow-hidden rounded-md">
+        <Image
+          src={collection.data.image.url}
+          alt={collection.data.image.alt}
+          title={collection.data.title}
+          loading="eager"
+          class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
+          fit="cover"
+        />
+      </div>
+      <article class="flex flex-col">
+        <h3 class="mb-1 font-semibold text-balance">
+          <span class="text-secondary">{collection.data.title}</span><span
+            class="text-tertiary group-hover:text-accent ml-2 transition-colors"
+            >{collection.data.description}</span
+          >
+        </h3>
+        <time class="text-accent block text-sm"
+          ><time>
+            <FormattedDate date={collection.data.date} />
+          </time></time
+        >
+      </article>
+    </a>
   </article>
 </li>