feat(portfolio): add operator profile with banner, publication, and honors

components/portfolio/FieldNotes.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import type { PostMeta } from "@/lib/posts";
+
+type FieldNotesProps = {
+  posts: PostMeta[];
+};
+
+function formatPostDate(date: string) {
+  const parsed = new Date(date);
+
+  if (Number.isNaN(parsed.getTime())) return date;
+
+  return parsed.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+  });
+}
+
+export function FieldNotes({ posts }: FieldNotesProps) {
+  const recentPosts = posts.slice(0, 4);
+
+  return (
+    <section
+      id="notes"
+      className="border-y border-blacksite-line bg-blacksite-bg2 px-4 py-24 text-blacksite-text sm:px-6 lg:px-8"
+    >
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <p className="section-label mb-3">FIELD NOTES /.04</p>
+            <h2 className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text sm:text-6xl">
+              Blog telemetry from the archive.
+            </h2>
+          </div>
+          <Link
+            href="/blog/"
+            className="section-label w-fit rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
+          >
+            All field notes →
+          </Link>
+        </div>
+
+        {recentPosts.length > 0 ? (
+          <div className="divide-y divide-blacksite-line border-y border-blacksite-line">
+            {recentPosts.map((post) => (
+              <Link
+                key={post.slug}
+                href={`/blog/${post.slug}/`}
+                className="group grid gap-3 px-0 py-6 transition-colors hover:bg-blacksite-surface/55 focus-visible:outline-signal-cyan sm:grid-cols-[12rem_minmax(0,1fr)] sm:px-4"
+              >
+                <time className="section-label pt-1" dateTime={post.date}>
+                  {formatPostDate(post.date)}
+                </time>
+                <span className="min-w-0">
+                  <span className="block font-display text-2xl font-medium tracking-[-0.03em] text-blacksite-text transition-colors group-hover:text-signal-cyan group-focus-visible:text-signal-cyan">
+                    {post.title}
+                  </span>
+                  {post.excerpt && (
+                    <span className="mt-2 block max-w-3xl text-sm leading-6 text-blacksite-muted">
+                      {post.excerpt}
+                    </span>
+                  )}
+                </span>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <div className="border border-dashed border-blacksite-line bg-blacksite-surface/45 p-8 sm:p-10">
+            <p className="section-label mb-5 !text-blacksite-text">
+              NO FIELD NOTES ON RECORD — ARCHIVE OPENS SOON
+            </p>
+            <Link
+              href="/blog/"
+              className="section-label inline-flex rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
+            >
+              Visit archive →
+            </Link>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}