test: vitest unit + playwright e2e suites; fix a11y, contrast, no-JS reveal
- 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>
This commit is contained in:
cesnimda
@@ -19,9 +19,13 @@ const m = getMeta('about', locale);
|
||||
<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="mt-4 text-h1">{profile.aboutHeading}</h1>
|
||||
<h1 class="text-h1 mt-4">{profile.aboutHeading}</h1>
|
||||
<div class="mt-6 flex flex-col gap-4">
|
||||
{profile.aboutParagraphs.map((para) => <p class="max-w-[64ch] text-body-lg text-ink-muted">{para}</p>)}
|
||||
{
|
||||
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>
|
||||
|
||||
@@ -20,21 +20,51 @@ const copy = {
|
||||
en: {
|
||||
lead: 'This site is a small work sample in its own right. A few of the decisions behind it:',
|
||||
points: [
|
||||
['Static by default', 'Built with Astro and served as static HTML — no client framework runtime, so the largest content paint is just text and CSS. The three interactive parts (menu, lightbox, contact form) are tiny progressive-enhancement modules.'],
|
||||
['Bilingual from the ground up', 'English and Norwegian are equal citizens: a typed slug map is the single source of truth for routes, the language switch and hreflang, so they can never drift apart.'],
|
||||
['Motion that confirms, never performs', 'One signature animation, everything else is restraint. Every effect has a reduced-motion variant, and content is never gated behind an animation.'],
|
||||
['Self-hosted', 'Built and deployed from my own Gitea instance to Docker behind nginx. The contact form is a small stateless .NET service — even that is part of my own stack.'],
|
||||
['No tracking', 'No analytics beacons, no third-party fonts, no cookies — which is also why there is no cookie banner.'],
|
||||
[
|
||||
'Static by default',
|
||||
'Built with Astro and served as static HTML — no client framework runtime, so the largest content paint is just text and CSS. The three interactive parts (menu, lightbox, contact form) are tiny progressive-enhancement modules.',
|
||||
],
|
||||
[
|
||||
'Bilingual from the ground up',
|
||||
'English and Norwegian are equal citizens: a typed slug map is the single source of truth for routes, the language switch and hreflang, so they can never drift apart.',
|
||||
],
|
||||
[
|
||||
'Motion that confirms, never performs',
|
||||
'One signature animation, everything else is restraint. Every effect has a reduced-motion variant, and content is never gated behind an animation.',
|
||||
],
|
||||
[
|
||||
'Self-hosted',
|
||||
'Built and deployed from my own Gitea instance to Docker behind nginx. The contact form is a small stateless .NET service — even that is part of my own stack.',
|
||||
],
|
||||
[
|
||||
'No tracking',
|
||||
'No analytics beacons, no third-party fonts, no cookies — which is also why there is no cookie banner.',
|
||||
],
|
||||
],
|
||||
},
|
||||
no: {
|
||||
lead: 'Denne siden er også et lite arbeidsprøve i seg selv. Noen av valgene bak den:',
|
||||
points: [
|
||||
['Statisk som standard', 'Bygget med Astro og servert som statisk HTML — ingen klient-rammeverk i drift, så det første innholdet som vises er bare tekst og CSS. De tre interaktive delene (meny, lightbox, kontaktskjema) er små moduler for progressiv forbedring.'],
|
||||
['Tospråklig fra bunnen', 'Engelsk og norsk er likestilt: et typet slug-kart er én kilde til sannhet for ruter, språkbytte og hreflang, så de kan aldri komme i utakt.'],
|
||||
['Bevegelse som bekrefter, aldri opptrer', 'Én signaturanimasjon, ellers tilbakeholdenhet. Hver effekt har en variant for redusert bevegelse, og innhold er aldri sperret bak en animasjon.'],
|
||||
['Egendriftet', 'Bygget og rullet ut fra min egen Gitea-instans til Docker bak nginx. Kontaktskjemaet er en liten tilstandsløs .NET-tjeneste — også den er en del av min egen stack.'],
|
||||
['Ingen sporing', 'Ingen analyse-beacons, ingen tredjeparts-fonter, ingen informasjonskapsler — som også er grunnen til at det ikke finnes noe cookie-banner.'],
|
||||
[
|
||||
'Statisk som standard',
|
||||
'Bygget med Astro og servert som statisk HTML — ingen klient-rammeverk i drift, så det første innholdet som vises er bare tekst og CSS. De tre interaktive delene (meny, lightbox, kontaktskjema) er små moduler for progressiv forbedring.',
|
||||
],
|
||||
[
|
||||
'Tospråklig fra bunnen',
|
||||
'Engelsk og norsk er likestilt: et typet slug-kart er én kilde til sannhet for ruter, språkbytte og hreflang, så de kan aldri komme i utakt.',
|
||||
],
|
||||
[
|
||||
'Bevegelse som bekrefter, aldri opptrer',
|
||||
'Én signaturanimasjon, ellers tilbakeholdenhet. Hver effekt har en variant for redusert bevegelse, og innhold er aldri sperret bak en animasjon.',
|
||||
],
|
||||
[
|
||||
'Egendriftet',
|
||||
'Bygget og rullet ut fra min egen Gitea-instans til Docker bak nginx. Kontaktskjemaet er en liten tilstandsløs .NET-tjeneste — også den er en del av min egen stack.',
|
||||
],
|
||||
[
|
||||
'Ingen sporing',
|
||||
'Ingen analyse-beacons, ingen tredjeparts-fonter, ingen informasjonskapsler — som også er grunnen til at det ikke finnes noe cookie-banner.',
|
||||
],
|
||||
],
|
||||
},
|
||||
}[locale];
|
||||
@@ -43,15 +73,15 @@ const copy = {
|
||||
<Base locale={locale} pageId="colophon" title={m.title} description={m.description}>
|
||||
<div class="mx-auto max-w-3xl px-6 py-16">
|
||||
<SectionLabel text={d.footer.colophon} />
|
||||
<h1 class="mt-4 text-h1">{d.footer.colophon}</h1>
|
||||
<p class="mt-4 text-body-lg text-ink-muted">{copy.lead}</p>
|
||||
<h1 class="text-h1 mt-4">{d.footer.colophon}</h1>
|
||||
<p class="text-body-lg text-ink-muted mt-4">{copy.lead}</p>
|
||||
|
||||
<dl class="mt-8 flex flex-col gap-6">
|
||||
{
|
||||
copy.points.map(([term, desc]) => (
|
||||
<div class="rounded-md border border-line bg-surface-1 p-5">
|
||||
<dt class="text-h4 font-semibold text-ink">{term}</dt>
|
||||
<dd class="mt-2 text-body text-ink-muted">{desc}</dd>
|
||||
<div class="border-line bg-surface-1 rounded-md border p-5">
|
||||
<dt class="text-h4 text-ink font-semibold">{term}</dt>
|
||||
<dd class="text-body text-ink-muted mt-2">{desc}</dd>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -21,8 +21,8 @@ const fieldClass =
|
||||
<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.contact} />
|
||||
<h1 class="mt-4 text-h1">{profile.contactHeading}</h1>
|
||||
<p class="mt-3 text-body-lg text-ink-muted">{profile.contactBody}</p>
|
||||
<h1 class="text-h1 mt-4">{profile.contactHeading}</h1>
|
||||
<p class="text-body-lg text-ink-muted mt-3">{profile.contactBody}</p>
|
||||
|
||||
<form
|
||||
id="contact-form"
|
||||
@@ -32,21 +32,27 @@ const fieldClass =
|
||||
novalidate
|
||||
>
|
||||
<div>
|
||||
<label for="cf-name" class="mb-1.5 block text-small font-medium text-ink">{d.form.name}</label>
|
||||
<label for="cf-name" class="text-small text-ink mb-1.5 block font-medium"
|
||||
>{d.form.name}</label
|
||||
>
|
||||
<input id="cf-name" name="name" type="text" autocomplete="name" class={fieldClass} />
|
||||
<p data-error-for="name" hidden role="alert" class="mt-1.5 text-small text-danger"></p>
|
||||
<p data-error-for="name" hidden role="alert" class="text-small text-danger mt-1.5"></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="cf-email" class="mb-1.5 block text-small font-medium text-ink">{d.form.email}</label>
|
||||
<label for="cf-email" class="text-small text-ink mb-1.5 block font-medium"
|
||||
>{d.form.email}</label
|
||||
>
|
||||
<input id="cf-email" name="email" type="email" autocomplete="email" class={fieldClass} />
|
||||
<p data-error-for="email" hidden role="alert" class="mt-1.5 text-small text-danger"></p>
|
||||
<p data-error-for="email" hidden role="alert" class="text-small text-danger mt-1.5"></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="cf-message" class="mb-1.5 block text-small font-medium text-ink">{d.form.message}</label>
|
||||
<label for="cf-message" class="text-small text-ink mb-1.5 block font-medium"
|
||||
>{d.form.message}</label
|
||||
>
|
||||
<textarea id="cf-message" name="message" rows="5" class={fieldClass}></textarea>
|
||||
<p data-error-for="message" hidden role="alert" class="mt-1.5 text-small text-danger"></p>
|
||||
<p data-error-for="message" hidden role="alert" class="text-small text-danger mt-1.5"></p>
|
||||
</div>
|
||||
|
||||
{/* Honeypot — hidden from users and assistive tech */}
|
||||
@@ -58,27 +64,39 @@ const fieldClass =
|
||||
<button
|
||||
type="submit"
|
||||
data-sending={d.form.sending}
|
||||
class="inline-flex w-fit items-center justify-center rounded-sm bg-accent px-5 py-2.5 text-body font-semibold text-accent-ink transition-[filter] duration-[--dur-quick] hover:brightness-105"
|
||||
class="bg-accent text-body text-accent-ink inline-flex w-fit items-center justify-center rounded-sm px-5 py-2.5 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
|
||||
>
|
||||
<span data-label>{d.form.send}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="form-success" hidden class="mt-8 rounded-md border border-accent/40 bg-surface-2 p-6">
|
||||
<p class="flex items-center gap-2 text-body font-semibold text-accent">
|
||||
<div
|
||||
id="form-success"
|
||||
hidden
|
||||
class="border-accent/40 bg-surface-2 mt-8 rounded-md border p-6"
|
||||
>
|
||||
<p class="text-body text-accent flex items-center gap-2 font-semibold">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path class="check-path" d="M5 12l5 5 9-11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path
|
||||
class="check-path"
|
||||
d="M5 12l5 5 9-11"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
{d.form.successTitle}
|
||||
</p>
|
||||
<p class="mt-2 text-body text-ink-muted">{d.form.successBody}</p>
|
||||
<p class="text-body text-ink-muted mt-2">{d.form.successBody}</p>
|
||||
</div>
|
||||
|
||||
<div id="form-error" hidden class="mt-8 rounded-md border border-danger/40 bg-surface-2 p-6">
|
||||
<p class="text-body font-semibold text-danger">{d.form.errorTitle}</p>
|
||||
<p class="mt-2 text-body text-ink-muted">
|
||||
<div id="form-error" hidden class="border-danger/40 bg-surface-2 mt-8 rounded-md border p-6">
|
||||
<p class="text-body text-danger font-semibold">{d.form.errorTitle}</p>
|
||||
<p class="text-body text-ink-muted mt-2">
|
||||
{d.form.errorBody}
|
||||
<a class="text-accent hover:underline" href={`mailto:${profile.links.email}`}>{profile.links.email}</a>
|
||||
<a class="text-accent hover:underline" href={`mailto:${profile.links.email}`}
|
||||
>{profile.links.email}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,15 +109,31 @@ const fieldClass =
|
||||
href={`mailto:${profile.links.email}`}
|
||||
data-copy={profile.links.email}
|
||||
data-copied-label={d.form.copied}
|
||||
class="inline-flex items-center gap-2 text-body text-ink hover:text-accent"
|
||||
class="text-body text-ink hover:text-accent inline-flex items-center gap-2"
|
||||
>
|
||||
<span data-copy-label>{profile.links.email}</span>
|
||||
<span class="text-ink-faint" aria-hidden="true">⧉</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href={profile.links.linkedin} rel="me noopener" class="text-body text-ink hover:text-accent">LinkedIn ↗</a></li>
|
||||
<li><a href={profile.links.gitea} rel="me noopener" class="text-body text-ink hover:text-accent">git.cesnimda.uk ↗</a></li>
|
||||
<li><a href={profile.links.phoneHref} class="text-body text-ink hover:text-accent">{profile.links.phone}</a></li>
|
||||
<li>
|
||||
<a
|
||||
href={profile.links.linkedin}
|
||||
rel="me noopener"
|
||||
class="text-body text-ink hover:text-accent">LinkedIn ↗</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={profile.links.gitea}
|
||||
rel="me noopener"
|
||||
class="text-body text-ink hover:text-accent">git.cesnimda.uk ↗</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href={profile.links.phoneHref} class="text-body text-ink hover:text-accent"
|
||||
>{profile.links.phone}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -22,26 +22,27 @@ const cards = [
|
||||
<Base locale={locale} pageId="cv" title={m.title} description={m.description}>
|
||||
<div class="mx-auto max-w-3xl px-6 py-16">
|
||||
<SectionLabel text="CV" />
|
||||
<h1 class="mt-4 text-h1">{d.cvPage.heading}</h1>
|
||||
<p class="mt-4 text-body-lg text-ink-muted">{d.cvPage.intro}</p>
|
||||
<h1 class="text-h1 mt-4">{d.cvPage.heading}</h1>
|
||||
<p class="text-body-lg text-ink-muted mt-4">{d.cvPage.intro}</p>
|
||||
|
||||
<div class="mt-8 grid gap-4 sm:grid-cols-2">
|
||||
{
|
||||
cards.map((c) => (
|
||||
<div class="flex flex-col rounded-md border border-line bg-surface-1 p-6">
|
||||
<div class="border-line bg-surface-1 flex flex-col rounded-md border p-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="rounded-sm bg-surface-2 px-2 py-1 font-mono text-mono-label text-accent">
|
||||
<span class="bg-surface-2 text-mono-label text-accent rounded-sm px-2 py-1 font-mono">
|
||||
{c.code}
|
||||
</span>
|
||||
<span class="text-body font-semibold text-ink">{c.label}</span>
|
||||
<span class="text-body text-ink font-semibold">{c.label}</span>
|
||||
</div>
|
||||
<p class="mt-2 font-mono text-mono-meta text-ink-faint">
|
||||
{interpolate(d.cv.fileMeta, { size: c.cv.sizeKb })} · {d.cvPage.updated} {c.cv.updated}
|
||||
<p class="text-mono-meta text-ink-faint mt-2 font-mono">
|
||||
{interpolate(d.cv.fileMeta, { size: c.cv.sizeKb })} · {d.cvPage.updated}{' '}
|
||||
{c.cv.updated}
|
||||
</p>
|
||||
<a
|
||||
href={c.cv.path}
|
||||
download
|
||||
class="mt-5 inline-flex items-center justify-center gap-2 rounded-sm bg-accent px-4 py-2.5 text-body font-semibold text-accent-ink transition-[filter] duration-[--dur-quick] hover:brightness-105"
|
||||
class="bg-accent text-body text-accent-ink mt-5 inline-flex items-center justify-center gap-2 rounded-sm px-4 py-2.5 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
|
||||
>
|
||||
{d.cv.download}
|
||||
</a>
|
||||
@@ -50,6 +51,6 @@ const cards = [
|
||||
}
|
||||
</div>
|
||||
|
||||
<p class="mt-6 font-mono text-mono-meta text-ink-faint">{d.cvPage.atsNote}</p>
|
||||
<p class="text-mono-meta text-ink-faint mt-6 font-mono">{d.cvPage.atsNote}</p>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
@@ -17,8 +17,8 @@ const m = getMeta('experience', locale);
|
||||
<Base locale={locale} pageId="experience" title={m.title} description={m.description}>
|
||||
<div class="mx-auto max-w-[--content-max] px-6 pt-14">
|
||||
<SectionLabel text={d.home.experienceLabel} />
|
||||
<h1 class="mt-4 text-h1">{d.home.experienceHeading}</h1>
|
||||
<p class="mt-4 max-w-[62ch] text-body-lg text-ink-muted">{m.description}</p>
|
||||
<h1 class="text-h1 mt-4">{d.home.experienceHeading}</h1>
|
||||
<p class="text-body-lg text-ink-muted mt-4 max-w-[62ch]">{m.description}</p>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<ExperienceTimeline locale={locale} eyebrow={false} />
|
||||
|
||||
@@ -17,8 +17,8 @@ const m = getMeta('projects', locale);
|
||||
<Base locale={locale} pageId="projects" title={m.title} description={m.description}>
|
||||
<div class="mx-auto max-w-[--content-max] px-6 pt-14">
|
||||
<SectionLabel text={d.home.projectsLabel} />
|
||||
<h1 class="mt-4 text-h1">{d.home.projectsHeading}</h1>
|
||||
<p class="mt-4 max-w-[62ch] text-body-lg text-ink-muted">{m.description}</p>
|
||||
<h1 class="text-h1 mt-4">{d.home.projectsHeading}</h1>
|
||||
<p class="text-body-lg text-ink-muted mt-4 max-w-[62ch]">{m.description}</p>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<ProjectCards locale={locale} header={false} />
|
||||
|
||||
Reference in New Issue
Block a user