From 40285d9ee6235f19bcaa9ff96b386d84177c9b34 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 19:56:35 -0500
Subject: [PATCH] feat: add post card component with scroll animation

---
 components/blog/PostCard.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 components/blog/PostCard.tsx

diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
new file mode 100644
index 0000000..86fc122
--- /dev/null
+++ b/components/blog/PostCard.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { motion } from "motion/react";
+import type { PostMeta } from "@/lib/posts";
+
+interface PostCardProps extends PostMeta {
+  index?: number;
+}
+
+export function PostCard({ slug, title, date, excerpt, index = 0 }: PostCardProps) {
+  return (
+    <motion.article
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.07 }}
+      viewport={{ once: true }}
+      className="scroll-mt-20"
+    >
+      <Link href={`/posts/${slug}/`} className="block">
+        <time className="font-mono text-sm text-ink-soft">{date}</time>
+        <h3 className="font-sans text-2xl font-semibold tracking-tight text-ink mt-1 mb-2 hover:text-accent transition-colors">
+          {title}
+        </h3>
+        {excerpt && (
+          <p className="text-ink-soft leading-7">{excerpt}</p>
+        )}
+      </Link>
+    </motion.article>
+  );
+}