feat: section on web presentations, in German and English
A presentation built as a website instead of a slide file: why, for what, and when slides are enough. The main drawing shows the same presentation as a slide and as a web page on a projector, a laptop and a phone; the slide keeps its format and shrinks, the page rearranges. Four small drawings stand next to the reasons. No prices: none are agreed for this yet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -13,6 +13,10 @@ 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 {
|
||||
PresentationCompare,
|
||||
ReasonDrawing,
|
||||
} from "@/src/components/illustrations/WebPresentation";
|
||||
import { WorkShowcase } from "@/src/components/illustrations/WorkShowcase";
|
||||
import { Reveal } from "@/src/components/Reveal";
|
||||
import { contentFor } from "@/src/content";
|
||||
@@ -51,8 +55,16 @@ const Title: React.FC<{ title: SplitTitle; muted?: string }> = ({
|
||||
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;
|
||||
const {
|
||||
hello,
|
||||
services,
|
||||
automation,
|
||||
presentations,
|
||||
technology,
|
||||
working,
|
||||
work,
|
||||
faq,
|
||||
} = content;
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col bg-white">
|
||||
@@ -133,6 +145,78 @@ export default async function LandingPage({ params }: Props) {
|
||||
|
||||
<Block
|
||||
index="04"
|
||||
label={presentations.label}
|
||||
tone="dark"
|
||||
title={<Title title={presentations.title} muted="text-slate-500" />}
|
||||
>
|
||||
<Reveal>
|
||||
<p className="m-0 mb-12 max-w-3xl font-sans text-lg leading-relaxed text-slate-300 md:mb-16 md:text-xl">
|
||||
{presentations.intro}
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal>
|
||||
<BitAura source="around" tone="dark">
|
||||
<div className="rounded-3xl border border-slate-700 bg-slate-950 px-4 py-8 md:px-10 md:py-12">
|
||||
<PresentationCompare />
|
||||
</div>
|
||||
</BitAura>
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-16 grid grid-cols-1 gap-x-10 gap-y-14 sm:grid-cols-2 md:mt-28 lg:grid-cols-4">
|
||||
{presentations.reasons.map((reason, i) => (
|
||||
<Reveal key={reason.title} delay={0.08 * i}>
|
||||
<div className="rounded-2xl border border-slate-800 bg-slate-950/60 p-4">
|
||||
<ReasonDrawing index={i} />
|
||||
</div>
|
||||
<h3 className="m-0 mt-6 font-sans text-2xl font-bold tracking-tight text-white">
|
||||
{reason.title}
|
||||
</h3>
|
||||
<p className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-300 md:text-lg">
|
||||
{reason.text}
|
||||
</p>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid grid-cols-1 gap-12 md:mt-28 md:grid-cols-12 md:gap-12">
|
||||
<Reveal className="md:col-span-6">
|
||||
<div className="border-t border-slate-700 pt-6">
|
||||
<p className="m-0 font-mono text-[11px] uppercase tracking-[0.2em] text-slate-400">
|
||||
{presentations.goodFor.title}
|
||||
</p>
|
||||
<ul className="m-0 mt-4 list-none p-0">
|
||||
{presentations.goodFor.items.map((item) => (
|
||||
<li
|
||||
key={item}
|
||||
className="border-b border-slate-800 py-4 font-sans text-lg text-slate-100 md:text-xl"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.1} className="md:col-span-6">
|
||||
<div className="rounded-3xl border border-slate-700 bg-slate-950/60 p-6 md:p-10">
|
||||
<h3 className="m-0 font-sans text-2xl font-bold tracking-tight text-white md:text-3xl">
|
||||
{presentations.honest.title}
|
||||
</h3>
|
||||
<p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-300 md:text-lg">
|
||||
{presentations.honest.text}
|
||||
</p>
|
||||
<a
|
||||
href="#contact"
|
||||
className="bit-cta bit-cta-light mt-8 inline-flex items-center gap-3 rounded-full bg-white px-6 py-3 font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-slate-900 no-underline transition-transform duration-300 hover:-translate-y-0.5"
|
||||
>
|
||||
{presentations.cta} <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="05"
|
||||
label={technology.label}
|
||||
title={<Title title={technology.title} />}
|
||||
>
|
||||
@@ -201,7 +285,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="05"
|
||||
index="06"
|
||||
label={working.label}
|
||||
title={<Title title={working.title} />}
|
||||
>
|
||||
@@ -227,7 +311,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="06"
|
||||
index="07"
|
||||
label={work.label}
|
||||
tone="dark"
|
||||
title={<Title title={work.title} muted="text-slate-500" />}
|
||||
@@ -240,7 +324,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
</Reveal>
|
||||
</Block>
|
||||
|
||||
<Block index="07" label={faq.label} title={<Title title={faq.title} />}>
|
||||
<Block index="08" label={faq.label} title={<Title title={faq.title} />}>
|
||||
<Reveal>
|
||||
<Faq items={faq.items} />
|
||||
</Reveal>
|
||||
|
||||
@@ -0,0 +1,622 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useContent } from "@/src/components/ContentProvider";
|
||||
import { useNarrow } from "./useNarrow";
|
||||
|
||||
/**
|
||||
* WebPresentation: the drawings of the web presentations section. The main one
|
||||
* shows the same presentation as a slide file and as a website on three
|
||||
* screens; four small ones stand next to the reasons. Same line language as
|
||||
* PathScenes.
|
||||
*/
|
||||
|
||||
const INK = "#f8fafc";
|
||||
const LINE = "#475569";
|
||||
const RIM = "#64748b";
|
||||
const SOFT = "#1e293b";
|
||||
const MARK = "#fde68a";
|
||||
const LIVE = "#10b981";
|
||||
const TINT = "rgba(248, 250, 252, 0.14)";
|
||||
const FINE = 1.1;
|
||||
const STEP_MS = 3600;
|
||||
const MOVE = { duration: 0.7, ease: [0.16, 1, 0.3, 1] as const };
|
||||
|
||||
const MONO: React.CSSProperties = {
|
||||
fontFamily: "var(--font-jetbrains-mono), ui-monospace, monospace",
|
||||
fontSize: "var(--scene-label, 10px)",
|
||||
letterSpacing: "0.14em",
|
||||
textTransform: "uppercase",
|
||||
fill: "#94a3b8",
|
||||
};
|
||||
|
||||
interface Size {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface Rect extends Size {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
/** Projector, laptop, phone. */
|
||||
const SCREENS: readonly Size[] = [
|
||||
{ width: 300, height: 170 },
|
||||
{ width: 230, height: 150 },
|
||||
{ width: 96, height: 190 },
|
||||
];
|
||||
|
||||
const SLIDE: Size = { width: 160, height: 90 };
|
||||
const PAD = 12;
|
||||
const GAP = 8;
|
||||
|
||||
const centred = (size: Size, cx: number, cy: number): Rect => ({
|
||||
...size,
|
||||
x: cx - size.width / 2,
|
||||
y: cy - size.height / 2,
|
||||
});
|
||||
|
||||
/** The slide keeps its format: it is scaled down until it fits the screen. */
|
||||
const fitSlide = (screen: Rect) => {
|
||||
const scale = Math.min(
|
||||
(screen.width - 2 * PAD) / SLIDE.width,
|
||||
(screen.height - 2 * PAD) / SLIDE.height,
|
||||
);
|
||||
return {
|
||||
scale,
|
||||
x: screen.x + (screen.width - SLIDE.width * scale) / 2,
|
||||
y: screen.y + (screen.height - SLIDE.height * scale) / 2,
|
||||
};
|
||||
};
|
||||
|
||||
/** The web page rearranges: three columns, two columns and a row, or one column. */
|
||||
const webLayout = (screen: Rect, index: number) => {
|
||||
const left = screen.x + PAD;
|
||||
const inner = screen.width - 2 * PAD;
|
||||
const header: Rect = { x: left, y: screen.y + PAD, width: inner, height: 12 };
|
||||
const top = header.y + header.height + GAP;
|
||||
const area = screen.y + screen.height - PAD - top;
|
||||
|
||||
if (index === 0) {
|
||||
const width = (inner - 2 * GAP) / 3;
|
||||
return {
|
||||
header,
|
||||
cards: [0, 1, 2].map((i) => ({
|
||||
x: left + i * (width + GAP),
|
||||
y: top,
|
||||
width,
|
||||
height: area,
|
||||
})),
|
||||
};
|
||||
}
|
||||
if (index === 1) {
|
||||
const width = (inner - GAP) / 2;
|
||||
const upper = (area - GAP) * 0.56;
|
||||
return {
|
||||
header,
|
||||
cards: [
|
||||
{ x: left, y: top, width, height: upper },
|
||||
{ x: left + width + GAP, y: top, width, height: upper },
|
||||
{
|
||||
x: left,
|
||||
y: top + upper + GAP,
|
||||
width: inner,
|
||||
height: area - upper - GAP,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
const height = (area - 2 * GAP) / 3;
|
||||
return {
|
||||
header,
|
||||
cards: [0, 1, 2].map((i) => ({
|
||||
x: left,
|
||||
y: top + i * (height + GAP),
|
||||
width: inner,
|
||||
height,
|
||||
})),
|
||||
};
|
||||
};
|
||||
|
||||
const Frame: React.FC<{ rect: Rect }> = ({ rect }) => (
|
||||
<motion.rect
|
||||
rx={12}
|
||||
fill="#0b1220"
|
||||
stroke={RIM}
|
||||
strokeWidth={FINE}
|
||||
initial={false}
|
||||
animate={{
|
||||
attrX: rect.x,
|
||||
attrY: rect.y,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
}}
|
||||
transition={MOVE}
|
||||
/>
|
||||
);
|
||||
|
||||
/** One 16:9 slide, drawn at its own size and scaled as a whole. */
|
||||
const Slide: React.FC<{ screen: Rect }> = ({ screen }) => {
|
||||
const fit = fitSlide(screen);
|
||||
return (
|
||||
<motion.g
|
||||
style={{ originX: 0, originY: 0 }}
|
||||
initial={false}
|
||||
animate={{ x: fit.x, y: fit.y, scale: fit.scale }}
|
||||
transition={MOVE}
|
||||
>
|
||||
<rect
|
||||
width={SLIDE.width}
|
||||
height={SLIDE.height}
|
||||
rx={4}
|
||||
fill={TINT}
|
||||
stroke={INK}
|
||||
strokeWidth={FINE}
|
||||
/>
|
||||
<line
|
||||
x1={12}
|
||||
x2={84}
|
||||
y1={18}
|
||||
y2={18}
|
||||
stroke={INK}
|
||||
strokeWidth={4}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
{[0, 1, 2].map((bullet) => (
|
||||
<g key={bullet}>
|
||||
<circle cx={14} cy={38 + bullet * 13} r={1.6} fill={RIM} />
|
||||
<line
|
||||
x1={20}
|
||||
x2={20 + [58, 46, 52][bullet % 3]}
|
||||
y1={38 + bullet * 13}
|
||||
y2={38 + bullet * 13}
|
||||
stroke={RIM}
|
||||
strokeWidth={2.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</g>
|
||||
))}
|
||||
{[0, 1, 2, 3].map((bar) => {
|
||||
const height = [18, 30, 24, 40][bar % 4];
|
||||
return (
|
||||
<rect
|
||||
key={bar}
|
||||
x={104 + bar * 11}
|
||||
y={74 - height}
|
||||
width={7}
|
||||
height={height}
|
||||
rx={2}
|
||||
fill={bar === 3 ? MARK : RIM}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</motion.g>
|
||||
);
|
||||
};
|
||||
|
||||
const WebPage: React.FC<{ screen: Rect; index: number }> = ({
|
||||
screen,
|
||||
index,
|
||||
}) => {
|
||||
const { header, cards } = webLayout(screen, index);
|
||||
return (
|
||||
<g>
|
||||
<motion.rect
|
||||
rx={4}
|
||||
fill={SOFT}
|
||||
stroke={LINE}
|
||||
strokeWidth={1}
|
||||
initial={false}
|
||||
animate={{
|
||||
attrX: header.x,
|
||||
attrY: header.y,
|
||||
width: header.width,
|
||||
height: header.height,
|
||||
}}
|
||||
transition={MOVE}
|
||||
/>
|
||||
{cards.map((card, i) => (
|
||||
<g key={i}>
|
||||
<motion.rect
|
||||
rx={6}
|
||||
fill={TINT}
|
||||
stroke={INK}
|
||||
strokeWidth={FINE}
|
||||
initial={false}
|
||||
animate={{
|
||||
attrX: card.x,
|
||||
attrY: card.y,
|
||||
width: card.width,
|
||||
height: card.height,
|
||||
}}
|
||||
transition={MOVE}
|
||||
/>
|
||||
<motion.line
|
||||
stroke={i === 2 ? MARK : INK}
|
||||
strokeWidth={3}
|
||||
strokeLinecap="round"
|
||||
initial={false}
|
||||
animate={{
|
||||
x1: card.x + 9,
|
||||
x2: card.x + Math.min(card.width - 9, 9 + 46),
|
||||
y1: card.y + 12,
|
||||
y2: card.y + 12,
|
||||
}}
|
||||
transition={MOVE}
|
||||
/>
|
||||
<motion.line
|
||||
stroke={RIM}
|
||||
strokeWidth={2.5}
|
||||
strokeLinecap="round"
|
||||
initial={false}
|
||||
animate={{
|
||||
x1: card.x + 9,
|
||||
x2: card.x + Math.min(card.width - 9, 9 + 62),
|
||||
y1: card.y + 23,
|
||||
y2: card.y + 23,
|
||||
}}
|
||||
transition={MOVE}
|
||||
/>
|
||||
</g>
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* PresentationCompare: the same presentation as a slide file and as a website,
|
||||
* on a projector, a laptop and a phone. It steps through the screens on its
|
||||
* own until the visitor picks one.
|
||||
*/
|
||||
export const PresentationCompare: React.FC = () => {
|
||||
const { compare } = useContent().presentations;
|
||||
const narrow = useNarrow();
|
||||
const ref = React.useRef<HTMLDivElement>(null);
|
||||
const [index, setIndex] = React.useState(0);
|
||||
const [auto, setAuto] = React.useState(true);
|
||||
const [inView, setInView] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const node = ref.current;
|
||||
if (!node) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setInView(entry?.isIntersecting ?? false),
|
||||
{ threshold: 0.3 },
|
||||
);
|
||||
observer.observe(node);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!auto || !inView) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
const timer = window.setInterval(
|
||||
() => setIndex((current) => (current + 1) % SCREENS.length),
|
||||
STEP_MS,
|
||||
);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [auto, inView]);
|
||||
|
||||
// Side by side on wide screens, one above the other on a phone.
|
||||
const view = narrow
|
||||
? { width: 380, height: 600 }
|
||||
: { width: 760, height: 300 };
|
||||
const stages = narrow
|
||||
? [
|
||||
{ cx: 190, cy: 150 },
|
||||
{ cx: 190, cy: 450 },
|
||||
]
|
||||
: [
|
||||
{ cx: 190, cy: 150 },
|
||||
{ cx: 570, cy: 150 },
|
||||
];
|
||||
const size = SCREENS[index] ?? SCREENS[0];
|
||||
if (!size) return null;
|
||||
const slideScreen = centred(size, stages[0]?.cx ?? 0, stages[0]?.cy ?? 0);
|
||||
const webScreen = centred(size, stages[1]?.cx ?? 0, stages[1]?.cy ?? 0);
|
||||
const tooSmall = index === SCREENS.length - 1;
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<svg
|
||||
viewBox={`0 0 ${view.width} ${view.height}`}
|
||||
role="img"
|
||||
aria-label={compare.description}
|
||||
className="block h-auto w-full [--scene-label:13px] md:[--scene-label:10px]"
|
||||
>
|
||||
{[
|
||||
{
|
||||
stage: stages[0],
|
||||
name: compare.slides,
|
||||
note: compare.slideNotes[index],
|
||||
colour: tooSmall ? MARK : "#94a3b8",
|
||||
},
|
||||
{
|
||||
stage: stages[1],
|
||||
name: compare.web,
|
||||
note: compare.webNotes[index],
|
||||
colour: LIVE,
|
||||
},
|
||||
].map(
|
||||
(column) =>
|
||||
column.stage && (
|
||||
<g key={column.name}>
|
||||
<text
|
||||
x={column.stage.cx}
|
||||
y={column.stage.cy - 118}
|
||||
textAnchor="middle"
|
||||
style={{ ...MONO, fill: INK }}
|
||||
>
|
||||
{column.name}
|
||||
</text>
|
||||
<motion.text
|
||||
key={column.note}
|
||||
x={column.stage.cx}
|
||||
y={column.stage.cy + 128}
|
||||
textAnchor="middle"
|
||||
style={{ ...MONO, fill: column.colour }}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.4, delay: 0.35 }}
|
||||
>
|
||||
{column.note}
|
||||
</motion.text>
|
||||
</g>
|
||||
),
|
||||
)}
|
||||
<Frame rect={slideScreen} />
|
||||
<Slide screen={slideScreen} />
|
||||
<Frame rect={webScreen} />
|
||||
<WebPage screen={webScreen} index={index} />
|
||||
</svg>
|
||||
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-2 md:mt-8">
|
||||
<span className="mr-2 font-mono text-[11px] uppercase tracking-[0.2em] text-slate-500">
|
||||
{compare.pickScreen}
|
||||
</span>
|
||||
{compare.screens.map((screen, i) => {
|
||||
const selected = i === index;
|
||||
return (
|
||||
<button
|
||||
key={screen}
|
||||
type="button"
|
||||
aria-pressed={selected}
|
||||
onClick={() => {
|
||||
setIndex(i);
|
||||
setAuto(false);
|
||||
}}
|
||||
className={`rounded-full border px-4 py-2 font-mono text-[11px] uppercase tracking-[0.15em] transition-colors duration-200 ${
|
||||
selected
|
||||
? "border-white bg-white text-slate-900"
|
||||
: "border-slate-700 text-slate-300 hover:border-slate-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{screen}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const draw = (delay: number) => ({
|
||||
initial: { pathLength: 0, opacity: 0 },
|
||||
whileInView: { pathLength: 1, opacity: 1 },
|
||||
viewport: { once: true, margin: "-10%" },
|
||||
transition: { duration: 0.7, delay, ease: "easeOut" as const },
|
||||
});
|
||||
|
||||
/** Every screen: a projector, a laptop and a phone drawn one after another. */
|
||||
const ScreensDrawing: React.FC = () => (
|
||||
<g fill="none" stroke={INK} strokeWidth={FINE} strokeLinejoin="round">
|
||||
<motion.rect x={14} y={14} width={86} height={50} rx={5} {...draw(0)} />
|
||||
<motion.path d="M 44 74 h 26 M 57 64 v 10" stroke={RIM} {...draw(0.2)} />
|
||||
<motion.rect x={112} y={30} width={60} height={38} rx={4} {...draw(0.35)} />
|
||||
<motion.path d="M 104 72 h 76" stroke={RIM} {...draw(0.5)} />
|
||||
<motion.rect
|
||||
x={190}
|
||||
y={22}
|
||||
width={28}
|
||||
height={52}
|
||||
rx={6}
|
||||
fill={TINT}
|
||||
{...draw(0.7)}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
|
||||
/** One link: several copies of a file on one side, a single address on the other. */
|
||||
const LinkDrawing: React.FC = () => (
|
||||
<g>
|
||||
{[0, 1, 2].map((copy) => (
|
||||
<rect
|
||||
key={copy}
|
||||
x={18 + copy * 12}
|
||||
y={18 + copy * 8}
|
||||
width={38}
|
||||
height={48}
|
||||
rx={4}
|
||||
fill="#0b1220"
|
||||
stroke={LINE}
|
||||
strokeWidth={1}
|
||||
strokeDasharray="3 3"
|
||||
/>
|
||||
))}
|
||||
<motion.path
|
||||
d="M 96 46 h 30"
|
||||
stroke={INK}
|
||||
strokeWidth={FINE}
|
||||
markerEnd="url(#reason-arrow)"
|
||||
{...draw(0.2)}
|
||||
/>
|
||||
<rect
|
||||
x={138}
|
||||
y={32}
|
||||
width={82}
|
||||
height={28}
|
||||
rx={14}
|
||||
fill={TINT}
|
||||
stroke={INK}
|
||||
strokeWidth={FINE}
|
||||
/>
|
||||
<motion.circle
|
||||
cx={152}
|
||||
cy={46}
|
||||
r={3.5}
|
||||
fill={LIVE}
|
||||
animate={{ opacity: [1, 0.35, 1] }}
|
||||
transition={{ duration: 1.8, repeat: Infinity }}
|
||||
/>
|
||||
<line
|
||||
x1={162}
|
||||
x2={208}
|
||||
y1={46}
|
||||
y2={46}
|
||||
stroke={INK}
|
||||
strokeWidth={2.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
|
||||
/** The real thing: a chart whose bars keep moving, because the figures are live. */
|
||||
const LiveDrawing: React.FC = () => (
|
||||
<g>
|
||||
<rect
|
||||
x={24}
|
||||
y={12}
|
||||
width={186}
|
||||
height={66}
|
||||
rx={8}
|
||||
fill="#0b1220"
|
||||
stroke={RIM}
|
||||
strokeWidth={FINE}
|
||||
/>
|
||||
<line x1={38} x2={196} y1={66} y2={66} stroke={LINE} strokeWidth={1} />
|
||||
{[0, 1, 2, 3, 4, 5].map((bar) => {
|
||||
const low = [14, 22, 18, 30, 24, 36][bar % 6] ?? 20;
|
||||
const high = [26, 16, 34, 22, 40, 28][bar % 6] ?? 30;
|
||||
return (
|
||||
<motion.rect
|
||||
key={bar}
|
||||
x={44 + bar * 25}
|
||||
width={14}
|
||||
rx={3}
|
||||
fill={bar === 5 ? MARK : RIM}
|
||||
initial={false}
|
||||
animate={{
|
||||
height: [low, high, low],
|
||||
attrY: [66 - low, 66 - high, 66 - low],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3.6,
|
||||
delay: bar * 0.25,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<motion.circle
|
||||
cx={198}
|
||||
cy={24}
|
||||
r={3}
|
||||
fill={LIVE}
|
||||
animate={{ opacity: [1, 0.3, 1] }}
|
||||
transition={{ duration: 1.6, repeat: Infinity }}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
|
||||
/** Afterwards: a page that is read on its own and passed on. */
|
||||
const AfterDrawing: React.FC = () => (
|
||||
<g>
|
||||
<rect
|
||||
x={30}
|
||||
y={10}
|
||||
width={74}
|
||||
height={70}
|
||||
rx={6}
|
||||
fill={TINT}
|
||||
stroke={INK}
|
||||
strokeWidth={FINE}
|
||||
/>
|
||||
{[0, 1, 2, 3].map((row) => (
|
||||
<line
|
||||
key={row}
|
||||
x1={42}
|
||||
x2={42 + [48, 40, 46, 30][row % 4]}
|
||||
y1={26 + row * 12}
|
||||
y2={26 + row * 12}
|
||||
stroke={row === 0 ? INK : RIM}
|
||||
strokeWidth={row === 0 ? 3 : 2.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
))}
|
||||
{[24, 46, 68].map((y, i) => (
|
||||
<g key={y}>
|
||||
<motion.path
|
||||
d={`M 104 45 C 136 45 138 ${y} 168 ${y}`}
|
||||
fill="none"
|
||||
stroke={INK}
|
||||
strokeWidth={FINE}
|
||||
{...draw(0.2 + i * 0.2)}
|
||||
/>
|
||||
<circle
|
||||
cx={180}
|
||||
cy={y}
|
||||
r={9}
|
||||
fill="#0b1220"
|
||||
stroke={RIM}
|
||||
strokeWidth={FINE}
|
||||
/>
|
||||
<circle cx={180} cy={y - 2} r={2.6} fill={RIM} />
|
||||
<path
|
||||
d={`M 174.5 ${y + 5.5} q 5.5 -6 11 0`}
|
||||
fill="none"
|
||||
stroke={RIM}
|
||||
strokeWidth={1.4}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</g>
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
|
||||
const REASON_DRAWINGS: readonly React.FC[] = [
|
||||
ScreensDrawing,
|
||||
LinkDrawing,
|
||||
LiveDrawing,
|
||||
AfterDrawing,
|
||||
];
|
||||
|
||||
/** The small drawing next to one of the reasons, by its position in the list. */
|
||||
export const ReasonDrawing: React.FC<{ index: number }> = ({ index }) => {
|
||||
const Drawing = REASON_DRAWINGS[index];
|
||||
if (!Drawing) return null;
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 234 90"
|
||||
aria-hidden="true"
|
||||
className="block h-auto w-full"
|
||||
>
|
||||
<defs>
|
||||
<marker
|
||||
id="reason-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="8"
|
||||
refY="5"
|
||||
markerWidth="5"
|
||||
markerHeight="5"
|
||||
orient="auto-start-reverse"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill={INK} />
|
||||
</marker>
|
||||
</defs>
|
||||
<Drawing />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -441,6 +441,62 @@ export const de: Content = {
|
||||
},
|
||||
],
|
||||
},
|
||||
presentations: {
|
||||
label: "Web-Präsentationen",
|
||||
title: { lead: "Eine Präsentation als Link.", rest: "Nicht als Anhang." },
|
||||
intro:
|
||||
"Die meisten Präsentationen sind noch Foliendateien: ein festes Format, verschickt als Anhang. Ich baue Präsentationen als Websites. Sie öffnen sich in jedem Browser, passen sich dem Bildschirm an, auf dem sie gezeigt werden, und können Dinge enthalten, die eine Folie nicht kann.",
|
||||
compare: {
|
||||
description:
|
||||
"Eine Folie behält auf jedem Bildschirm ihr festes Format und wird auf dem Handy zu klein zum Lesen. Eine Web-Präsentation ordnet ihren Inhalt für jeden Bildschirm neu an.",
|
||||
slides: "Foliendatei",
|
||||
web: "Web-Präsentation",
|
||||
pickScreen: "Gezeigt auf",
|
||||
screens: ["Beamer", "Laptop", "Handy"],
|
||||
slideNotes: [
|
||||
"Für dieses Format gemacht",
|
||||
"Passt noch",
|
||||
"Verkleinert: zu klein zum Lesen",
|
||||
],
|
||||
webNotes: [
|
||||
"Nutzt die volle Breite",
|
||||
"Zwei Spalten",
|
||||
"Eine Spalte, gut lesbar",
|
||||
],
|
||||
},
|
||||
reasons: [
|
||||
{
|
||||
title: "Passt auf jeden Bildschirm",
|
||||
text: "Eine Folie hat ein festes Format. Eine Web-Präsentation ordnet sich für Beamer, Laptop und Handy jeweils neu an.",
|
||||
},
|
||||
{
|
||||
title: "Ein Link, ein Stand",
|
||||
text: "Niemand muss fragen, welche Datei die aktuelle ist. Sie ändern es an einer Stelle, und jeder, der den Link öffnet, sieht diesen Stand.",
|
||||
},
|
||||
{
|
||||
title: "Zeigt das Echte",
|
||||
text: "Aktuelle Zahlen, eine funktionierende Demo oder ein klickbarer Prototyp können direkt in der Präsentation stehen, statt eines Screenshots davon.",
|
||||
},
|
||||
{
|
||||
title: "Auch danach noch nützlich",
|
||||
text: "Nach dem Termin ist sie eine Seite, die man allein lesen, weitergeben und wiederfinden kann.",
|
||||
},
|
||||
],
|
||||
goodFor: {
|
||||
title: "Typische Einsätze",
|
||||
items: [
|
||||
"Unternehmens- und Produktpräsentationen",
|
||||
"Pitches und Angebote, die als Link verschickt werden",
|
||||
"Berichte mit Zahlen, die sich ändern",
|
||||
"Bildschirme auf Messen und Veranstaltungen",
|
||||
],
|
||||
},
|
||||
honest: {
|
||||
title: "Wann Folien reichen",
|
||||
text: "Für einen einzelnen internen Termin ist eine Foliendatei schneller und günstiger. Eine Web-Präsentation lohnt sich, wenn sie oft gezeigt wird, an viele Menschen geht oder für Ihr Unternehmen steht.",
|
||||
},
|
||||
cta: "Nach einer Präsentation fragen",
|
||||
},
|
||||
technology: {
|
||||
label: "Technik",
|
||||
title: { lead: "Für welche Projekte", rest: "ich der Richtige bin." },
|
||||
|
||||
@@ -425,6 +425,58 @@ export const en: Content = {
|
||||
},
|
||||
],
|
||||
},
|
||||
presentations: {
|
||||
label: "Web presentations",
|
||||
title: { lead: "A presentation as a link.", rest: "Not as an attachment." },
|
||||
intro:
|
||||
"Most presentations are still slide files: one fixed format, sent around as an attachment. I build presentations as websites. They open in any browser, adapt to the screen they are shown on, and can contain things a slide cannot.",
|
||||
compare: {
|
||||
description:
|
||||
"A slide keeps its fixed format on every screen and becomes too small to read on a phone. A web presentation rearranges its content for each screen.",
|
||||
slides: "Slide file",
|
||||
web: "Web presentation",
|
||||
pickScreen: "Shown on",
|
||||
screens: ["Projector", "Laptop", "Phone"],
|
||||
slideNotes: [
|
||||
"Made for this format",
|
||||
"Still fits",
|
||||
"Shrunk: too small to read",
|
||||
],
|
||||
webNotes: ["Uses the full width", "Two columns", "One column, readable"],
|
||||
},
|
||||
reasons: [
|
||||
{
|
||||
title: "Fits every screen",
|
||||
text: "A slide has one fixed format. A web presentation rearranges itself for the projector, the laptop and the phone.",
|
||||
},
|
||||
{
|
||||
title: "One link, one version",
|
||||
text: "Nobody has to ask which file is the current one. You change it in one place, and everyone who opens the link sees that state.",
|
||||
},
|
||||
{
|
||||
title: "Shows the real thing",
|
||||
text: "Current figures, a working demo or a clickable prototype can sit inside the presentation, instead of a screenshot of them.",
|
||||
},
|
||||
{
|
||||
title: "Still useful afterwards",
|
||||
text: "After the meeting it is a page people can read on their own, pass on and find again.",
|
||||
},
|
||||
],
|
||||
goodFor: {
|
||||
title: "Typical uses",
|
||||
items: [
|
||||
"Company and product presentations",
|
||||
"Pitches and offers sent as a link",
|
||||
"Reports with figures that change",
|
||||
"Screens at trade fairs and events",
|
||||
],
|
||||
},
|
||||
honest: {
|
||||
title: "When slides are enough",
|
||||
text: "For a single internal meeting, a slide file is quicker and cheaper. A web presentation is worth it when it is shown often, sent to many people, or stands for your company.",
|
||||
},
|
||||
cta: "Ask about a presentation",
|
||||
},
|
||||
technology: {
|
||||
label: "Technology",
|
||||
title: { lead: "Which projects", rest: "I am right for." },
|
||||
|
||||
@@ -198,6 +198,28 @@ export type Content = {
|
||||
readonly workflows: Readonly<Record<string, WorkflowCopy>>;
|
||||
readonly notes: readonly TitledList[];
|
||||
};
|
||||
readonly presentations: {
|
||||
readonly label: string;
|
||||
readonly title: SplitTitle;
|
||||
readonly intro: string;
|
||||
readonly compare: {
|
||||
/** What the drawing shows, for screen readers. */
|
||||
readonly description: string;
|
||||
readonly slides: string;
|
||||
readonly web: string;
|
||||
readonly pickScreen: string;
|
||||
/** Projector, laptop, phone: in this order. */
|
||||
readonly screens: readonly string[];
|
||||
/** What happens to the slide on each screen, in the same order. */
|
||||
readonly slideNotes: readonly string[];
|
||||
readonly webNotes: readonly string[];
|
||||
};
|
||||
/** Every screen, one link, real content, useful afterwards: in this order. */
|
||||
readonly reasons: readonly TitledText[];
|
||||
readonly goodFor: TitledList;
|
||||
readonly honest: TitledText;
|
||||
readonly cta: string;
|
||||
};
|
||||
readonly technology: {
|
||||
readonly label: string;
|
||||
readonly title: SplitTitle;
|
||||
|
||||
Reference in New Issue
Block a user