diff --git a/CLAUDE.md b/CLAUDE.md
index 3852442..5b2a7f7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -25,22 +25,37 @@ App lives in `apps/web`. Concept and scope: `apps/web/plans/freelance-relaunch.m
- Never mention AI as the owner's tool, and no internal method vocabulary (specs, TDD, mutation, coverage,
pull requests). The automation service may name AI as part of what the client gets. Plain language.
- Modest and factual: no promises the owner did not confirm, no superlatives. See the concept, section 1.
-- One page: everything lives on the homepage. The header has only "Get in touch", which jumps to the contact
- section (`#contact`). Contact is one email address: no calendar integration, no form. The only other
- pages are `/imprint` and `/privacy`. URLs of the previous site redirect to `/` (see `next.config.mjs`).
-- Title, description and link previews come from `SITE_TITLE` and `SITE_DESCRIPTION` in `src/content/site.ts`.
- The share image is a screenshot of the real hero: after changing the hero headline or its design, run
- `pnpm --filter @mintel/web share-image` and commit the two PNGs in `app/(site)/`.
+- One page: everything lives on the homepage. The header has the language switch and "Get in touch", which
+ jumps to the contact section (`#contact`). Contact is one email address: no calendar integration, no form.
+ The only other pages are the imprint and the privacy notice. URLs of the previous site redirect to `/`
+ (see `next.config.mjs`).
+- Title, description and link previews come from `site` in `src/content/de.ts` and `en.ts`.
+ The share image is a screenshot of the real hero, one per language: after changing the hero headline or
+ its design, run `pnpm --filter @mintel/web share-image` and commit the PNGs in `src/assets/share/`.
- The email address is kept in parts (`src/content/site.ts`) and assembled in the browser by `EmailLink`.
Never write the full address into markup, metadata or copy.
- The hero design (binary-digit headline) is approved: do not change its design.
- Look at the result before reporting: take screenshots (desktop and mobile), do not ship blind.
+## Two languages (German is the main one)
+
+- German lives at the root (`/`, `/impressum`, `/datenschutz`), English under `/en` (`/en/imprint`,
+ `/en/privacy`). The app directory renders both under `app/[locale]`; `proxy.ts` maps the public addresses
+ onto it. All routing and detection rules are pure functions in `src/domain/routes.ts` and `locale.ts`.
+- Detection: an address without a language follows the `lang` cookie (set only by the language switch), then
+ the browser's `Accept-Language`, then German. `/en/...` is never redirected.
+- Every visible text is data in `src/content/de.ts` and `en.ts` (type `Content` in `types.ts`). Components
+ hold no texts: server components take them from `contentFor(locale)`, client components from
+ `useContent()`. A new text goes into both files; German uses the formal "Sie".
+- Never name a file `src/i18n.ts` or `i18n/request.ts`: `@mintel/next-config` would switch on next-intl.
+- The privacy notice describes the language cookie; keep it true when the detection changes.
+
## Motion (binary micro-interactions)
- Building blocks live in `apps/web/src/components/bits/`: `DecodeText` (mono labels resolving from digits),
`BitWipe` (headline revealed behind a column of digits), `BitReveal` (picture assembling from bits),
- `BinaryTicker`, `ScrollBits`, `BitBurst`. Reuse them instead of inventing new effects.
+ `BinaryTicker`, `ScrollBits`, `BitBurst`, `BitCurtain` (the language switch transition). Reuse them
+ instead of inventing new effects.
- `DecodeText` is for monospaced text only; in proportional type the changing glyph widths make text jump.
- Never put an in-view trigger on an element that clips itself away (clip-path): a fully clipped element
never counts as visible. Observe an unclipped wrapper (see `BitWipe`).
diff --git a/apps/web/app/(site)/imprint/page.tsx b/apps/web/app/(site)/imprint/page.tsx
deleted file mode 100644
index d7cd2c1..0000000
--- a/apps/web/app/(site)/imprint/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Metadata } from "next";
-import { EmailLink } from "@/src/components/EmailLink";
-import { LegalPage, LegalSection } from "@/src/components/LegalPage";
-import { OWNER } from "@/src/content/site";
-
-export const metadata: Metadata = {
- title: "Imprint",
- description: "Legal notice (Impressum) for mintel.me.",
- alternates: { canonical: "/imprint" },
- robots: { index: false, follow: true },
-};
-
-const LINK = "font-bold text-slate-900 underline-offset-4 hover:underline";
-
-export default function ImprintPage() {
- return (
-
-
-
- This website sets no cookies, shows no advertising and includes no
- content from third parties. Fonts and images are served from this
- website itself.
-
-
-
-
-
- When you open a page, the server processes technical data that your
- browser sends: your IP address, the time, the page requested and the
- browser type. This is necessary to deliver the website and to keep it
- secure. The legal basis is my legitimate interest in running the
- website (Article 6(1)(f) GDPR).
-
-
-
-
-
- I count page views with Umami, which I run on my own server. It works
- without cookies and does not create profiles of individual visitors.
- The data is not passed on to third parties. The legal basis is my
- legitimate interest in understanding how the website is used (Article
- 6(1)(f) GDPR).
-
-
-
-
-
- If something on this website fails technically, an error report is
- sent to an error tracking service that I run on my own server. It
- contains technical details such as the page, the browser and the error
- message. Sessions are not recorded. The legal basis is my legitimate
- interest in a working website (Article 6(1)(f) GDPR).
-
-
-
-
-
- If loading a page fails, the website stores a timestamp in your
- browser's session storage so that it reloads only once. It is
- deleted when you close the tab and is not sent anywhere.
-
-
-
-
-
- If you send me an email, I process what you write and your address in
- order to answer you and, if it comes to that, to prepare a contract
- (Article 6(1)(b) GDPR). I keep the correspondence for as long as it is
- needed for that purpose or as the law requires.
-
-
-
-
-
You have the right to:
-
-
ask what data I hold about you
-
have incorrect data corrected
-
have your data deleted or its processing restricted
-
object to processing that is based on legitimate interest
-
receive your data in a portable format
-
complain to a data protection supervisory authority
-
-
- To use any of these rights, write to .
-
-
-
- );
-}
diff --git a/apps/web/app/(site)/sitemap.ts b/apps/web/app/(site)/sitemap.ts
deleted file mode 100644
index a7f000a..0000000
--- a/apps/web/app/(site)/sitemap.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { MetadataRoute } from "next";
-
-/** The site is a single page. */
-export default function sitemap(): MetadataRoute.Sitemap {
- const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://mintel.me";
- return [
- {
- url: baseUrl,
- lastModified: new Date(),
- changeFrequency: "monthly",
- priority: 1,
- },
- ];
-}
diff --git a/apps/web/app/(site)/twitter-image.alt.txt b/apps/web/app/(site)/twitter-image.alt.txt
deleted file mode 100644
index 56535b5..0000000
--- a/apps/web/app/(site)/twitter-image.alt.txt
+++ /dev/null
@@ -1 +0,0 @@
-Web apps and websites. Marc Mintel, freelance developer with 15 years of experience.
\ No newline at end of file
diff --git a/apps/web/app/(site)/twitter-image.png b/apps/web/app/(site)/twitter-image.png
deleted file mode 100644
index 341a658..0000000
Binary files a/apps/web/app/(site)/twitter-image.png and /dev/null differ
diff --git a/apps/web/app/[locale]/[...rest]/page.tsx b/apps/web/app/[locale]/[...rest]/page.tsx
new file mode 100644
index 0000000..d9d4402
--- /dev/null
+++ b/apps/web/app/[locale]/[...rest]/page.tsx
@@ -0,0 +1,6 @@
+import { notFound } from "next/navigation";
+
+/** Any address that is not a page ends in the error page of its language. */
+export default function UnknownPage() {
+ notFound();
+}
diff --git a/apps/web/app/(site)/error.tsx b/apps/web/app/[locale]/error.tsx
similarity index 88%
rename from apps/web/app/(site)/error.tsx
rename to apps/web/app/[locale]/error.tsx
index aa2b209..b4cecce 100644
--- a/apps/web/app/(site)/error.tsx
+++ b/apps/web/app/[locale]/error.tsx
@@ -3,6 +3,8 @@
import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";
import { Button } from "@/src/components/Button";
+import { useContent, useLocale } from "@/src/components/ContentProvider";
+import { pathFor } from "@/src/domain/routes";
export default function Error({
error,
@@ -11,6 +13,9 @@ export default function Error({
error: Error & { digest?: string };
reset: () => void;
}) {
+ const { error: copy } = useContent();
+ const home = pathFor("home", useLocale());
+
useEffect(() => {
// Log the error to Sentry/GlitchTip
Sentry.captureException(error);
@@ -37,22 +42,21 @@ export default function Error({
- Error 500
+ {copy.kicker}
- Kritischer Fehler.
+ {copy.title}
- Ein unerwartetes Problem ist aufgetreten. Unsere Systeme haben den
- Vorfall protokolliert.
+ {copy.text}
-
diff --git a/apps/web/app/[locale]/imprint/page.tsx b/apps/web/app/[locale]/imprint/page.tsx
new file mode 100644
index 0000000..e9ce2bc
--- /dev/null
+++ b/apps/web/app/[locale]/imprint/page.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { LegalPage } from "@/src/components/LegalPage";
+import { IMPRINT } from "@/src/content/legal/imprint";
+import { DEFAULT_LOCALE, parseLocale } from "@/src/domain/locale";
+import { languageAlternates, pathFor } from "@/src/domain/routes";
+
+type Props = { readonly params: Promise<{ readonly locale: string }> };
+
+export async function generateMetadata({ params }: Props): Promise {
+ const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
+ const { title, description } = IMPRINT[locale];
+ return {
+ title,
+ description,
+ alternates: {
+ canonical: pathFor("imprint", locale),
+ languages: languageAlternates("imprint"),
+ },
+ robots: { index: false, follow: true },
+ };
+}
+
+export default async function Page({ params }: Props) {
+ const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
+ const { title, Body } = IMPRINT[locale];
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
new file mode 100644
index 0000000..76f271b
--- /dev/null
+++ b/apps/web/app/[locale]/layout.tsx
@@ -0,0 +1,136 @@
+import type { Metadata, Viewport } from "next";
+import type { StaticImageData } from "next/image";
+import { Inter, JetBrains_Mono, Newsreader } from "next/font/google";
+import { BitBurst } from "@/src/components/bits/BitBurst";
+import { BitGlow } from "@/src/components/bits/BitGlow";
+import { Footer } from "@/src/components/Footer";
+import { Header } from "@/src/components/Header";
+import { InteractiveElements } from "@/src/components/InteractiveElements";
+import { ContentProvider } from "@/src/components/ContentProvider";
+import { BitCurtain } from "@/src/components/bits/BitCurtain";
+import shareImageDe from "@/src/assets/share/share-de.png";
+import shareImageEn from "@/src/assets/share/share-en.png";
+import { contentFor } from "@/src/content";
+import { INDEXING, SITE_NAME, SITE_URL } from "@/src/content/site";
+import { robotsMeta } from "@/src/domain/indexing";
+import {
+ DEFAULT_LOCALE,
+ LOCALES,
+ parseLocale,
+ type Locale,
+} from "@/src/domain/locale";
+import { pathFor } from "@/src/domain/routes";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+// A real monospaced fallback has almost the same letter width. The default
+// fallback (a resized Arial) wraps the mono labels differently, so the hero
+// jumped when the font arrived.
+const jetbrainsMono = JetBrains_Mono({
+ subsets: ["latin"],
+ variable: "--font-jetbrains-mono",
+ display: "swap",
+ adjustFontFallback: false,
+ fallback: ["ui-monospace", "Menlo", "Consolas", "monospace"],
+});
+const newsreader = Newsreader({
+ subsets: ["latin"],
+ variable: "--font-newsreader",
+ style: "italic",
+ display: "swap",
+});
+
+type Props = {
+ readonly children: React.ReactNode;
+ readonly params: Promise<{ readonly locale: string }>;
+};
+
+/** The share image is a screenshot of the hero in that language (see scripts/render-share-image.mjs). */
+const SHARE_IMAGE: Readonly> = {
+ en: shareImageEn,
+ de: shareImageDe,
+};
+
+export function generateStaticParams() {
+ return LOCALES.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({ params }: Props): Promise {
+ const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
+ const { site } = contentFor(locale);
+ const image = SHARE_IMAGE[locale];
+ const images = [
+ {
+ url: image.src,
+ width: image.width,
+ height: image.height,
+ alt: site.shareImageAlt,
+ },
+ ];
+
+ return {
+ metadataBase: new URL(SITE_URL),
+ title: {
+ default: site.title,
+ template: `%s | ${SITE_NAME}`,
+ },
+ description: site.description,
+ applicationName: SITE_NAME,
+ authors: [{ name: SITE_NAME, url: SITE_URL }],
+ creator: SITE_NAME,
+ robots: robotsMeta(INDEXING),
+ icons: {
+ icon: "/favicon.svg",
+ apple: "/apple-touch-icon.png",
+ },
+ openGraph: {
+ type: "website",
+ url: pathFor("home", locale),
+ siteName: SITE_NAME,
+ locale: site.ogLocale,
+ alternateLocale: LOCALES.filter((other) => other !== locale).map(
+ (other) => contentFor(other).site.ogLocale,
+ ),
+ title: site.title,
+ description: site.description,
+ images,
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: site.title,
+ description: site.description,
+ images,
+ },
+ };
+}
+
+export const viewport: Viewport = {
+ themeColor: "#ffffff",
+ colorScheme: "light",
+ viewportFit: "cover",
+};
+
+export default async function RootLayout({ children, params }: Props) {
+ // The proxy only lets the two languages through; anything else is a file-like
+ // address that ends in the error page of the main language.
+ const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/web/app/(site)/not-found.tsx b/apps/web/app/[locale]/not-found.tsx
similarity index 74%
rename from apps/web/app/(site)/not-found.tsx
rename to apps/web/app/[locale]/not-found.tsx
index 34fa5f6..8615df6 100644
--- a/apps/web/app/(site)/not-found.tsx
+++ b/apps/web/app/[locale]/not-found.tsx
@@ -1,32 +1,28 @@
-export const metadata = {
- title: "404 - Seite nicht gefunden | Marc Mintel",
- description: "Diese Seite konnte leider nicht gefunden werden.",
-};
+"use client";
-import Link from "next/link";
import { Button } from "@/src/components/Button";
+import { useContent, useLocale } from "@/src/components/ContentProvider";
+import { pathFor } from "@/src/domain/routes";
export default function NotFound() {
+ const { notFound } = useContent();
+ const home = pathFor("home", useLocale());
return (
- Error 404
+ {notFound.kicker}
- System-Anomalie.
+ {notFound.title}
- Die angeforderte URL existiert nicht in dieser Zeitleiste.
- Möglicherweise wurde die Seite verschoben oder gelöscht.
+ {notFound.text}
-
-
diff --git a/apps/web/app/(site)/page.tsx b/apps/web/app/[locale]/page.tsx
similarity index 50%
rename from apps/web/app/(site)/page.tsx
rename to apps/web/app/[locale]/page.tsx
index dc61634..ee60d58 100644
--- a/apps/web/app/(site)/page.tsx
+++ b/apps/web/app/[locale]/page.tsx
@@ -1,4 +1,5 @@
import type { Metadata } from "next";
+import { BitAura } from "@/src/components/bits/BitAura";
import { DecodeText } from "@/src/components/bits/DecodeText";
import { Block } from "@/src/components/home/Block";
import { ClosingCta } from "@/src/components/home/ClosingCta";
@@ -12,118 +13,86 @@ import { AutomationFlow } from "@/src/components/illustrations/AutomationFlow";
import { CareerLine } from "@/src/components/illustrations/CareerLine";
import { ContactDiagram } from "@/src/components/illustrations/ContactDiagram";
import { PipelineRun } from "@/src/components/illustrations/PipelineRun";
-import {
- WorkShowcase,
- type WorkItem,
-} from "@/src/components/illustrations/WorkShowcase";
+import { WorkShowcase } from "@/src/components/illustrations/WorkShowcase";
import { Reveal } from "@/src/components/Reveal";
-import { CAREER, FIT, TECH } from "@/src/content/about";
-import { SITE_DESCRIPTION, SITE_TITLE } from "@/src/content/site";
-import { AUTOMATION_NOTES } from "@/src/content/automation";
+import { contentFor } from "@/src/content";
+import type { SplitTitle } from "@/src/content/types";
+import { DEFAULT_LOCALE, parseLocale } from "@/src/domain/locale";
+import { languageAlternates, pathFor } from "@/src/domain/routes";
-export const metadata: Metadata = {
- title: { absolute: SITE_TITLE },
- description: SITE_DESCRIPTION,
- alternates: { canonical: "/" },
-};
+type Props = { readonly params: Promise<{ readonly locale: string }> };
+
+export async function generateMetadata({ params }: Props): Promise {
+ const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
+ const { site } = contentFor(locale);
+ return {
+ title: { absolute: site.title },
+ description: site.description,
+ alternates: {
+ canonical: pathFor("home", locale),
+ languages: languageAlternates("home"),
+ },
+ };
+}
const MUTED = "text-slate-400";
const BODY = "m-0 font-sans text-lg leading-relaxed text-slate-500 md:text-xl";
const MONO = "font-mono text-[11px] uppercase tracking-[0.2em] text-slate-500";
-const PRINCIPLES = [
- {
- title: "One contact",
- text: "You talk to me, and I am the one who does the work.",
- },
- {
- title: "Hours you can check",
- text: "I track my time. The monthly invoice shows what the hours were spent on.",
- },
- {
- title: "Careful work",
- text: "I test what I build before I hand it over, and I say so when something is not finished or I am not sure.",
- },
- {
- title: "What I build is yours",
- text: "Code and design belong to you. You can hand them to another developer.",
- },
-] as const;
+const Title: React.FC<{ title: SplitTitle; muted?: string }> = ({
+ title,
+ muted = MUTED,
+}) => (
+ <>
+ {title.lead} {title.rest}
+
+);
-const WORK: readonly WorkItem[] = [
- {
- name: "klz-cables.com",
- href: "https://klz-cables.com",
- client: "Cable supplier",
- text: "The company website of a supplier of energy cables, in German and English.",
- did: [
- "Product catalogue with categories and detail pages",
- "Datasheets generated from the product data",
- "Content the client can edit in a CMS",
- ],
- tech: ["Next.js", "TypeScript", "Headless CMS", "Two languages"],
- desktop: { src: "/work/klz-long.webp", width: 1200, height: 1680 },
- mobile: { src: "/work/klz-mobile.webp", width: 390, height: 3600 },
- },
- {
- name: "e-tib.com",
- href: "https://e-tib.com",
- client: "Cable network construction",
- text: "The company website of a group in cable network construction, in German and English.",
- did: [
- "Pages for services, references, careers and events",
- "The same content in two languages",
- "Works on phone, tablet and desktop",
- ],
- tech: ["Next.js", "TypeScript", "Headless CMS", "Two languages"],
- desktop: { src: "/work/etib-long.webp", width: 1200, height: 4333 },
- mobile: { src: "/work/etib-mobile.webp", width: 390, height: 3600 },
- },
-];
+export default async function LandingPage({ params }: Props) {
+ const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
+ const content = contentFor(locale);
+ const { hello, services, automation, technology, working, work, faq } =
+ content;
-export default function LandingPage() {
return (
-
-
+
+ I am Marc.}
+ label={hello.label}
+ title={hello.title}
+ portraitAlt={hello.portraitAlt}
>
- I have been building for the web for 15 years: first in agencies,
- later as a senior developer, and now on my own.
-
-
- My strength is the part people see and use: design and interface. I am
- also at home with what lies behind it, so I can build a complete
- application and not just its surface.
-
-
- You work with me directly. Whether you run a product team or are
- commissioning something like this for the first time.
+ {hello.lead}
+ {hello.paragraphs.map((paragraph, i) => (
+
+ {paragraph}
+
+ ))}
-
-
-
The path so far
-
+
+
+
+ {hello.careerLabel}
+
+
- What do you need? Four typical cases.
-
- }
+ label={services.label}
+ title={}
>
@@ -132,26 +101,17 @@ export default function LandingPage() {
- Let the systems do the copying.
-
- }
+ label={automation.label}
+ title={}
>
-
- In most companies, people move information from one tool to another:
- read it here, type it in there, send an email about it. Automation
- connects those tools so that the work passes from one to the next on
- its own. Three typical examples:
-
{group.area}
@@ -232,13 +188,10 @@ export default function LandingPage() {
- What happens before a change goes live.
+ {technology.pipelineTitle}
- Software is connected: a change in one place can break another. I
- secure what I build with automated tests, and every change has to
- pass them before it is released. This is what such a run looks
- like.
+ {technology.pipelineIntro}
@@ -249,20 +202,18 @@ export default function LandingPage() {
- How I work. Nothing unusual.
-
- }
+ label={working.label}
+ title={}
>
-
diff --git a/apps/web/src/components/home/Faq.tsx b/apps/web/src/components/home/Faq.tsx
index 28abaf0..f23082a 100644
--- a/apps/web/src/components/home/Faq.tsx
+++ b/apps/web/src/components/home/Faq.tsx
@@ -1,41 +1,15 @@
import * as React from "react";
+import type { FaqItem } from "@/src/content/types";
-const QUESTIONS = [
- {
- q: "I am not technical. Is that a problem?",
- a: "No. I explain what I am doing in plain language, and you can ask at any time. You do not need to read code.",
- },
- {
- q: "How long am I committed?",
- a: "Project work is billed by effort. Either side can end it with two weeks notice to the end of a month.",
- },
- {
- q: "Who owns what you build?",
- a: "You do. Code and design belong to you, and you can hand them to another developer.",
- },
- {
- q: "Can you work with our existing team and code?",
- a: "Yes. I worked in agencies and product teams for years, so joining an existing project is familiar to me.",
- },
- {
- q: "How do I reach you?",
- a: "By email or video call. I work remotely and am available during European business hours.",
- },
- {
- q: "What do you not do?",
- a: "Mobile apps for the app stores, Windows software and running your servers. If your project needs those, I say so in the first call.",
- },
-] as const;
-
-export const Faq: React.FC = () => (
+export const Faq: React.FC<{ items: readonly FaqItem[] }> = ({ items }) => (