# johnrush.me

Source: https://johnrush.me/
Captured: 2026-09-13
Tags: portfolio, landing, dark, both, minimal, dark-techno, technical, confident, raw, serious, cold
Colors: #060606, #2e2e2e, #4c4c4c, #6e6e6e, #909090, #b2b1b2, #d7d7d7, #efefef
Type (h1): Geist Mono · 24px/28.8px · 700 — "Hi, I'm John Rush!"
Type (h2): Geist Mono · 20px/24px · 700 — "In Twitter (X)"
Type (h3): Geist Mono · 18.72px/24.336px · 600 — "My directory guide"
Type (body): Geist Mono · 14px/22.4px · 400 — "Dropped out of AI/CS in Norway. Co-founded 7 VC-funded startups over a decade. S"
Type (button): Geist Mono · 0px/0px · 600 — "Buy now"
Button (primary): "Buy now" — text #ffffff, radius 0px, border 1px, padding 12px 64px, height 45px, type 0px/600
Button (secondary): "Profile" — text #ffffff, radius 0px, border 0px, padding 6px 0px 6px 16px, height 29px, type 0px/400
Radii: 9999px (15), 6.4px (2), 8px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/johnrush-me/hero.webp?v=d31a6128
- Hero (mobile): https://media.lvly.design/library/johnrush-me/mobile-hero.webp?v=6e580401
- Full page (desktop): https://media.lvly.design/library/johnrush-me/full.jpg?v=032a520b
- Full page (mobile): https://media.lvly.design/library/johnrush-me/mobile-full.jpg?v=0ddfbda0
- Clip preview (mp4): https://media.lvly.design/library/johnrush-me/video-yxwnnf.preview.mp4?v=e3d2674c

A personal founder site rendered as a terminal: near-black ground (#060606), every glyph set in Geist Mono at 14px, and a monochrome palette that goes no further than the gray ramp (#2e2e2e hairlines, #6e6e6e secondary text, #efefef text-white). The page is one 1440×900 viewport with no scroll — a rounded, 1px-bordered "window" sits inside the black canvas, split into a fixed left sidebar (wordmark in heavy stencil-style caps, a tree-style nav drawn with ┌ │ └ box-rule connectors) and a main column where a small square portrait, a monospace heading and a list of one-line credentials each prefixed by a left rule read like a README. A tonal card in the top-right (a single step lighter than the ground) sells the directory guide with an outlined square "Buy now" and a ghosted "Learn more ↗". Faint columns of digits scroll along the top and side edges like a data-readout. Everything is square-cornered and hairline-outlined: dashed-border chips for Newsletter / Email / X / in, 1px social-icon boxes, 1px dividers between text blocks. It is a dev-tool aesthetic with no gradient, no neon and no color at all — confidence expressed purely through typographic discipline.

## Steal-worthy details

- Tree-style sidebar nav: items joined by thin box-drawing brackets (a bracket opens at the first item, a vertical rule runs the list, a closing bracket at the last), turning a plain link list into a file-tree.
- Credentials as a rule-prefixed list: each fact ("24 products", "10M+ users on b2b2c") gets a 1px left border and monospace body, so the bio reads as a structured log rather than prose.
- Single-viewport "window" composition: a 1px-bordered rounded frame inset from a black page edge, with a fixed sidebar and a fixed-height main pane — the page is a screen, not a scroll.
- Decorative data-readout: faint vertical columns of digits along the canvas edges outside the window, adding texture without a single color or image.
- Dashed-border contact chips (Newsletter, Email, X, in) versus solid 1px outlined icon squares in the sidebar — two weights of outline do the whole button hierarchy.
- Primary CTA is a square, 1px white-outlined "Buy now" with wide 64px horizontal padding, paired with a ghosted low-contrast "Learn more ↗" — no fill anywhere on the page.
- Tonal layering with a single step: the guide card is only marginally lighter than the ground (#111-ish over #060606), and that one step is enough to make it read as a panel.
- Square 1px-bordered portrait with an inner padding gap, so the photo sits inside a frame like a terminal inline image.

## Style recipe

Build the page as a dark terminal window. Ground the whole viewport in #060606 (page) with a single inset "window" frame: 1px border #2e2e2e, 8px radius, offset ~40px from every edge; inside it, a fixed 250px left sidebar separated from the main pane by a 1px #2e2e2e rule. Set every piece of text in a monospace face ("Geist Mono", ui-monospace, monospace): headings 24px/700 with normal tracking, body 14px/400 at 1.6 line-height, secondary text at 12–13px in #6e6e6e, primary text in #efefef. Use no color beyond a gray ramp (#060606 → #2e2e2e → #4c4c4c → #6e6e6e → #909090 → #efefef); the accent is white itself. Zero radii on controls: buttons and chips are square with a 1px border — primary = solid #ffffff 1px outline, white text, 12px 64px padding, weight 600; secondary = dashed 1px #4c4c4c outline; tertiary = plain text in #6e6e6e with a trailing ↗ glyph. No fills, no shadows, no gradients. Draw navigation as a tree: a vertical 1px rule down the left of the list with short horizontal ticks at the first and last items, 12px gap between rows, 14px links in #909090 that go #efefef on hover. Structure content as rule-prefixed lists (1px left border #4c4c4c, 16px left padding) and separate blocks with 1px horizontal rules in #2e2e2e. Panels are one tonal step lighter than the ground (#0f0f0f–#141414) with no border and 24px padding. Frame images in a 1px #2e2e2e square with 16px inner padding, no radius. Optionally add ornament as faint monospace digit columns along the canvas edges at ~15% opacity. Keep the layout to one viewport where possible; prefer fixed panes over long scroll.