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

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:
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
+15 -10
View File
@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { BitAura } from "@/src/components/bits/BitAura";
import { DecodeText } from "@/src/components/bits/DecodeText";
import { Block } from "@/src/components/home/Block";
import { ClosingCta } from "@/src/components/home/ClosingCta";
@@ -109,9 +110,11 @@ export default function LandingPage() {
</p>
</PortraitSection>
<section className="bg-white">
<div className="mx-auto w-full max-w-[1400px] px-5 py-16 md:px-12 md:py-28">
<p className={`${MONO} m-0 mb-10`}>The path so far</p>
<section className="relative overflow-clip bg-slate-900">
<div className="mx-auto w-full max-w-[1400px] px-5 pb-20 pt-4 md:px-12 md:pb-36 md:pt-0">
<p className="m-0 mb-10 font-mono text-[11px] uppercase tracking-[0.2em] text-slate-400">
The path so far
</p>
<CareerLine stations={CAREER} />
</div>
</section>
@@ -257,9 +260,11 @@ export default function LandingPage() {
}
>
<Reveal>
<div className="mb-16 overflow-hidden rounded-3xl bg-slate-900 p-4 md:mb-24 md:p-10">
<ContactDiagram />
</div>
<BitAura source="bottom" tone="light" className="mb-16 md:mb-24">
<div className="overflow-hidden rounded-3xl bg-slate-900 p-4 md:p-10">
<ContactDiagram />
</div>
</BitAura>
</Reveal>
<div className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 md:gap-y-16">
{PRINCIPLES.map((item, i) => (
@@ -278,17 +283,17 @@ export default function LandingPage() {
<Block
index="06"
label="My work"
tone="dark"
title={
<>
Two sites I built. <span className={MUTED}>Both are live.</span>
Two sites I built.{" "}
<span className="text-slate-500">Both are live.</span>
</>
}
>
<WorkShowcase items={WORK} />
<Reveal>
<p
className={`${BODY} mt-20 max-w-3xl border-t border-slate-200 pt-8 md:mt-28`}
>
<p className="m-0 mt-20 max-w-3xl border-t border-slate-800 pt-8 font-sans text-lg leading-relaxed text-slate-300 md:mt-28 md:text-xl">
Besides client work I build my own software, among other things a
system in Rust and Solidity that runs on seven blockchains.
</p>