missing files

components/BlogList.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { BLOG_POSTS, type BlogPost } from "@/data/content";
+import { useStaggerReveal } from "@/hooks/useAnimations";
+import BlogPostCard from "@/components/BlogPostCard";
+import "../styles/blog.css";
+
+/** Sort posts newest-first by date (ISO display dates compare lexicographically). */
+function sortPostsNewestFirst(posts: BlogPost[]): BlogPost[] {
+  return [...posts].sort((a, b) => b.date.localeCompare(a.date));
+}
+
+/** The blog tab: every post, newest first, in a single vertical stack. */
+export default function BlogList() {
+  const posts = sortPostsNewestFirst(BLOG_POSTS);
+  const visible = useStaggerReveal(posts.length, 100);
+
+  return (
+    <div style={{ padding: "48px 0", minWidth: 0 }}>
+      <div
+        style={{
+          marginBottom: 8,
+          fontFamily: "var(--mono)",
+          fontSize: 11,
+          color: "var(--muted)",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+        }}
+      >
+        {"# blog"}
+      </div>
+      <h2
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 28,
+          fontWeight: 700,
+          color: "var(--fg)",
+          margin: "0 0 32px 0",
+          letterSpacing: "-0.01em",
+        }}
+      >
+        {"Writing"}
+      </h2>
+
+      <div className="blog-list">
+        {posts.map((post, i) => (
+          <BlogPostCard key={post.id} post={post} visible={visible.has(i)} />
+        ))}
+      </div>
+    </div>
+  );
+}

components/BlogPostCard.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { type BlogPost, imageSrc, imageDescription } from "@/data/content";
+import "../styles/blog.css";
+
+type Props = {
+  post: BlogPost;
+  visible: boolean;
+};
+
+/** One blog post: the card in the blog list. Unlike ProjectCard, clicking
+ *  navigates to the post instead of expanding in place. */
+export default function BlogPostCard({ post, visible }: Props) {
+  const [hovered, setHovered] = useState(false);
+
+  function postTagsComponent() {
+    return (
+      <div
+        style={{
+          display: "flex",
+          gap: 8,
+          flexWrap: "wrap",
+          marginBottom: 12,
+        }}
+      >
+        {post.tags.map((tag) => (
+          <span
+            key={tag}
+            style={{
+              fontFamily: "var(--mono)",
+              fontSize: 11,
+              fontWeight: 500,
+              color: "var(--accent)",
+              padding: "3px 10px",
+              background: "var(--accent-bg)",
+              borderRadius: 4,
+              letterSpacing: "0.02em",
+            }}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  function coverImageComponent() {
+    const image = post.images![0];
+    return (
+      <img
+        src={`/${imageSrc(image)}`}
+        alt={imageDescription(image) ?? `${post.title} cover image`}
+        width={800}
+        height={180}
+        style={{
+          width: "100%",
+          borderRadius: 4,
+          marginBottom: 16,
+          objectFit: "cover",
+          height: 180,
+        }}
+      />
+    );
+  }
+
+  return (
+    <Link
+      href={`/blog/${post.slug}`}
+      className="blog-post-card"
+      title={`Read: ${post.title}`}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "block",
+        width: "100%",
+        textDecoration: "none",
+        padding: 28,
+        overflow: "hidden",
+        background: hovered ? "var(--surface-hover)" : "var(--surface)",
+        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+        borderRadius: 8,
+        transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
+        transform: visible
+          ? hovered
+            ? "translateY(-3px)"
+            : "translateY(0)"
+          : "translateY(12px)",
+        opacity: visible ? 1 : 0,
+        boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
+        pointerEvents: "auto",
+        cursor: "pointer",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          gap: 12,
+          marginBottom: 12,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 18,
+            fontWeight: 700,
+            color: hovered ? "var(--accent)" : "var(--fg)",
+            transition: "color 0.2s",
+            minWidth: 0,
+          }}
+        >
+          {post.title}
+        </div>
+        <div
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 11,
+            color: "var(--muted)",
+            padding: "2px 8px",
+            background: "var(--bg)",
+            borderRadius: 4,
+            border: "1px solid var(--border)",
+            whiteSpace: "nowrap",
+            flexShrink: 0,
+          }}
+        >
+          {post.date}
+        </div>
+      </div>
+      {postTagsComponent()}
+      <p
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 14,
+          lineHeight: 1.6,
+          color: "var(--fg-secondary)",
+          margin: "0 0 16px 0",
+        }}
+      >
+        {post.description}
+      </p>
+      {post.images && post.images.length > 0 && coverImageComponent()}
+    </Link>
+  );
+}

components/Nav.tsx

@@ -7,7 +7,7 @@ type Props = {
   section: string;
 };
 
-const items = ["profile", "project", "mods"];
+const items = ["profile", "project", "blog", "mods"];
 
 export default function Nav({ section }: Props) {
 
@@ -36,7 +36,7 @@ export default function Nav({ section }: Props) {
             color: section === item ? "var(--accent)" : "var(--muted)",
             border: "none",
             borderBottom: section === item ? "2px solid var(--accent)" : "2px solid transparent",
-            padding: "12px 24px",
+            padding: "12px 16px",
             cursor: "pointer",
             fontFamily: "inherit",
             fontSize: "inherit",