restore portfolio

src/components/LatestPosts.astro

@@ -0,0 +1,90 @@
+---
+import { getCollection } from "astro:content";
+
+const posts = (await getCollection("blog"))
+	.filter((post) => !post.data.draft)
+	.sort(
+		(a, b) =>
+			b.data.pubDate.valueOf() -
+			a.data.pubDate.valueOf(),
+	)
+	.slice(0, 3);
+---
+
+<section class="border-t border-[var(--border)]">
+
+	<div class="mx-auto max-w-7xl px-6 py-28 lg:px-8 lg:py-36">
+
+		<div class="flex flex-col justify-between gap-6 md:flex-row md:items-end">
+
+			<div>
+
+				<div class="font-mono text-[10px] tracking-widest text-[var(--muted)]">
+					04 / NOTES
+				</div>
+
+				<h2 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
+					Latest notes
+				</h2>
+
+			</div>
+
+			<a
+				href="/blog"
+				class="font-mono text-[10px] text-[var(--muted)] transition-colors hover:text-[var(--text)]"
+			>
+				VIEW ALL NOTES →
+			</a>
+
+		</div>
+
+		<div class="mt-16 space-y-px border border-[var(--border)] bg-[var(--border)]">
+
+			{posts.map((post) => (
+				<a
+					href={`/blog/${post.id}/`}
+					class="group block bg-[var(--surface)] p-6 transition-colors hover:bg-[var(--surface-hover)] lg:p-8"
+				>
+
+					<div class="grid gap-5 md:grid-cols-[150px_1fr_auto] md:items-center">
+
+						<time
+							datetime={post.data.pubDate.toISOString()}
+							class="font-mono text-[10px] text-[var(--muted)]"
+						>
+							{post.data.pubDate.toLocaleDateString(
+								"en-US",
+								{
+									year: "numeric",
+									month: "short",
+									day: "numeric",
+								},
+							)}
+						</time>
+
+						<div>
+
+							<h3 class="text-lg font-semibold transition-colors group-hover:text-[var(--accent)]">
+								{post.data.title}
+							</h3>
+
+							<p class="mt-2 text-sm text-[var(--muted)]">
+								{post.data.description}
+							</p>
+
+						</div>
+
+						<div class="font-mono text-[10px] text-[var(--muted)]">
+							READ →
+						</div>
+
+					</div>
+
+				</a>
+			))}
+
+		</div>
+
+	</div>
+
+</section>