mmintelandClaude Opus 5.5
e89a248ca5
Dark surfaces now carry light: frames glow along their edge and shed binary digits (BitAura), dark sections open with a lit seam (BitSeam), the career path is a line of light and "My work" became a dark stage. Buttons carry a travelling light and a spot that follows the pointer (BitGlow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import * as React from "react";
|
|
import { BinaryTicker } from "@/src/components/bits/BinaryTicker";
|
|
import { BitSeam } from "@/src/components/bits/BitSeam";
|
|
import { BitWipe } from "@/src/components/bits/BitWipe";
|
|
import { DecodeText } from "@/src/components/bits/DecodeText";
|
|
import { Reveal } from "@/src/components/Reveal";
|
|
|
|
interface BlockProps {
|
|
/** Two-digit section index, shown with its binary form. */
|
|
index: string;
|
|
label: string;
|
|
title: React.ReactNode;
|
|
id?: string;
|
|
/** `dark` turns the section into a dark stage. */
|
|
tone?: "light" | "dark";
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Block: one section of the homepage. A single left axis, one kicker line,
|
|
* one oversized headline, then the content. No sidebars.
|
|
*/
|
|
export const Block: React.FC<BlockProps> = ({
|
|
index,
|
|
label,
|
|
title,
|
|
id,
|
|
tone = "light",
|
|
children,
|
|
}) => {
|
|
const dark = tone === "dark";
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={`relative scroll-mt-24 border-t ${
|
|
dark
|
|
? "overflow-clip border-slate-800 bg-slate-900"
|
|
: "overflow-x-clip border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
{dark && (
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-70"
|
|
style={{
|
|
backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
|
|
backgroundSize: "20px 20px",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
{dark && <BitSeam />}
|
|
<div className="relative mx-auto w-full max-w-[1400px] px-5 py-20 md:px-12 md:py-36">
|
|
<Reveal>
|
|
<div className="mb-8 flex items-center gap-4 md:mb-12">
|
|
<span
|
|
className={`font-mono text-[11px] font-bold tracking-[0.2em] ${dark ? "text-white" : "text-slate-900"}`}
|
|
>
|
|
{index}
|
|
</span>
|
|
<span
|
|
className={`h-px w-10 ${dark ? "bg-slate-700" : "bg-slate-300"}`}
|
|
/>
|
|
<DecodeText
|
|
text={label}
|
|
className={`font-mono text-[11px] uppercase tracking-[0.25em] ${dark ? "text-slate-400" : "text-slate-500"}`}
|
|
/>
|
|
<BinaryTicker
|
|
value={parseInt(index, 10)}
|
|
alive
|
|
className={`ml-auto hidden font-mono text-[10px] tracking-[0.3em] md:block ${dark ? "text-slate-600" : "text-slate-300"}`}
|
|
/>
|
|
</div>
|
|
</Reveal>
|
|
<BitWipe delay={0.1} tone={dark ? "light" : "dark"}>
|
|
<h2
|
|
className={`m-0 max-w-6xl text-4xl font-bold leading-[0.95] tracking-tighter md:text-7xl lg:text-[6.5rem] ${dark ? "text-white" : "text-slate-900"}`}
|
|
>
|
|
{title}
|
|
</h2>
|
|
</BitWipe>
|
|
<div className="mt-14 md:mt-24">{children}</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|