/brand

The brand book

One dark theme, one indigo→cyan accent, and everything built on top of it. This is the reference I check before adding a section — so a new page looks like it belongs, rather than nearly matching.

Unlisted and noindexed. If you're reading it, you went looking.

01 — Colour

Ten tokens, one gradient.

Two accents and five greys. Every colour on the site is a token in globals.css — nothing is a raw hex in a component.

--color-bg

#07080b

page

--color-bg-elevated

#0d0f14

raised panels

--color-surface

#111319

cards

--color-border

rgba(255,255,255,0.08)

hairlines

--color-border-strong

rgba(255,255,255,0.14)

buttons, dividers

--color-fg

#e7e9ee

body text

--color-muted

#9aa0ac

secondary text

--color-faint

#767c8b

captions — 4.79:1, AA

--color-accent

#818cf8

primary accent

--color-accent-2

#22d3ee

gradient end

accent gradient

.text-gradient

Daniel Hadaway

.bg-grid

02 — Typography

Inter and JetBrains Mono.

Inter for reading, JetBrains Mono for anything that wants to look like code — eyebrows, terminals, metrics.

Ship it.

display — 48/600

Real products, shipped end to end.

h2 — 30/600

Darras Index

h3 — 20/600

I build scalable software across .NET, mobile and the modern web.

lead — 18/400 muted

Ten years of shipping, and the bit I still care about most is the code the next engineer has to read.

body — 16/400 muted

02 — Featured work

eyebrow — mono 14 accent

npm run build

code — mono 14 faint

03 — The mark

<DH/>, in three weights.

wordmark — header

mark — solid

<DH/>

mark — gradient

<DH/>

04 — Buttons

Shine, swirl, press.

Two CTAs, one shine and one swirl. Both dip on press so a tap feels like a press, not a page jump.

primary — .btn-shinehover: highlight sweeps L→R

secondary — .btn-swirlhover: gradient fills, then rotates

pressed — :activeevery CTA dips to 0.96

text link — navhover: underline wipes in from the left

Projects

utility — outlineused in the card studio

utility — solid accent

05 — Components

The parts everything is built from.

The primitives every section is assembled from. If a new bit of UI needs inventing, it starts here.

tech chips

.NET 8
ASP.NET Core
EF Core
PostgreSQL
Next.js
React Native

skill chips

C#
.NET 8 / .NET Core
ASP.NET Core Minimal APIs
EF Core
MediatR / CQRS

WipBadge

Work In Progress

CopyEmailflips to ✓ for 2s

metrics + Countercounts up in view

years shipping

conversion lift

known bugs*

LighthouseScores

danielhadaway.dev — mobile

100

Performance

100

Accessibility

100

Best practices

100

SEO

ProjectPreviewhover: shine + 5% zoom

www.covertime.com

BeforeAfterdrag, click or arrow keys

icons — inline SVG, no dependency

AppWindow

ArrowRight

BadgeCheck

BookOpen

Briefcase

Building

Calendar

Check

Checklist

ChevronDown

Clock

Code

Copy

Download

External

GitHub

Google

Home

Image

Layers

Layout

Lifebuoy

Mail

Palette

Pen

Refresh

Rocket

Smartphone

Strava

Target

User

Users

Warning

Wrench

Zap

06 — Motion

Fade, rise, once.

Everything fades and rises the same way, once, on scroll. All of it honours prefers-reduced-motion — the site should still be usable if motion makes you queasy.

<Reveal> + <Stagger>0.55s, ease [0.22, 1, 0.36, 1]

First

Second

Third

<Confetti>fires on jackpots and egg milestones

grid warpmove the cursor over it

snowcanvas flakes, settling on [data-snow]

Projects

Writing

December to February the same simulation runs across the whole page, and the nav grows a snowflake to turn it off. Out of season it stays in this box.

reduced motionprefers-reduced-motion: reduce

Reveals resolve instantly, the shine and swirl stop moving, and the image zooms hold at 100%. Nothing is lost but the movement.

07 — Easter eggs

Ten of them, if you count.

Ten instrumented eggs, hidden across the site for anyone who reads the source or pokes at the keyboard. Firing them here counts towards your tally — a shortcut you've arguably earned.

The terminal

Type a command anywhere on the site — no input box, just start typing. help, whoami, ls, coffee, slots.

Matrix rain

Green rain down the whole page, because of course there is. Toggles from the egg-hint menu.

Asteroids

A full canvas shooter that only downloads when you press play — it's not in the main bundle.

The climb

A platformer where the page is the level — bounce a lost semicolon from the footer back up to the title, using the real headings and paragraphs as ledges.

The Konami code

↑ ↑ ↓ ↓ ← → ← → B A, same as it's always been. There's an on-screen NES pad for anyone on a phone.

Command palette

⌘K or Ctrl+K. Jump to any section, page or case study, or fire an action — CV, email, LinkedIn. No cmdk dependency, just a filtered list.

The console

Open DevTools and the console greets you with an ASCII robot, the stack as a table, and a hire() function that actually returns something.

It notices DevTools

Dock the inspector and a note slides in acknowledging it. A size-gap heuristic, not a library.

Tab heckle

Switch to another tab and the title starts begging. Come back and it forgives you.

Scroll trophy

Reach the footer and you get a trophy for reading the whole thing. Most people don't.

The wordmark

Right-click the <DH/> in the header for a menu that isn't the browser's.

The theme toggle

Looks like a dark/light switch. Press it and it heckles you, then gets up and runs around the screen rather than let you have light mode. One dark theme, always on.

08 — Business card

The Terminal design.

The Terminal design from the card studio, the one I actually print. Six exist; the rest are at /card.

85 × 55 mm, drawn as SVG and rasterised at 600 dpi in the browser. All six designs →

09 — Share cards

How it looks pasted into Slack.

What the site looks like pasted into Slack, LinkedIn or iMessage. Case-study cards are generated at build time from the project's own accent gradient.

Default Open Graph card — /og.png — 1200 × 630, the site-wide default

Darras Index share card — /darras-index/opengraph-image

Serendipity Life share card — /serendipity-life/opengraph-image

Popcorn Simulation Gaming share card — /popcorn-simulation-gaming/opengraph-image

Split Lip Adventures share card — /split-lip-adventures/opengraph-image

Tiny Tails Pet Care share card — /tiny-tails-pet-care/opengraph-image

Wakoos Centre4Children share card — /wakoos/opengraph-image

Skin Defence share card — /skin-defence/opengraph-image

/icon.svgfavicon + schema.org logo

metadatasrc/app/layout.tsx

Daniel Hadaway — Software Engineer
summary_large_image · @graph JSON-LD · RSS