From d8631dfc1be8c6c553c9be8ad1f4676b29925057 Mon Sep 17 00:00:00 2001
From: kbot <kbot@local>
Date: Mon, 6 Jul 2026 20:33:34 -0500
Subject: [PATCH] feat(portfolio): add manifesto and numbered capability rows

---
 components/portfolio/CapabilityRows.tsx | 14 ++++++++++++--
 components/portfolio/Hero.tsx           |  4 ++++
 components/portfolio/HeroCanvas.tsx     |  4 ++++
 components/portfolio/Manifesto.tsx      | 11 +++++++----
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/components/portfolio/CapabilityRows.tsx b/components/portfolio/CapabilityRows.tsx
index 69b36f7..9d9f4fb 100644
--- a/components/portfolio/CapabilityRows.tsx
+++ b/components/portfolio/CapabilityRows.tsx
@@ -4,8 +4,16 @@ import { m, useReducedMotion } from "motion/react";
 
 import { capabilities } from "@/lib/portfolio";
 
+function formatCapabilityIndex(index: string) {
+  return `/.${index}`;
+}
+
 export function CapabilityRows() {
   const shouldReduceMotion = useReducedMotion();
+  const firstMarker = formatCapabilityIndex(capabilities[0]?.index ?? "01");
+  const lastMarker = formatCapabilityIndex(
+    capabilities[capabilities.length - 1]?.index ?? "05",
+  );
 
   return (
     <section
@@ -23,7 +31,9 @@ export function CapabilityRows() {
             Built for hostile constraints.
           </h2>
         </div>
-        <p className="section-label hidden text-right sm:block">/.01—/.05</p>
+        <p className="section-label hidden text-right sm:block">
+          {firstMarker}—{lastMarker}
+        </p>
       </div>
 
       <div className="border-t border-blacksite-line">
@@ -44,7 +54,7 @@ export function CapabilityRows() {
               {capability.text}
             </p>
             <p className="section-label text-left text-blacksite-faint sm:text-right">
-              /.{capability.index}
+              {formatCapabilityIndex(capability.index)}
             </p>
           </m.div>
         ))}
diff --git a/components/portfolio/Hero.tsx b/components/portfolio/Hero.tsx
index a37d15f..55b5d98 100644
--- a/components/portfolio/Hero.tsx
+++ b/components/portfolio/Hero.tsx
@@ -10,6 +10,10 @@ export function Hero() {
   const shouldReduceMotion = useReducedMotion();
 
   const openCommandPalette = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
     window.dispatchEvent(new CustomEvent(paletteEventName));
   };
 
diff --git a/components/portfolio/HeroCanvas.tsx b/components/portfolio/HeroCanvas.tsx
index f06b718..8f6c486 100644
--- a/components/portfolio/HeroCanvas.tsx
+++ b/components/portfolio/HeroCanvas.tsx
@@ -53,6 +53,7 @@ export function HeroCanvas() {
     let dpr = 1;
     let frameId = 0;
     let isMounted = true;
+    let resizeObserver: ResizeObserver | null = null;
 
     const resize = () => {
       const rect = canvas.getBoundingClientRect();
@@ -175,6 +176,8 @@ export function HeroCanvas() {
     };
 
     resize();
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(canvas);
     window.addEventListener("resize", resize, { passive: true });
 
     if (!shouldReduceMotion) {
@@ -183,6 +186,7 @@ export function HeroCanvas() {
 
     return () => {
       isMounted = false;
+      resizeObserver?.disconnect();
       window.removeEventListener("resize", resize);
       if (frameId) {
         window.cancelAnimationFrame(frameId);
diff --git a/components/portfolio/Manifesto.tsx b/components/portfolio/Manifesto.tsx
index 82256b2..d7541eb 100644
--- a/components/portfolio/Manifesto.tsx
+++ b/components/portfolio/Manifesto.tsx
@@ -4,10 +4,13 @@ import { m, useReducedMotion } from "motion/react";
 
 import { manifesto } from "@/lib/portfolio";
 
+const SURVIVE_PHRASE = "survive contact";
+const PROOF_PHRASE = "proof";
+
 export function Manifesto() {
   const shouldReduceMotion = useReducedMotion();
-  const [beforeSurvive, afterSurvive = ""] = manifesto.split("survive contact");
-  const [betweenAccents, afterProof = ""] = afterSurvive.split("proof");
+  const [beforeSurvive, afterSurvive = ""] = manifesto.split(SURVIVE_PHRASE);
+  const [betweenAccents, afterProof = ""] = afterSurvive.split(PROOF_PHRASE);
 
   return (
     <m.section
@@ -24,9 +27,9 @@ export function Manifesto() {
         className="max-w-5xl font-display text-[clamp(28px,4vw,56px)] font-semibold leading-[0.98] tracking-[-0.06em] text-blacksite-muted"
       >
         {beforeSurvive}
-        <span className="text-signal-cyan">survive contact</span>
+        <span className="text-signal-cyan">{SURVIVE_PHRASE}</span>
         {betweenAccents}
-        <span className="text-signal-orange">proof</span>
+        <span className="text-signal-orange">{PROOF_PHRASE}</span>
         {afterProof}
       </h2>
     </m.section>