SluijsensandClaude Sonnet 5
033547232e
gap-12 (3rem) tussen grid-items plus mb-6 op de kop-div stapelden op tot te veel ruimte tussen "// over" en de foto op mobiel. Op mobiel nu gap-6 en mb-2; vanaf sm ongewijzigd (gap-12, geen extra marge). 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="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>
|
|
);
|
|
}
|