feat: enhance site with HTMX for AJAX navigation and Alpine.js for reactivity

partials/post-card.hbs

@@ -0,0 +1,22 @@
+<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
+    <a href="{{url}}" class="block">
+        {{#if feature_image}}
+            <img
+                class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
+                src="{{img_url feature_image size="m"}}"
+                srcset="{{img_url feature_image size="s"}} 400w,
+                        {{img_url feature_image size="m"}} 600w,
+                        {{img_url feature_image size="l"}} 1000w,
+                        {{img_url feature_image size="xl"}} 2000w"
+                sizes="(max-width: 800px) 400px, (max-width: 1200px) 600px, 1000px"
+                alt="{{title}}"
+                loading="lazy"
+            >
+        {{else}}
+            <div class="w-full h-72 flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
+        {{/if}}
+        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
+            <h2 class="text-[var(--text-primary)] text-xl font-semibold leading-tight">{{title}}</h2>
+        </div>
+    </a>
+</article>