cesnimda
033c9ec315
- vitest: dictionary parity, slug-map bijection, content-schema validation, JSON-LD (23) - playwright: both locales, language-switch mapping (incl. no-JS), CV downloads, form happy-path + honeypot, axe a11y on 5 templates x 2 themes (23) - fix: raise ink-faint + light accent to meet WCAG AA 4.5:1 (axe-verified) - fix: gate reveal animations behind html.js so content is visible without JS (progressive enhancement - was hidden at opacity 0); scan reduced-motion path - fix: validate contact form before the anti-bot time-trap (no false success) - chore: ESLint node globals, typed diagram props, resvg fontFiles, prettier pass Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
53 lines
1.7 KiB
Plaintext
53 lines
1.7 KiB
Plaintext
---
|
|
import type { Locale } from '@i18n/locales';
|
|
import { useDict } from '@i18n/t';
|
|
import Base from '@layouts/Base.astro';
|
|
import { getProfile, getMeta } from '@lib/content';
|
|
import SectionLabel from '@components/ui/SectionLabel.astro';
|
|
import Portrait from '@components/ui/Portrait.astro';
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
const { locale } = Astro.props;
|
|
const d = useDict(locale);
|
|
const profile = getProfile(locale);
|
|
const m = getMeta('about', locale);
|
|
---
|
|
|
|
<Base locale={locale} pageId="about" title={m.title} description={m.description} ogType="profile">
|
|
<div class="mx-auto grid max-w-[--content-max] gap-12 px-6 py-14 lg:grid-cols-12">
|
|
<div class="lg:col-span-7">
|
|
<SectionLabel text={d.nav.about} />
|
|
<h1 class="text-h1 mt-4">{profile.aboutHeading}</h1>
|
|
<div class="mt-6 flex flex-col gap-4">
|
|
{
|
|
profile.aboutParagraphs.map((para) => (
|
|
<p class="text-body-lg text-ink-muted max-w-[64ch]">{para}</p>
|
|
))
|
|
}
|
|
</div>
|
|
<p class="mt-8">
|
|
<span class="mono-label mb-2 block">{d.about.interests}</span>
|
|
<span class="text-body text-ink-muted">{profile.interestsLine}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<aside class="lg:col-span-5">
|
|
<Portrait src={profile.photo.src} alt={profile.photo.alt} caption={profile.photo.caption} />
|
|
<div class="mt-8">
|
|
<p class="mono-label mb-3">{d.about.languages}</p>
|
|
<ul class="flex flex-col gap-2">
|
|
{
|
|
profile.languages.map((lang) => (
|
|
<li class="text-body text-ink">
|
|
{lang.label} <span class="text-ink-muted">— {lang.level}</span>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</Base>
|