65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
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"
|
|
>
|
|
<div className="mb-10 flex items-end justify-between gap-6">
|
|
<div>
|
|
<p className="section-label mb-3">CAPABILITIES</p>
|
|
<h2
|
|
id="capabilities-heading"
|
|
className="font-display text-3xl font-semibold tracking-[-0.05em] text-blacksite-text sm:text-5xl"
|
|
>
|
|
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">
|
|
{capabilities.map((capability, index) => (
|
|
<m.div
|
|
key={capability.index}
|
|
className="grid gap-5 border-b border-blacksite-line py-6 sm:grid-cols-[1fr_auto] sm:items-center sm:py-8"
|
|
initial={shouldReduceMotion ? false : { opacity: 0, y: 14 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-12%" }}
|
|
transition={{
|
|
duration: shouldReduceMotion ? 0 : 0.45,
|
|
delay: shouldReduceMotion ? 0 : index * 0.07,
|
|
ease: "easeOut",
|
|
}}
|
|
>
|
|
<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-faint sm:text-right">
|
|
{formatCapabilityIndex(capability.index)}
|
|
</p>
|
|
</m.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|