feat: rebuild mintel.me as a single-page freelance site

The site now presents one freelance developer on one page: hero, introduction,
four typical cases (developer for a product, make an app reliable, automate a
process, a website) with what you get, how it runs and what it costs, a
process automation section, technology and project fit, how I work, two live
references, questions and contact.

- Hero and closing headline are drawn from running binary digits.
- Each case explains its four steps with an animated drawing; the automation
  section shows example workflows with work travelling between systems; a
  pipeline run shows what a test catches before a release.
- Contact is one email address, kept in parts and assembled in the browser so
  it never appears in the page source (src/domain/email.ts, spec first).
- Imprint and privacy pages added.
- The old site (blog, case studies, contact form, fixed-price pages, video
  rendering and related scripts) is removed. Its URLs redirect to the homepage.
- The deploy smoke test checks the legal pages and the redirects instead of
  the removed case study.
- Dev scripts use docker compose v2.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/components/home/PortraitSection.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+/**
+ * PortraitSection: the introduction, with the portrait fading out of a dark surface
+ * and the text set over it.
+ */
+export const PortraitSection: React.FC<{
+  id?: string;
+  index: string;
+  label: string;
+  title: React.ReactNode;
+  children: React.ReactNode;
+}> = ({ id, index, label, title, children }) => (
+  <section
+    id={id}
+    className="relative scroll-mt-24 overflow-hidden bg-slate-900 text-white"
+  >
+    {/* Portrait: right side on wide screens, top on small ones. */}
+    <motion.div
+      className="relative h-[110vw] w-full md:absolute md:inset-y-0 md:right-0 md:h-auto md:w-[62%]"
+      initial={{ opacity: 0, scale: 1.06 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true, margin: "-10%" }}
+      transition={{ duration: 1.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <Image
+        src="/marc-mintel.png"
+        alt="Portrait of Marc Mintel"
+        fill
+        sizes="(min-width: 768px) 62vw, 100vw"
+        className="object-cover object-[50%_18%] grayscale"
+        priority={false}
+      />
+      {/* Fades: into the surface on the left, and at top and bottom. */}
+      <div className="absolute inset-0 hidden bg-gradient-to-r from-slate-900 via-slate-900/75 to-slate-900/10 md:block" />
+      <div className="absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-slate-900 to-transparent" />
+      <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-slate-900 to-transparent" />
+    </motion.div>
+
+    <div className="relative z-10 mx-auto w-full max-w-[1400px] px-5 pb-20 md:px-12 md:py-40">
+      <motion.div
+        className="-mt-24 max-w-3xl md:mt-0"
+        initial={{ opacity: 0, y: 24 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-10%" }}
+        transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
+      >
+        <div className="mb-8 flex items-center gap-4 md:mb-12">
+          <span className="font-mono text-[11px] font-bold tracking-[0.2em] text-white">
+            {index}
+          </span>
+          <span className="h-px w-10 bg-slate-600" />
+          <span className="font-mono text-[11px] uppercase tracking-[0.25em] text-slate-400">
+            {label}
+          </span>
+        </div>
+        <h2 className="m-0 text-5xl font-bold leading-[0.95] tracking-tighter text-white md:text-7xl lg:text-[6.5rem]">
+          {title}
+        </h2>
+        <div className="mt-10 md:mt-14">{children}</div>
+      </motion.div>
+    </div>
+  </section>
+);