mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat: binary glow effects, refined drawings and calls to action

Browse Source 
Dark surfaces now carry light: frames glow along their edge and shed binary
digits (BitAura), dark sections open with a lit seam (BitSeam), the career
path is a line of light and "My work" became a dark stage. Buttons carry a
travelling light and a spot that follows the pointer (BitGlow).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mmintel
2026-10-04 13:07:09 +02:00
co-authored by Claude Opus 5.5
parent e9f05b02fc
commit e89a248ca5
21 changed files with 1532 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/illustrations/CareerLine.tsx
+26 -15
View File
@@ -2,6 +2,7 @@
import * as React from "react";
import { motion } from "framer-motion";
import { BitAura } from "@/src/components/bits/BitAura";
export type CareerStation = {
readonly years: string;
@@ -10,21 +11,29 @@ export type CareerStation = {
};
/**
* CareerLine: the path so far as a line that draws itself, one station after another.
* 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">
<motion.span
className="absolute left-[5px] top-2 w-px origin-top bg-slate-900 md:left-[7px]"
style={{ bottom: 8 }}
initial={{ scaleY: 0 }}
whileInView={{ scaleY: 1 }}
viewport={{ once: true, margin: "-15%" }}
transition={{ duration: 1.4, ease: "easeOut" }}
aria-hidden="true"
/>
<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}
@@ -35,19 +44,21 @@ export const CareerLine: React.FC<{ stations: readonly CareerStation[] }> = ({
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-slate-900 md:h-[15px] md:w-[15px] ${
index === stations.length - 1 ? "bg-slate-900" : "bg-white"
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-[11px] uppercase tracking-[0.2em] text-slate-500 md:col-span-3 md:pt-1.5">
<span className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-400 md:col-span-3 md:pt-1.5">
{station.years}
</span>
<span className="md:col-span-9">
<span className="block font-sans text-xl font-bold tracking-tight text-slate-900 md:text-3xl">
<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-500 md:text-lg">
<span className="mt-1 block font-sans text-base text-slate-400 md:text-lg">
{station.place}
</span>
</span>