marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

manifesto+capabilities: renumber, rescale, breathe

Browse Source
This commit is contained in:
kbot
2026-07-06 21:55:50 -05:00
parent 41cfccda2a
commit b525ddcd04
2 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/portfolio/CapabilityRows.tsx
View File

@@ -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">
{formatCapabilityIndex(capability.index)}
<p className="section-label text-left text-signal-orange sm:text-right">
{capability.index}
</p>
</m.div>
))}

37
components/portfolio/Manifesto.tsx
View File

@@ -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 [betweenAccents, afterProof = ""] = afterSurvive.split(PROOF_PHRASE);
const accentSplit = splitAccentPhrase(manifesto);
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}
<span className="text-signal-cyan">{SURVIVE_PHRASE}</span>
{betweenAccents}
<span className="text-signal-orange">{PROOF_PHRASE}</span>
{afterProof}
{accentSplit ? (
<>
{accentSplit.before}
<span className="text-signal-cyan">{SURVIVE_PHRASE}</span>
{accentSplit.after}
</>
) : (
manifesto
)}
</h2>
</m.section>
);