Colophon

Everything here is a flow, and I build the gates: the rules that decide what may pass, how much, and what must keep running.

Background scene

Aurora flow

Ribbons of light drift across the page like a river seen at night. Move your pointer and they bend around it.

Used on: The top of the home page, and Contact.

Background scene

Data river

Requests stream through five lanes to a row of gates. Three gates are open, the permit; requests in the other lanes slow, turn red and fade before the gate. Your pointer parts the stream.

Used on: The CMDB section and the CMDB case study.

Background scene

Live circuit

Board traces cross the page and pulses of light run along them, lighting the pads they reach. Your pointer sends a pulse from the nearest pad.

Used on: Projects, experience and skills, and every project page.

Palette

Dark by default: deep indigo night, lit by the scene behind it. Light on request: lilac white. Text is always ink; the colours are marks, fills and lines, and each one means one thing.

Dark

bg #0B0B24
Deep indigo night, and lilac white
surface #14153A
Panels and fields: the calm plate text sits on
ink #ECEBFF
Text
ink-2 #A6A4CC
Secondary text
violet #9A70FF
Actions and keyboard focus
cyan #22D3EE
Signal: links, data, pulses
mint #34E3A4
Flowing, open, shipped, available
amber #FFB547
Filling, in progress, near a limit
red #FF5A6A
Refused, held, full
pink #DC38AB
Marks you: your packet, hover and selection

Light

bg #F4F3FF
Deep indigo night, and lilac white
surface #FFFFFF
Panels and fields: the calm plate text sits on
ink #15142E
Text
ink-2 #4E4C6E
Secondary text
violet #6D3FF0
Actions and keyboard focus
cyan #0A7C93
Signal: links, data, pulses
mint #1C9C82
Flowing, open, shipped, available
amber #A86400
Filling, in progress, near a limit
red #C42340
Refused, held, full
pink #F53DBE
Marks you: your packet, hover and selection

Text contrast on the page, dark / light: ink 16.5 / 16.3; ink-2 8.1 / 7.4; violet 5.6 / 5.3. Mint, amber, red and pink were checked against each other under simulated protanopia and deuteranopia (Machado 2009, CIELAB): every pair stays above a difference of 20, and the closest is 21.8. Status also shows as a level, so colour is never the only signal.

Every gauge, with its word

Shipped
Open
In progress
Filling
Planned
Closed
Refused
Held

Shipped
Open
In progress
Filling
Planned
Closed
Refused
Held

Typefaces

Soham Kulkarni

Unbounded 800: the name and page titles. Wide and engineered.

I build the rules that decide what a system lets you create.

Unbounded 600 for section titles.

Geist sets the text: 17 px on a 1.6 line height, lines under 68 characters. Clear at every size, and at home next to code.

Geist 400 and 600.

php artisan licence:check --gate=A

Geist Mono, for code and small technical labels.

Elements

Permit: 3 gatesCounted: 286 days

Select

A disclosure

A small gate lifts as it opens.

A panel: the solid plate that demos sit on, in front of the moving scene.

Permit: 3 gatesCounted: 286 days

Select

A disclosure

A small gate lifts as it opens.

A panel: the solid plate that demos sit on, in front of the moving scene.

The theme switch sets the whole site:

AutoLightDark

Motion, and the job of each effect

Effect	Trigger	What it does
Background scenes	Scrolling to a new part of the site	The scene behind the page crossfades over 900 ms to the one that part of the site owns.
Opening a gate	Gate press	The gate lifts and packets start to flow down its channel.
Refusal	A gate past the permit, or one sharing a channel	The gate pulses red three times; nothing else moves; the reason appears in words.
Name	Page load	The letters of the name resolve into place over 700 ms. The only motion you did not ask for.
Level counter	A number enters view	A small gauge rises as the real number counts up.
Button	Press	The button fills from the bottom; a confirmed action carries a mint tick.
Theme switch	Theme change	The violet thumb slides; colours fade over 240 ms.

The background stops when the tab is hidden and when you press Pause background, and with reduced motion it is a still picture. Nothing flashes.

Stack and credits

Astro for static pages, React islands only where state changes, Tailwind CSS with hand-written elements, and TypeScript. The scenes are plain TypeScript drawing to one canvas. The licence and allocation rules are a plain TypeScript engine with Vitest tests; React only draws its state. Hosted on Cloudflare Pages, with one small function for the contact form.

Fonts, all under the SIL Open Font Licence: Unbounded, Geist and Geist Mono.