49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import Reveal from '@/components/ui/reveal';
|
|
import SectionHeading from '@/components/ui/section-heading';
|
|
import { feats } from '@/lib/site';
|
|
|
|
const Feats = () => {
|
|
const isOddTotal = feats.length % 2 === 1;
|
|
|
|
return (
|
|
<section id="feats" className="container-page py-16">
|
|
<SectionHeading title="Leadership">
|
|
Operations and community work outside of code.
|
|
</SectionHeading>
|
|
|
|
<ul className="grid panel sm:grid-cols-2">
|
|
{feats.map((feat, i) => {
|
|
const isLast = i === feats.length - 1;
|
|
const isLastRow = isOddTotal
|
|
? isLast
|
|
: i >= feats.length - 2;
|
|
const isLeftCol = i % 2 === 0;
|
|
const colSpan = isOddTotal && isLast ? 'sm:col-span-2' : '';
|
|
const rightBorder =
|
|
isLeftCol && !(isOddTotal && isLast)
|
|
? 'sm:border-r'
|
|
: '';
|
|
const bottomBorder = isLastRow ? 'sm:border-b-0' : '';
|
|
|
|
return (
|
|
<li
|
|
key={feat.title}
|
|
className={`border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] md:p-7 ${colSpan} ${rightBorder} ${bottomBorder}`}
|
|
>
|
|
<Reveal delay={i * 60}>
|
|
<h3 className="font-display text-base font-normal text-ink">
|
|
{feat.title}
|
|
</h3>
|
|
<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
|
|
{feat.detail}
|
|
</p>
|
|
</Reveal>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Feats;
|