feat: share image, metadata and icons that match the new site

The link preview used an old template with a blog description. The share
image is now a screenshot of the real hero (scripts/render-share-image.mjs),
served as Open Graph and Twitter image. Title and description come from one
place and are used by the page, the previews and the structured data. Adds an
apple touch icon and removes the old share-image template and its fonts.

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

apps/web/app/(site)/layout.tsx

@@ -4,6 +4,12 @@ import { Analytics } from "@/src/components/Analytics";
 import { Footer } from "@/src/components/Footer";
 import { Header } from "@/src/components/Header";
 import { InteractiveElements } from "@/src/components/InteractiveElements";
+import {
+  SITE_DESCRIPTION,
+  SITE_NAME,
+  SITE_TITLE,
+  SITE_URL,
+} from "@/src/content/site";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
@@ -20,15 +26,32 @@ const newsreader = Newsreader({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
   title: {
-    default: "Marc Mintel — Senior developer for web apps and websites",
-    template: "%s | Marc Mintel",
+    default: SITE_TITLE,
+    template: `%s | ${SITE_NAME}`,
   },
-  description:
-    "Senior developer for web apps, interfaces and websites. Book weekly hours for your product, get an unreliable app back on track, or have a website built for you.",
-  metadataBase: new URL("https://mintel.me"),
+  description: SITE_DESCRIPTION,
+  applicationName: SITE_NAME,
+  authors: [{ name: SITE_NAME, url: SITE_URL }],
+  creator: SITE_NAME,
   icons: {
     icon: "/favicon.svg",
+    apple: "/apple-touch-icon.png",
+  },
+  // The images come from opengraph-image.png and twitter-image.png next to this file.
+  openGraph: {
+    type: "website",
+    url: "/",
+    siteName: SITE_NAME,
+    locale: "en_US",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
   },
 };
 

apps/web/app/(site)/opengraph-image.alt.txt

@@ -0,0 +1 @@
+Web apps and websites. Marc Mintel, freelance developer with 15 years of experience.

apps/web/app/(site)/opengraph-image.tsx

@@ -1,23 +0,0 @@
-import { ImageResponse } from "next/og";
-import { OGImageTemplate } from "../../src/components/OGImageTemplate";
-import { getOgFonts, OG_IMAGE_SIZE } from "../../src/lib/og-helper";
-
-export const size = OG_IMAGE_SIZE;
-export const contentType = "image/png";
-export const runtime = "nodejs";
-
-export default async function Image() {
-  const fonts = await getOgFonts();
-
-  return new ImageResponse(
-    <OGImageTemplate
-      title="Marc Mintel"
-      description="Freelance developer. I build web apps, interfaces and websites."
-      label="Web apps and websites"
-    />,
-    {
-      ...OG_IMAGE_SIZE,
-      fonts: fonts as any,
-    },
-  );
-}

apps/web/app/(site)/page.tsx

@@ -17,12 +17,12 @@ import {
 } 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";
 
 export const metadata: Metadata = {
-  title: "Marc Mintel — Senior developer for web apps and websites",
-  description:
-    "Freelance developer with 15 years of experience. I build web apps, interfaces and websites: by the hour for product teams, or a complete website for your business.",
+  title: { absolute: SITE_TITLE },
+  description: SITE_DESCRIPTION,
   alternates: { canonical: "/" },
 };
 

apps/web/app/(site)/twitter-image.alt.txt

@@ -0,0 +1 @@
+Web apps and websites. Marc Mintel, freelance developer with 15 years of experience.