feat: rewrite /about and /book with tested booking URL parsing
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5.5
@@ -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="Über mich."
|
||||
description="15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen halten."
|
||||
label="Marc Mintel"
|
||||
/>,
|
||||
{
|
||||
...OG_IMAGE_SIZE,
|
||||
fonts: fonts as any,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -1,230 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { Reveal } from "@/src/components/Reveal";
|
||||
import { Section } from "@/src/components/Section";
|
||||
import { Signature } from "@/src/components/Signature";
|
||||
import type { Metadata } from "next";
|
||||
import { Container, SectionHeader } from "@/src/components/site";
|
||||
import { Timeline } from "@/src/components/about/Timeline";
|
||||
import { TagList } from "@/src/components/about/TagList";
|
||||
import {
|
||||
H1,
|
||||
H3,
|
||||
LeadText,
|
||||
BodyText,
|
||||
Label,
|
||||
MonoLabel,
|
||||
} from "@/src/components/Typography";
|
||||
import { Button } from "@/src/components/Button";
|
||||
import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
|
||||
import { GlitchText } from "@/src/components/GlitchText";
|
||||
NOT_MY_THING,
|
||||
STACK_ITEMS,
|
||||
TIMELINE,
|
||||
WORKING_MODE,
|
||||
} from "@/src/components/about/aboutData";
|
||||
|
||||
export default function AboutPage() {
|
||||
export const metadata: Metadata = {
|
||||
title: "About",
|
||||
description:
|
||||
"Senior engineer who makes AI-built software dependable. Web since 2011, remote since 2021, now independent.",
|
||||
alternates: { canonical: "/about" },
|
||||
};
|
||||
|
||||
// TODO(owner): link a CV download here once the PDF exists (no file yet).
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||||
<AbstractCircuit />
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
||||
<div className="flex flex-col items-center text-center space-y-12">
|
||||
<Reveal width="fit-content">
|
||||
<div className="w-40 h-40 md:w-56 md:h-56 rounded-full overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
||||
<img
|
||||
src="/marc-mintel.png"
|
||||
alt="Marc Mintel"
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Container className="py-16 md:py-24">
|
||||
<SectionHeader
|
||||
as="h1"
|
||||
kicker="/about"
|
||||
title="About"
|
||||
lead="Senior engineer who makes AI-built software dependable."
|
||||
/>
|
||||
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<Reveal delay={0.1}>
|
||||
<MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
|
||||
WEBENTWICKLER
|
||||
</MonoLabel>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<H1 className="text-6xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Über <span className="text-slate-400">mich.</span>
|
||||
</H1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-500 max-w-2xl mx-auto text-xl md:text-3xl leading-snug">
|
||||
15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
|
||||
ersparen.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 max-w-2xl space-y-4 text-base leading-relaxed text-muted">
|
||||
<p>
|
||||
I have worked on the web since 2011, starting with an apprenticeship.
|
||||
Since then I have worked in agencies and product companies, and led
|
||||
the frontend team at an agency. I have been fully remote since 2021
|
||||
and am now independent, while running a small product business.
|
||||
</p>
|
||||
<p>
|
||||
Design and frontend are my strength. I am comfortable with backend
|
||||
concepts and architecture. Today I mostly write TypeScript and
|
||||
Next.js, plus Rust and Solidity for systems work. The path started
|
||||
with Vue and plain JavaScript, and I would rather say so than pretend
|
||||
I always wrote Rust.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="mt-16 max-w-2xl" aria-labelledby="how-i-work">
|
||||
<h2 id="how-i-work" className="!mb-3 !mt-0 !text-xl">
|
||||
How I work
|
||||
</h2>
|
||||
<ul className="!m-0 space-y-2 !pl-5 text-muted">
|
||||
{WORKING_MODE.map((line) => (
|
||||
<li key={line}>{line}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Section 01: Story */}
|
||||
<Section number="01" title="Erfahrung" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Aus der Praxis. <br />
|
||||
<span className="text-slate-400">Für die Praxis.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<section className="mt-16 max-w-3xl" aria-labelledby="timeline">
|
||||
<h2 id="timeline" className="!mb-4 !mt-0 !text-xl">
|
||||
Timeline
|
||||
</h2>
|
||||
<Timeline entries={TIMELINE} />
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
<Reveal delay={0.1}>
|
||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
||||
Ich habe in Agenturen, Konzernen und Startups gearbeitet. Dabei
|
||||
habe ich gesehen, woran Projekte scheitern: zu viele Leute, zu
|
||||
viel Blabla.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<div className="space-y-12">
|
||||
<BodyText className="text-slate-500 text-lg md:text-xl">
|
||||
Das mache ich anders. Keine Hierarchien, kein Fachchinesisch,
|
||||
sondern klare Kommunikation. Fokus auf Ergebnisse statt auf
|
||||
endlose Meetings.
|
||||
</BodyText>
|
||||
<div className="space-y-6 border-l border-slate-100 pl-8">
|
||||
<div>
|
||||
<Label className="text-slate-900 text-lg">Direkt</Label>
|
||||
<BodyText className="text-slate-500">
|
||||
Sie sprechen immer mit mir.
|
||||
</BodyText>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-900 text-lg">
|
||||
Unkompliziert
|
||||
</Label>
|
||||
<BodyText className="text-slate-500">
|
||||
Wir beschränken uns auf das Wesentliche.
|
||||
</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 02: Ablauf */}
|
||||
<Section number="02" title="Ablauf" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
So einfach läuft <br />
|
||||
<span className="text-slate-400">ein Projekt ab.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
|
||||
{[
|
||||
{
|
||||
step: "01",
|
||||
title: "Kurzes Gespräch",
|
||||
desc: "Kein Workshop, nur die Fakten.",
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Klares Angebot",
|
||||
desc: "Fixpreis ohne Sternchen.",
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Umsetzung",
|
||||
desc: "Ich baue, Sie entspannen.",
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Go-Live & Support",
|
||||
desc: "Ich übernehme die Wartung.",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<Reveal key={i} delay={0.1 * i}>
|
||||
<div className="space-y-6 pt-6 border-t border-slate-900">
|
||||
<Label className="text-slate-400 font-mono text-sm">
|
||||
{item.step}
|
||||
</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-900 text-xl">
|
||||
{item.title}
|
||||
</Label>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
{item.desc}
|
||||
</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 03: Garantie */}
|
||||
<Section number="03" title="Garantie" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Ich stehe für <br />
|
||||
<span className="text-slate-400">meine Arbeit gerade.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-end">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="space-y-8">
|
||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
||||
Wenn etwas nicht passt, liegt die Verantwortung allein bei
|
||||
mir.
|
||||
</LeadText>
|
||||
<BodyText className="text-slate-500 text-lg md:text-xl">
|
||||
Sie beauftragen mich, damit Sie Ruhe haben. Fixpreis bedeutet
|
||||
Fixpreis. Wir gehen erst live, wenn Sie zu 100% zufrieden
|
||||
sind.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<div className="pb-8">
|
||||
<Signature />
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 04: CTA */}
|
||||
<Section
|
||||
number="04"
|
||||
title="Kontakt"
|
||||
borderTop
|
||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||||
>
|
||||
<div className="py-12 md:py-24 relative z-10">
|
||||
<div className="space-y-16 md:space-y-24">
|
||||
<Reveal>
|
||||
<H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Bereit, das Thema <br />
|
||||
<span className="text-slate-400">
|
||||
<GlitchText delay={0.5} duration={1}>
|
||||
abzuhaken?
|
||||
</GlitchText>
|
||||
</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2}>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
|
||||
<LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
|
||||
Schreiben Sie mir einfach – wir finden die beste Lösung für
|
||||
Ihre Website.
|
||||
</LeadText>
|
||||
<Button
|
||||
href="/contact"
|
||||
className="w-full md:w-auto px-12 py-6 text-xl"
|
||||
>
|
||||
Sagen Sie Hallo
|
||||
</Button>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
<div className="mt-16 grid max-w-3xl gap-10 md:grid-cols-2">
|
||||
<TagList title="Stack" items={STACK_ITEMS} />
|
||||
<TagList title="Not my thing" items={NOT_MY_THING} />
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user