Preface — Chapter Zero

The professional
graph, redrawn.

Not a resume. Not a feed. A living structure of the people you've built things with — read the way a magazine reads, not the way a database reports.

Scroll ↓

Nine years of product design and backend engineering work spans Studio Atlas, Vector Labs, Nordhaus Studio, Meridian Analytics, Kent & Vale, and Lower Deck Games — design systems, data platforms, applied ML, and creative direction shipped alongside people like Rachel Kim, recruited by founding engineers and mentored through Series B growth teams, civic tech initiatives, and climate fund partnerships. Every room on this feed traces back to real work: robotics labs, field research, brand strategy, hardware teams, open source contributions, and ops & logistics built from the ground up, introduced through direct relationships rather than cold applications.

01 — The Room 02 — The Graph 03 — The Ledger 04 — The Assistant

01 — The Room

Opportunity is a conversation, not a listing.

Every open room here is introduced by the person already standing in it — what they're building, who they need, and why now. No keyword-matched postings, no cover letters into the void.

Enter the Room →

Studio Floor — Room 04

Weekly Review — In Progress

Studio Floor — Room 04

Weekly Review — In Progress

Studio Floor — Room 04

Weekly Review — In Progress

01 — The Room 02 — The Graph 03 — The Ledger 04 — The Assistant

02 — The Graph

Relationships are a structure, not a follower count.

Your graph renders as it actually exists — clustered by the work you shared, weighted by how recently you built together, not sorted by who posted today.

Enter the Circles →

Second-Degree Cluster

Second-Degree Cluster

01 — The Room 02 — The Graph 03 — The Ledger 04 — The Assistant

03 — The Ledger

Your influence, accounted for honestly.

Quarterly Reach — Reviewed

No vanity totals. Every number here traces back to a specific piece of shared work — reach that means something because you can name the room it came from.

Open the Dashboard →

Quarterly Reach — Reviewed

01 — The Room 02 — The Graph 03 — The Ledger 04 — The Assistant

04 — The Assistant

Help that stays in the margins.

A focused task-enabler, not a co-pilot that talks over you — drafting the follow-up, surfacing the one introduction worth making, then getting out of the way.

Open Workflows →

▶

Reel — 00:14

▶

Reel — 00:14

▶

Reel — 00:14

Feed

Everything moving across your graph — jobs, quotes, analytics, and shipped work. Click any card to read it in full on the right.

01→

Your graph just got tighter.

3 new intros through people you've actually built things with.

Network · This week

02→

Introduced by Rachel Kim

Founding Engineer, Applied ML

Nordhaus Studio — two active conversations already.

Job · 2d

03→

"The room shows you exactly who, before you apply."

— on Vector Labs, Growth Lead

Quote · Studio Atlas

04→

62% of visitors stopped at your Work.

Anonymous by design — patterns, never names.

Analytics · This week

05→

Meridian Analytics liked your rebuild.

Dashboard nobody used, until now.

Case Study · 4 reactions

06→

New room opened

Ops & Logistics Manager

Kent & Vale — closes after three conversations.

Job · 3w

07→

"Nine hours up, and the story starts before takeoff."

— Altitude Airlines campaign

Quote · Commercial

08→

Drafted, not decided for you.

A focused task-enabler, not a co-pilot.

Workflows tier · Coming soon

09→

"A typeface built from anatomy, not habit."

— Dana Foundation, brand + type system

Quote · Brand

10→

Studio Atlas shipped the design system you reviewed.

12 collaborators, one shared language.

Update · 5d

11→

Your Saved

2 items saved this week

Right-click any card to add more.

Saved · Reminder

12→

Static Ground — 100K streams this week.

Parallax's new single, mixed by people in your graph.

Music · Milestone

Circles

— of 128 connections shown

Range

Inner ⟷ Outer

Archetype

Responsiveness

Top 4

Peer

Hiring Mgr

Recruiter

Mentor

Warm / Considered

Casual / Light

Cold / Ghosted

Drag empty space to pan · Drag a node to reposition it · Scroll to zoom · Click a node to open

Concept & Technical Brief — Circles

Circles isn't a contacts list. It's the instrument panel for how you actually work a network.

