Developer portfolio · Dark

Swarm

A portfolio that builds itself in front of the visitor: a swarm of multiplayer cursors draws wireframe boxes with measurements, fills in and snaps each block into place until the final page, dark and red, is ready.

Palette

--bg#121111
main near-black graphite background
--bg-2#1B1A1A
panels, project cards, table rows
--red#E1251B
accent: period at the end of titles, large numbers, primary button, rim light of the photo
--red-deep#6C140E
giant word behind the portrait, background gradients
--text#F2F0EE
titles and main text
--text-2#8C8A88
descriptions and metadata
--line#2C2B2A
1px dividers and borders
--blueprint#1F6FDB
wireframe outlines, measurement labels and "tour" button (slightly darkened from #2F80ED so the white text on the labels passes 4.5:1)

Typography

Display: condensed grotesque, black weight (800–900), UPPERCASE, tracking -0.01em, line-height 0.9; clamp(40px, 6vw, 96px) for titles and ~16vw for the hero's background word; every title ends with a red period — suggestions: Anton / Oswald 700.
Body: neutral grotesque 13–14px, weight 400, light gray — suggestions: Inter / Geist.
Support/labels: mono 9–10px uppercase with 0.06em tracking for section numbering ("01 / ..."), wireframe measurements and bottom bar status — suggestions: JetBrains Mono / Geist Mono.
Treatments: handwritten cursive italic greeting above the name (Caveat / Nanum Pen Script); large tabular numbers in red for statistics; giant red word cut out behind the portrait.

Sections

Build bar (fixed, bottom) — colored dots of the agents, counter of agents and assembled layers, progress bar, blue "on tour" button, skip/replay controls.
Nav — condensed logo with a red icon on the left, 4 centered links with a red dot on the active one, "let's talk ↗" link on the right.
Hero — handwritten greeting + giant condensed name + job title in red + paragraph + red button; cut-out portrait in the center with red side light and an enormous dark-red word behind; right column with a short quote and three statistics (red number + mono label).
Projects — mono label, condensed title with a red period, "all projects" link; filter tabs + search; 3 cards with a product screenshot, large red number, name and category/year, ↗ arrow.
Draft → product — 2-line condensed title (2nd in red), paragraph; comparison slider with a draggable red circular handle between a gray wireframe and the final interface.
About/tools — row of tool icons, numbered list with short texts and a red highlight block.
Career — condensed title; row timeline (year on the left, role + company, "+" to expand); right column with a list of live projects.
Contact — 2-line condensed title, paragraph, circular red link; list of channels with a circle icon and arrow; tilted "built live" card with a red replay button; expandable field "tell me about your project +".
Footer — logo, mono legal line, small icons and "back to top".

Motion and interaction

Page that builds itself: load/scripted sequence (GSAP timeline) → cursors enter from the edges, draw blue rectangles with a measurement label (e.g. "440 × 18"), type the text letter by letter, fill in colors and disappear; each block ends with a "snap" (scale 1.02 → 1, 120ms).
Swarm of cursors: continuous → 15–30 white/colored arrows with a name label, moving along bezier curves with power2.inOut easing and a small latency between them, like multiplayer.
Layer counter: the bottom bar adds up assembled layers (e.g. 96/211) and active agents in real time.
Tour: "on tour" button → automatic scrolling section by section while the build happens; user scroll interrupts the tour.
Comparison slider: drag/scroll → clip-path inset shows the wireframe on the left and the final UI on the right; red handle with arrows.
Portrait with light: cursor → slight parallax of the portrait (±8px) and the background word (±16px) in opposite directions.
Card hover: ↗ arrow shifts 3px diagonally; border becomes #3A3938.
Replay: red button restarts the build timeline.

Components

Wireframe box: rectangle with a 1px --blueprint border, 5px square handles at the corners, 9px mono measurement label in a blue pill.
Agent cursor: 14px white SVG arrow with a black outline + colored name pill.
Red button: rectangle with 2px radius, --red background, 11px text, ↓ or → arrow.
Statistic: 40px red condensed number + 2-line 9px mono label.
Project card: 16:10 screenshot with 6px radius, 36px red number, 13px uppercase name, mono meta.
Timeline row: mono year on the left, 14px role, 11px gray company, "+" on the right, --line divider.
Contact channel row: 28px circle icon with a border, mono label, 14px value, ↗ arrow.
Build bar: fixed dark pill at the bottom with avatars, counters, progress and buttons.