feat: case-study template, all pages, routing, sitemap, 404
- case-study components: CsHeader, TldrBox, MiniToc, SectionRenderer, DecisionList, ArchDiagram (data-driven), Gallery, NextPrev, CaseStudyPage - standalone pages: projects index, about, experience, contact (with form), cv hub, colophon — all EN/NO compositions - full route tree: EN root + /no localised slugs (prosjekter, om-meg, erfaring, kontakt, kolofon, hjemmelab) per ROUTING_SPEC - bilingual 404 with trace-fray motif; robots.txt + sitemap.xml from slug map - Portrait atom; reusable sections gain header/eyebrow toggles for standalone pages Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
cesnimda
@@ -0,0 +1,48 @@
|
||||
---
|
||||
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="mt-4 text-h1">{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>)}
|
||||
</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>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
/*
|
||||
Colophon — "how this site works" (CONTENT_STRATEGY §4). A deliberate P2 hook: it
|
||||
states the production decisions behind the site honestly. Copy authored per locale.
|
||||
*/
|
||||
import type { Locale } from '@i18n/locales';
|
||||
import { useDict } from '@i18n/t';
|
||||
import Base from '@layouts/Base.astro';
|
||||
import { getMeta } from '@lib/content';
|
||||
import SectionLabel from '@components/ui/SectionLabel.astro';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
const { locale } = Astro.props;
|
||||
const d = useDict(locale);
|
||||
const m = getMeta('colophon', locale);
|
||||
|
||||
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.'],
|
||||
],
|
||||
},
|
||||
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.'],
|
||||
],
|
||||
},
|
||||
}[locale];
|
||||
---
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
))
|
||||
}
|
||||
</dl>
|
||||
</div>
|
||||
</Base>
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
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';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
const { locale } = Astro.props;
|
||||
const d = useDict(locale);
|
||||
const profile = getProfile(locale);
|
||||
const m = getMeta('contact', locale);
|
||||
|
||||
const fieldClass =
|
||||
'w-full rounded-sm border border-line-strong bg-surface-1 px-3 py-2.5 text-body text-ink transition-colors focus:border-accent focus:outline-none aria-[invalid=true]:border-danger';
|
||||
---
|
||||
|
||||
<Base locale={locale} pageId="contact" title={m.title} description={m.description}>
|
||||
<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>
|
||||
|
||||
<form
|
||||
id="contact-form"
|
||||
class="mt-8 flex flex-col gap-5"
|
||||
data-msg-required={d.form.required}
|
||||
data-msg-email={d.form.invalidEmail}
|
||||
novalidate
|
||||
>
|
||||
<div>
|
||||
<label for="cf-name" class="mb-1.5 block text-small font-medium text-ink">{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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="cf-email" class="mb-1.5 block text-small font-medium text-ink">{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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="cf-message" class="mb-1.5 block text-small font-medium text-ink">{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>
|
||||
</div>
|
||||
|
||||
{/* Honeypot — hidden from users and assistive tech */}
|
||||
<div class="sr-only" aria-hidden="true">
|
||||
<label for="cf-company">Company</label>
|
||||
<input id="cf-company" name="company" type="text" tabindex="-1" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
</svg>
|
||||
{d.form.successTitle}
|
||||
</p>
|
||||
<p class="mt-2 text-body text-ink-muted">{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">
|
||||
{d.form.errorBody}
|
||||
<a class="text-accent hover:underline" href={`mailto:${profile.links.email}`}>{profile.links.email}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="lg:col-span-5">
|
||||
<p class="mono-label mb-3">{d.form.orEmail}</p>
|
||||
<ul class="flex flex-col gap-4">
|
||||
<li>
|
||||
<a
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import '@scripts/form';
|
||||
</script>
|
||||
</Base>
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
import type { Locale } from '@i18n/locales';
|
||||
import { useDict, interpolate } from '@i18n/t';
|
||||
import Base from '@layouts/Base.astro';
|
||||
import { getProfile, getMeta } from '@lib/content';
|
||||
import SectionLabel from '@components/ui/SectionLabel.astro';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
const { locale } = Astro.props;
|
||||
const d = useDict(locale);
|
||||
const profile = getProfile(locale);
|
||||
const m = getMeta('cv', locale);
|
||||
|
||||
const cards = [
|
||||
{ code: 'EN', label: d.cv.english, cv: profile.cv.en },
|
||||
{ code: 'NO', label: d.cv.norsk, cv: profile.cv.no },
|
||||
];
|
||||
---
|
||||
|
||||
<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>
|
||||
|
||||
<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="flex items-center gap-3">
|
||||
<span class="rounded-sm bg-surface-2 px-2 py-1 font-mono text-mono-label text-accent">
|
||||
{c.code}
|
||||
</span>
|
||||
<span class="text-body font-semibold text-ink">{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>
|
||||
<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"
|
||||
>
|
||||
{d.cv.download}
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<p class="mt-6 font-mono text-mono-meta text-ink-faint">{d.cvPage.atsNote}</p>
|
||||
</div>
|
||||
</Base>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import type { Locale } from '@i18n/locales';
|
||||
import { useDict } from '@i18n/t';
|
||||
import Base from '@layouts/Base.astro';
|
||||
import { getMeta } from '@lib/content';
|
||||
import SectionLabel from '@components/ui/SectionLabel.astro';
|
||||
import ExperienceTimeline from '@components/home/ExperienceTimeline.astro';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
const { locale } = Astro.props;
|
||||
const d = useDict(locale);
|
||||
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>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<ExperienceTimeline locale={locale} eyebrow={false} />
|
||||
</div>
|
||||
</Base>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import type { Locale } from '@i18n/locales';
|
||||
import { useDict } from '@i18n/t';
|
||||
import Base from '@layouts/Base.astro';
|
||||
import { getMeta } from '@lib/content';
|
||||
import SectionLabel from '@components/ui/SectionLabel.astro';
|
||||
import ProjectCards from '@components/home/ProjectCards.astro';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
const { locale } = Astro.props;
|
||||
const d = useDict(locale);
|
||||
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>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<ProjectCards locale={locale} header={false} />
|
||||
</div>
|
||||
</Base>
|
||||
Reference in New Issue
Block a user