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>
2026-07-04 01:30:32 +02:00
parent 9a6d0edf6d
commit 2330f374fc
44 changed files with 1112 additions and 31 deletions
@@ -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>