What it's for, how it's visually encoded, and how the control layer gives someone real leverage over their own graph rather than a fixed view of it.

01 — The reframing

Job search, outreach, and engagement are usually three separate apps. They're one relationship.

Most products that touch "your network" pick one lens and ignore the other two. A CRM tracks outreach but has no idea what you've actually shipped with someone. A contacts list shows who you know but nothing about temperature — it can't tell a person you talk to weekly from one you emailed cold eight months ago and never heard back from.

Circles treats those as the same underlying graph, viewed one way. A cold recruiter outreach, a warm collaborator from a shipped project, and a person whose posts you keep engaging with are all just nodes with different edge properties — not three separate systems that happen to share a UI.

02 — Why a node graph

The rest of this site already breaks from rigid page structure. Circles takes that furthest.

Home and Feeds are both, underneath their Mondrian framing, infinite pannable canvases — not paginated lists pretending to be something more dynamic. Circles pushes that same instinct all the way: a force-directed graph, full-bleed, with the bento framing shrunk down to a thin instrument panel around it rather than the dominant structure.

The panel doesn't disappear — the grid lines, hairline rules, and mono labels that define this site's visual language are still there, framing the graph the way a cockpit frames a windscreen. But the graph itself is physics, not HTML flow.

03 — What a node is

Shape and border carry real information, not decoration.

Every node encodes two independent facts at a glance: what kind of relationship this is (shape) and how close it sits to you (border). Nothing relies on color — the whole site stays strictly monochrome, so archetype had to be legible in silhouette alone.

Archetype → shape

PeerBuilt something together, or shares a room

Hiring managerOn the deciding side of a role

RecruiterAn intermediary — routes you elsewhere

MentorAdvisory — no open loop to close

Proximity → border

Inner circleSolid border, first-degree

Outer circleDashed border, second-degree or early-stage

Fill follows the same logic — inner and "you" render solid, outer renders hollow, so density near center is legible before reading a label.

04 — What an edge is

The responsiveness spectrum is the part that replaces a CRM.

Every connection sits on a six-point scale, and the line itself communicates it. Warmer relationships pull harder in the physics — a real spring-strength difference, not just a visual one.

WarmSolid, full opacity

ConsideredSolid, slightly faded

CasualDashed, occasional contact

LightDashed, faint

ColdDotted + arrow — sent, no reply

GhostedSame, further faded

The arrow on cold and ghosted edges matters: those aren't mutual relationships rendered dimly, they're outreach that hasn't been reciprocated. If someone replies, the edge resolves — dashed and directional becomes solid and undirected. The graph doesn't just display the pipeline, it is the pipeline.

05 — Agency, not filters

Every control changes the simulation itself, not just what's dimmed.

The instinct with most "network" tools is to bury the ranking logic behind a search bar. Circles does the opposite: the controls are the algorithm, exposed directly.

Range

Sets which degree of connection is even loaded, not just shown. Narrowing to "1st" removes second-degree nodes from the simulation entirely.

Inner ⟷ Outer bias

A literal radial force added to the physics each frame — a camera control over the simulation, not a toggle over a static image.

Archetype

Isolate peers, hiring managers, recruiters, or mentors — "who do I know that could vouch for me at a company that's hiring."

Responsiveness

Filter straight to the cold or ghosted end. This is the control that turns a pretty graph into an actual to-do list.

06 — How it's actually built

Hand-rolled physics on canvas — not a graph library bolted on.

This site already leans on canvas for anything that needs to feel physical rather than templated — the particle-field hero, the infinite pannable card grids. Circles follows the same discipline.

Force simulation

Pairwise repulsion, spring attraction along each edge (strength set by responsiveness), a gentle pull to center, and a user-controlled radial bias on top.

Canvas rendering, not DOM nodes

Redraws every frame at 2D canvas speed — the only way this stays smooth while panning, zooming, and dragging at once.

One anchor point

The "you" node is the single fixed point. Drag any other node and it pins under the cursor, then releases back into the physics on let-go.

Shared interaction language

Clicking any node opens the same poster panel used for every other card on the site — a new way to browse the network, not a separate product.

07 — Scope, honestly

What this is now, and what it deliberately isn't yet.

In scope for this pass

