ramintahbaz.com

A design engineer's portfolio that is nothing but the work: a near-black (#151515) canvas, no headline, no intro paragraph, and a three-column masonry of 12px-radius media cards running edge to edge under a single line of chrome. That line, a one-row status strip of avatar, city, live weather and two ticking airport-code clocks set in monospace, does all the identity work a hero would normally do, and does it with the quiet confidence of a system readout. The cards carry autoplaying clips and screenshots of interaction experiments, product work and film, each captioned in white Geist on the left with a gray monospace date on the right, so color arrives only through the work itself: macOS-wallpaper oranges, blue swooshes, warm film stills. A small floating segmented filter pinned to the bottom-left lets you slice the grid by discipline without ever adding a header.

Build on a near-black canvas, #151515 to #161616, and let the content supply all color; the interface itself stays monochrome: white #fdfdfd for primary text, a warm gray around #74706e for metadata, #504c4c for icons at rest. Set everything in Geist (body 16px/24px at 400, UI labels 12px/500, controls 11px/500) and pair it with a monospace face for every number, timestamp and date so data reads as a readout. Skip the hero: put identity in a single slim top row of avatar, location, live weather and live clocks labeled with airport codes, plus a few icon links, and start the work immediately below it. Lay out the work as a staggered three-column masonry with ~12px gutters running nearly edge to edge (~24px page margin). Every tile is a 12px-radius card with a 1px dark hairline and its media inset ~3px inside it, like a bezel; caption it directly on the media over a bottom scrim with the title in white sans on the left and a gray monospace date or action on the right. Use 12px for cards, 8px for controls and full pills only for tiny chips. Filtering lives in one small floating segmented control fixed to the bottom-left: a dark capsule with a hairline border, with the active segment as a solid white #ffffff pill and #1a1a1a text, 4px 12px padding. While media loads, show bezeled tiles with blurred caption ghosts rather than spinners. If a single accent is needed, take a warm amber like #f4ae3e (or the deeper #dc7d2e) and spend it on one tiny glyph or state, never on a surface.