restore portfolio

src/pages/blog/index.astro

@@ -0,0 +1,112 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Header from "../../components/Header.astro";
+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(),
+	);
+---
+
+<Layout
+	title="Blog — Semyon"
+	description="Technical notes, experiments and things worth documenting."
+>
+	<Header />
+
+	<main>
+
+		<section>
+			<div class="mx-auto max-w-7xl px-6 py-28 lg:px-8 lg:py-36">
+
+				<div class="font-mono text-[10px] tracking-widest text-[var(--muted)]">
+					04 / BLOG
+				</div>
+
+				<div class="mt-4 flex flex-col justify-between gap-6 md:flex-row md:items-end">
+
+					<h1 class="text-5xl font-bold tracking-tight sm:text-6xl">
+						Technical notes.
+					</h1>
+
+					<p class="max-w-md text-sm leading-relaxed text-[var(--muted)]">
+						Things I learned, broke, investigated or decided
+						were worth writing down.
+					</p>
+
+				</div>
+
+			</div>
+		</section>
+
+		<section class="border-t border-[var(--border)]">
+
+			<div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+
+				<div class="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-6 lg:grid-cols-[160px_1fr_auto] lg:items-start">
+
+								<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>
+
+									<h2 class="text-xl font-semibold tracking-tight transition-colors group-hover:text-[var(--accent)]">
+										{post.data.title}
+									</h2>
+
+									<p class="mt-3 max-w-2xl text-sm leading-relaxed text-[var(--muted)]">
+										{post.data.description}
+									</p>
+
+									<div class="mt-5 flex flex-wrap gap-2">
+
+										{post.data.tags.map((tag) => (
+											<span class="font-mono text-[9px] text-[var(--muted)]">
+												#{tag}
+											</span>
+										))}
+
+									</div>
+
+								</div>
+
+								<div class="font-mono text-[10px] text-[var(--muted)] transition-colors group-hover:text-[var(--text)]">
+									READ →
+								</div>
+
+							</div>
+
+						</a>
+					))}
+
+				</div>
+
+			</div>
+
+		</section>
+
+	</main>
+</Layout>