Full node/edge visual system, all six responsiveness states
Real physics-backed range, bias, archetype, and responsiveness controls
Pan, zoom, node drag, click-to-open on every node
Populated with representative people, not empty scaffolding

Deliberately deferred

The 3D globe as a geographic counterpart view — a toggle between "relationship space" and "map space"
Real connection counts — demo data doesn't match the "128 connections" figure shown elsewhere yet
Automatic responsiveness scoring from real interaction history

Dashboard

Every metric here is available on the free tier — no paywall, no "upgrade to see who viewed your profile."

Profile views

1,204

↑ 18% vs last week

Avg. session

2m 14s

Content impressions

8,940

Weekly reach

Top regions

Northeast US34%

West Coast22%

Europe18%

Other26%

Connections growth

+12

this month

Engagement

6.8%

Referral sources

Network intros41%

Direct33%

Search26%

Viewed most

Work — Case studies62%

Résumé24%

Media14%

Session detail

Pages / session3.4

Bounce rate28%

Return visitors41%

Device split

Desktop58%

Mobile36%

Tablet6%

Peak activity

Tue, 2–4pm

Busiest window this month

People who viewed you also viewed

Concept & Technical Brief — Workflows

Not a co-pilot that talks over you. A task-enabler that drafts one thing, then gets out of the way.

What Workflows is meant to be, why it's locked behind a tier rather than shipped half-built, and what's actually running behind that iframe right now.

01 — The reframing

Most "AI in your professional network" ideas mean a chatbot bolted onto the sidebar. This isn't that.

The easy version of an AI feature here would be a chat window that answers questions about your network. That's a demo, not a workflow — it asks you to go start a conversation with it, which is one more thing competing for attention, not less.

Workflows is named deliberately, not as a euphemism for "agents." The bar for anything living here is narrow: does it do one bounded task and then stop, or does it want to become a running conversation you have to manage.

02 — Task-enabler, not co-pilot

Drafting the follow-up. Surfacing the one introduction worth making. That's the whole shape of it.

A co-pilot wants to sit in the loop continuously — reading everything, commenting on everything, present by default. A task-enabler shows up for one job, does it, and disappears until called again.

Concretely: after a conversation with someone in Circles goes quiet, a workflow could draft the follow-up message so the blank page isn't the reason it never gets sent. Or, looking at the graph, it could flag the one introduction actually worth making this week, instead of a daily digest nobody reads.

03 — Why it's locked, not just "coming soon"

A tier gate here is a design decision, not a marketing one.

Everything else on this site — Feeds, Circles, General Assembly — works the same whether you're a free or paid user; the tiers mostly gate scale, not capability. Workflows is the one place that's actually different: it costs real inference time per action, so it's the one surface where "locked" is honest rather than a paywall dressed up as a feature.

That also means it's the wrong place to fake completeness. Better to show what's real — a working embed, a clear concept — than dress up a static screen as a finished product.

04 — What's actually behind the iframe

This is a real, separately-hosted demo, not a screenshot pretending to be a product.

The panel on the left is a live embed, not a static mock — it's a genuine, standalone build, kept exactly as it was rather than absorbed into this site's own codebase.

That separation is intentional here specifically: Workflows is the one part of this concept furthest from settled, so it stays in its own sandbox instead of getting wired into the shared systems the rest of this site leans on.

05 — How it's built

Same split-panel treatment as Circles and General Assembly — reused, not reinvented a third time.

The draggable divider and this scrolling brief panel are the exact shared mechanism built for Circles' graph and General Assembly's photo wall, just pointed at an iframe instead of a canvas.

Shared split-resize engine

The same drag-to-resize handle and custom scrollbar used on both other pages, extended rather than duplicated a third time.

The iframe is untouched

No new resize callback was needed — an iframe already fills whatever box it's given at 100% width and height, unlike the canvas grid, which needed its own fix for exactly this.

06 — Scope, honestly

What this is now, and what it deliberately isn't yet.

In scope for this pass

The same column layout and concept brief as Circles and General Assembly
A real, working iframe embed — not a static placeholder image
Honest framing: this tier is locked because the capability is genuinely different, not as a growth trick

Deliberately deferred

