Cut /ueber-mich over to the page builder
Content recreated as an 11-block Pages document — first real use of HeroBlock's optional portrait image (about-author.jpg, uploaded to Media fresh) alongside the headline. Checklist has no image (uses ChecklistImageBlock's now-optional image field). Verified via a temporary alternate slug before switching back and removing the static file.
This commit is contained in:
Marco
@@ -1,184 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Reveal } from "../components/Reveal";
|
||||
import { Footer } from "../components/Footer";
|
||||
|
||||
const title = "Über mich";
|
||||
const description =
|
||||
"Familienmensch, Vater, Teamleiter – und der Kopf hinter einfach produktiv. Warum die Seite entstanden ist und wofür sie steht.";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title,
|
||||
description,
|
||||
alternates: { canonical: "/ueber-mich" },
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
url: "/ueber-mich",
|
||||
type: "profile",
|
||||
images: ["/about-author.jpg"],
|
||||
},
|
||||
twitter: {
|
||||
title,
|
||||
description,
|
||||
images: ["/about-author.jpg"],
|
||||
},
|
||||
};
|
||||
|
||||
// Same hand-copied "H2 with brand underline" treatment as
|
||||
// /lebensuhr/page.tsx and /3x3-system/page.tsx use — no CMS post backs
|
||||
// this page either.
|
||||
function H2({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<h2
|
||||
className="font-semibold text-h-small text-text-primary mt-4 first:mt-0"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
>
|
||||
{children}
|
||||
<span className="block h-[0.125rem] w-8 bg-brand mt-2" aria-hidden />
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
function P({ children }: { children: React.ReactNode }) {
|
||||
return <p className="text-body text-text-body">{children}</p>;
|
||||
}
|
||||
|
||||
// Same visual language as RichText.tsx's Quote component (Caveat script +
|
||||
// brand divider) — for the page's two standout lines.
|
||||
function Quote({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="relative flex items-start gap-6 w-full my-2">
|
||||
<div className="w-px self-stretch bg-brand shrink-0" />
|
||||
<p className="text-text-primary text-[1.75rem] leading-[1.1] flex-1" style={{ fontFamily: "var(--font-caveat)" }}>
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Same checkmark used by /lebensuhr's and /7-tage-klarheits-check's own
|
||||
// checklists — swapped in for plain bullets for consistency.
|
||||
function Check() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
|
||||
<path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const highlights = [
|
||||
"Impulse, die im echten Leben funktionieren",
|
||||
"Orientierung statt Überforderung",
|
||||
"Alltagstaugliche Systeme statt komplizierter Methoden",
|
||||
"Ehrliche Einblicke statt Perfektionsfassade",
|
||||
];
|
||||
|
||||
export default function UeberMichPage() {
|
||||
return (
|
||||
<>
|
||||
<main className="flex flex-col flex-1 bg-bg-base">
|
||||
<Reveal className="flex flex-col gap-4 items-start pt-10 pb-8 px-[var(--layout-padding-x)] w-full max-w-[48rem] mx-auto">
|
||||
<p className="flex items-center gap-2 text-body-sm text-text-muted">
|
||||
<Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
|
||||
<span>›</span>
|
||||
<span className="text-text-primary">Über mich</span>
|
||||
</p>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="relative size-20 shrink-0 rounded-full overflow-hidden">
|
||||
<Image alt="Björn" src="/about-author.jpg" fill sizes="80px" className="object-cover" />
|
||||
</div>
|
||||
<p
|
||||
className="font-semibold text-[clamp(2rem,1.393rem+1.5vw,2.75rem)] text-text-primary leading-[1.15]"
|
||||
style={{ fontFamily: "var(--font-playfair)" }}
|
||||
>
|
||||
Hallo, ich bin Björn.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pb-14 flex flex-col gap-5">
|
||||
<P>
|
||||
Familienmensch. Vater. Teamleiter. Und lange Zeit jemand, der dachte, Produktivität heißt vor
|
||||
allem: möglichst viel schaffen.
|
||||
</P>
|
||||
<P>
|
||||
Beruflich leite ich ein internationales IT-Team in der Logistikbranche. Privat bin ich
|
||||
zwischen Homeoffice, Familienleben und einem Alltag unterwegs, der selten nach Plan läuft.
|
||||
Genau dort ist einfach produktiv entstanden.
|
||||
</P>
|
||||
|
||||
<H2>Warum einfach produktiv.</H2>
|
||||
<P>
|
||||
Irgendwann habe ich gemerkt, dass ich ständig versuchte, meinen Alltag besser zu organisieren
|
||||
– neue Apps, neue Methoden, neue Routinen. Vieles wurde effizienter. Trotzdem blieb das
|
||||
Gefühl, an den wirklich wichtigen Dingen vorbeizuleben. Nicht weil ich zu wenig geschafft
|
||||
habe, sondern weil ich mich zu selten gefragt habe, ob ich das Richtige geschafft habe.
|
||||
</P>
|
||||
<P>
|
||||
Heute glaube ich: Es geht nicht darum, mehr zu schaffen. Es geht darum, zu erkennen, was in
|
||||
deiner aktuellen Lebensphase zählt – und dir einen Anker zu setzen, der dich im Alltag daran
|
||||
erinnert.
|
||||
</P>
|
||||
|
||||
<H2>Wofür einfach produktiv steht</H2>
|
||||
<P>
|
||||
Die Welt erzählt dir ständig, wie du mehr schaffen kannst. Mich interessiert etwas anderes:
|
||||
Wie schaffst du das Richtige? Deshalb geht es hier nicht um Selbstoptimierung um jeden Preis,
|
||||
sondern um Orientierung statt Optimierung, um Klarheit statt einem weiteren System.
|
||||
</P>
|
||||
<Quote>Verlier dich nicht im Mehr. Verankere, was zählt.</Quote>
|
||||
|
||||
<H2>Was dich hier erwartet</H2>
|
||||
<P>
|
||||
Keine Patentrezepte. Sondern Gedanken, Erfahrungen und Werkzeuge, die sich in meinem eigenen
|
||||
Alltag bewährt haben:
|
||||
</P>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{highlights.map((h) => (
|
||||
<li key={h} className="flex items-start gap-3">
|
||||
<Check />
|
||||
<p className="text-body text-text-body">{h}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<H2>Warum ich schreibe</H2>
|
||||
<P>
|
||||
Ich bin weder Coach noch Guru, sondern jemand, der selbst immer wieder versucht, Familie,
|
||||
Beruf und eigene Projekte unter einen Hut zu bekommen. Nicht weil ich alles im Griff habe,
|
||||
sondern weil ich glaube, dass wir voneinander lernen können. Wenn ein Gedanke davon deinen
|
||||
Alltag ein Stück leichter macht, hat sich das schon gelohnt.
|
||||
</P>
|
||||
<Quote>Nicht alles, was zählt, steht auf einer To-do-Liste.</Quote>
|
||||
<P>Herzliche Grüße, Björn</P>
|
||||
|
||||
{/* Same bordered CTA-card treatment /lebensuhr's and
|
||||
/3x3-system's own closing links use. */}
|
||||
<Link
|
||||
href="/blog"
|
||||
className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 mt-2 hover:border-brand transition-colors"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-bold text-[0.8125rem] text-brand">Weiterlesen:</p>
|
||||
<p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
|
||||
Meine Gedanken im Blog
|
||||
</p>
|
||||
<p className="text-body-sm text-text-muted">Impulse und Werkzeuge aus dem echten Alltag.</p>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Link>
|
||||
</Reveal>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user