manifesto+capabilities: renumber, rescale, breathe

components/portfolio/CapabilityRows.tsx

@@ -4,26 +4,18 @@ 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
       id="capabilities"
       aria-labelledby="capabilities-heading"
-      className="mx-auto max-w-7xl px-4 py-20 text-blacksite-text sm:px-6 sm:py-28 lg:px-8"
+      className="mx-auto max-w-7xl px-6 py-28 text-blacksite-text sm:px-8 sm:py-36 lg:px-12"
     >
-      <div className="mb-10 flex items-end justify-between gap-6">
+      <div className="mb-12">
         <div>
-          <p className="section-label mb-3">CAPABILITIES</p>
+          <p className="section-label mb-3">CAPABILITIES /.04</p>
           <h2
             id="capabilities-heading"
             className="font-display text-3xl font-semibold tracking-[-0.05em] text-blacksite-text sm:text-5xl"
@@ -31,9 +23,6 @@ export function CapabilityRows() {
             Built for hostile constraints.
           </h2>
         </div>
-        <p className="section-label hidden text-right sm:block">
-          {firstMarker}—{lastMarker}
-        </p>
       </div>
 
       <div className="border-t border-blacksite-line">
@@ -53,8 +42,8 @@ export function CapabilityRows() {
             <p className="font-display text-[clamp(28px,4.5vw,64px)] font-semibold leading-[0.95] tracking-[-0.06em] text-blacksite-text">
               {capability.text}
             </p>
-            <p className="section-label text-left text-blacksite-muted sm:text-right">
+            <p className="section-label text-left text-signal-orange sm:text-right">
-              {formatCapabilityIndex(capability.index)}
+              {capability.index}
             </p>
           </m.div>
         ))}

components/portfolio/Manifesto.tsx

@@ -5,32 +5,47 @@ import { m, useReducedMotion } from "motion/react";
 import { manifesto } from "@/lib/portfolio";
 
 const SURVIVE_PHRASE = "survive contact";
-const PROOF_PHRASE = "proof";
+
+function splitAccentPhrase(statement: string) {
+  const phraseIndex = statement.indexOf(SURVIVE_PHRASE);
+
+  if (phraseIndex < 0) {
+    return null;
+  }
+
+  return {
+    before: statement.slice(0, phraseIndex),
+    after: statement.slice(phraseIndex + SURVIVE_PHRASE.length),
+  };
+}
 
 export function Manifesto() {
   const shouldReduceMotion = useReducedMotion();
-  const [beforeSurvive, afterSurvive = ""] = manifesto.split(SURVIVE_PHRASE);
+  const accentSplit = splitAccentPhrase(manifesto);
-  const [betweenAccents, afterProof = ""] = afterSurvive.split(PROOF_PHRASE);
 
   return (
     <m.section
       aria-labelledby="manifesto-heading"
-      className="mx-auto max-w-7xl px-4 py-20 text-blacksite-muted sm:px-6 sm:py-28 lg:px-8"
+      className="mx-auto max-w-7xl px-6 py-28 text-blacksite-muted sm:px-8 sm:py-36 lg:px-12"
       initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: "-15%" }}
       transition={{ duration: shouldReduceMotion ? 0 : 0.6, ease: "easeOut" }}
     >
-      <p className="section-label mb-6">OPERATING PRINCIPLE</p>
+      <p className="section-label mb-12">PRINCIPLE /.03</p>
       <h2
         id="manifesto-heading"
-        className="max-w-5xl font-display text-[clamp(28px,4vw,56px)] font-semibold leading-[0.98] tracking-[-0.06em] text-blacksite-muted"
+        className="max-w-5xl font-display text-[clamp(2.25rem,6vw,4.5rem)] font-semibold leading-[1.05] tracking-[-0.06em] text-blacksite-muted"
       >
-        {beforeSurvive}
+        {accentSplit ? (
+          <>
+            {accentSplit.before}
             <span className="text-signal-cyan">{SURVIVE_PHRASE}</span>
-        {betweenAccents}
+            {accentSplit.after}
-        <span className="text-signal-orange">{PROOF_PHRASE}</span>
+          </>
-        {afterProof}
+        ) : (
+          manifesto
+        )}
       </h2>
     </m.section>
   );