SluijsensandClaude Sonnet 5
5c3d409191
De nav is sticky en 64px (h-16) hoog, maar de secties hadden geen scroll-margin. scrollIntoView(block:'start') lijnde de sectietop dus exact uit met de viewport-top, waardoor de sticky nav er precies overheen schoof en de sectiekop (met name bij Over, nu direct na de Hero) onder de nav verdween - het voelde alsof er te ver werd doorgescrold. scroll-mt-16 op elke sectie houdt nu ruimte vrij voor de nav. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import { aboutContent } from '../data/content';
|
|
|
|
export function AboutSection() {
|
|
return (
|
|
<section id="over" className="scroll-mt-16 py-[88px]">
|
|
<div className="mx-auto max-w-[1080px] px-6">
|
|
<div className="grid grid-cols-1 items-start gap-6 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr] sm:gap-12">
|
|
<div className="order-1 mb-2 sm:col-start-1 sm:row-start-1 sm:mb-0">
|
|
<span className="font-mono block text-sm uppercase tracking-wider text-accent">
|
|
// over
|
|
</span>
|
|
<h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
|
|
Eén ontwikkelaar, korte lijnen
|
|
</h2>
|
|
</div>
|
|
<div className="font-mono order-2 flex aspect-[4/5] w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-line bg-surface p-6 text-center text-[0.8rem] uppercase tracking-wider text-muted sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
|
|
<span>foto</span>
|
|
<span>Bryan Slop</span>
|
|
</div>
|
|
<div className="order-3 sm:order-2 sm:col-start-1 sm:row-start-2">
|
|
{aboutContent.paragraphs.map((paragraph) => (
|
|
<p key={paragraph} className="mb-4 text-muted">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|