40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { SITE } from '@/lib/config';
|
|
|
|
export default function About() {
|
|
return (
|
|
<section id="about" className="py-24 px-6" aria-labelledby="about-heading">
|
|
<div className="max-w-5xl mx-auto grid md:grid-cols-[auto_1fr] gap-16 items-start">
|
|
{/* Avatar */}
|
|
<div className="flex-shrink-0">
|
|
<div className="glass w-40 h-40 md:w-48 md:h-48 flex items-center justify-center rounded-2xl overflow-hidden">
|
|
<span className="text-6xl font-black text-white/10 tracking-tighter select-none">WM</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<span className="label">About</span>
|
|
</div>
|
|
<p className="text-white/50 leading-relaxed max-w-[52ch]">{SITE.about1}</p>
|
|
<p className="text-white/50 leading-relaxed max-w-[52ch]">{SITE.about2}</p>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-3">Stack</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{SITE.skills.map(s => (
|
|
<span key={s}
|
|
className="px-3 py-1 text-xs font-medium text-white/40 bg-white/[0.04]
|
|
border border-white/[0.07] rounded-full hover:text-white/60 hover:border-white/[0.12]
|
|
transition-colors duration-150 cursor-default">
|
|
{s}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|