mmintelandClaude Opus 5.5
c70833a725
The homepage was too long and read as a list of sections. The technical ones (project fit, tools, how a change is secured) move to a page of their own, /freelance and /en/freelance, linked from the header, the footer and a pointer on the homepage. The rest is reordered into one story (who, what you need, examples, how working together goes, results, questions, contact) and each section opens with a sentence that leads over from the one before. routes.ts: a page may now have the same name in both languages. Before, /en/<german name> was always moved to the English name, which for such a page would have redirected the address onto itself. Design: list titles such as "Passt gut" are real headings instead of small grey labels. The automation examples, their description and the run are one box, so it is clear they belong together. Digits on light backgrounds are the blue of the panels instead of black. The square corner marks on the rounded service cards are gone. The years in the career line are readable. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { BitAura } from "@/src/components/bits/BitAura";
|
|
import type { CareerStation } from "@/src/content/types";
|
|
|
|
/**
|
|
* CareerLine: the path so far as a line of light that draws itself, one station
|
|
* after another. Made for a dark surface.
|
|
*/
|
|
export const CareerLine: React.FC<{ stations: readonly CareerStation[] }> = ({
|
|
stations,
|
|
}) => (
|
|
<ol className="relative m-0 list-none p-0">
|
|
<BitAura
|
|
source="left"
|
|
tone="dark"
|
|
radius={0}
|
|
density={0.5}
|
|
className="absolute bottom-2 left-[5px] top-2 w-px md:left-[7px]"
|
|
>
|
|
<motion.span
|
|
className="block h-full w-px origin-top bg-indigo-100"
|
|
initial={{ scaleY: 0 }}
|
|
whileInView={{ scaleY: 1 }}
|
|
viewport={{ once: true, margin: "-15%" }}
|
|
transition={{ duration: 1.4, ease: "easeOut" }}
|
|
aria-hidden="true"
|
|
/>
|
|
</BitAura>
|
|
{stations.map((station, index) => (
|
|
<motion.li
|
|
key={station.years}
|
|
className="relative grid grid-cols-1 gap-1 pb-10 pl-8 last:pb-0 md:grid-cols-12 md:gap-8 md:pl-12"
|
|
initial={{ opacity: 0, x: -8 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-15%" }}
|
|
transition={{ duration: 0.4, delay: 0.15 + index * 0.18 }}
|
|
>
|
|
<span
|
|
className={`absolute left-0 top-1.5 h-[11px] w-[11px] rounded-full border-2 border-indigo-100 md:h-[15px] md:w-[15px] ${
|
|
index === stations.length - 1
|
|
? "bit-node-live bg-white"
|
|
: "bg-slate-900"
|
|
}`}
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="font-mono text-sm font-bold uppercase tracking-[0.14em] text-indigo-200 md:col-span-3 md:pt-1.5 md:text-base">
|
|
{station.years}
|
|
</span>
|
|
<span className="md:col-span-9">
|
|
<span className="block font-sans text-xl font-bold tracking-tight text-white md:text-3xl">
|
|
{station.role}
|
|
</span>
|
|
<span className="mt-1 block font-sans text-base text-slate-400 md:text-lg">
|
|
{station.place}
|
|
</span>
|
|
</span>
|
|
</motion.li>
|
|
))}
|
|
</ol>
|
|
);
|