Any actual drafting or introduction-surfacing logic — right now this is concept and placeholder, not a working feature
Integrating the embed's own UI with this site's shared design system, rather than leaving it as its own sandbox

Concept & Technical Brief — General Assembly

This isn’t a skills page dressed up as a gallery. It’s the one place on this site built to be looked at, not read.

What it’s for, why it breaks the site’s monochrome rule on purpose, and how the interaction here is deliberately different from every other card on the site.

01 — The reframing

A repertoire of buzzwords turned into a photo wall would have been the safe version of this page.

General Assembly could have stayed a grid of skill-tags and case-study fragments — useful, but easy to skim past without feeling anything. Recasting it as a photo wall does something a tag cloud can’t: it makes the page worth lingering on for its own sake, not just for what it proves.

The images aren’t illustrations of a skill list sitting somewhere else. They’re the actual raw material here — a genuine change in what this page is for, not a reskin of what it looked like before.

02 — Why an infinite canvas

The same pannable, tiled surface as Home and Feeds — the site’s native format, not a special case.

Every major browsing surface on this site already breaks from a scrolling list in favor of an infinite, pannable grid. General Assembly doesn’t introduce a new interaction model — it just points that same camera at photography instead of text.

That consistency matters more than it looks: someone who’s already learned to drag-pan Feeds or Home doesn’t have to relearn anything to use this page.

03 — What a tile is

Full color, full bleed — the one deliberate exception on a monochrome site.

Every other surface here stays strictly black, white, and gray, including photography used elsewhere on the site. This page is the single place that breaks that discipline on purpose.

No grayscale filter, no desaturation. Each tile is a real photograph, cropped to fill its cell edge-to-edge, with a small index number as its only chrome. The restraint everywhere else is exactly what makes the color here read as a decision, not an oversight.

04 — What happens on interaction

Hover lifts a shadow. Click opens an invitation, not a data sheet.

Every other clickable card on this site opens the same wide poster panel — kicker, headline, tag row, related pathways. This page deliberately doesn’t. Hovering a tile just deepens its shadow and lifts it slightly, a pure elevation cue with nowhere to click through to yet.

Clicking opens a small, centered card sized closer to an actual postcard than a sidebar — the photo up top, a caption set in italic serif underneath, nothing else competing for attention. It’s meant to feel like being handed something, not like opening a record.

05 — Real controls, not decoration

Grid size and image gap both touch the actual layout math, not a filter.

Two sliders live in the bottom drawer: grid size, which changes the tile dimensions used by the same panning physics as every other canvas grid on the site, and image gap, deliberately built as an independent control rather than tied to that same scale — so density and size can be tuned separately.

Neither is cosmetic. Move either one and the whole tiled pattern recomputes and re-centers live.

06 — How it’s actually built

One shared grid engine, extended with two small hooks rather than forked.

This page runs on the exact same panning, zoom, and tiling engine as Home and Feeds — not a parallel implementation that happens to look similar.

Shared canvas-grid engine

Two small opt-in hooks were added to support this page — a custom tile renderer for full-bleed images, and a custom click handler — both inert unless a page explicitly asks for them.

Deduplicated source set

The photo pool was pulled from a longer list that included the same images uploaded twice in different formats. Each appears once.

The postcard is a separate object

Rather than resizing the site’s shared poster panel down to postcard scale, this page opens an entirely separate, smaller overlay — so the panel used everywhere else stays exactly as it is.

Independent margin control

Image gap required a small addition to the shared grid engine itself — previously, spacing was locked to the same scale as tile size. It’s now a separate multiplier any grid can opt into.

07 — Scope, honestly

What this is now, and what it deliberately isn’t yet.

In scope for this pass

Full-color infinite canvas populated with real photography, not placeholders
Independent grid-size and image-gap controls
A distinct postcard-style interaction, separate from the site’s shared panel
Deduplicated from the original source list — one image per photo

Deliberately deferred

The social-wall version — aggregating contributions from people in your Circles, weighted by relationship preference, not just your own photography
Per-photo captions and context, rather than a small rotating set of placeholder lines
Contributor attribution, once this becomes genuinely multi-person

Grid size

13px SHIFT+SCROLL

Image gap