# ramintahbaz.com

Source: https://www.ramintahbaz.com/
Captured: 2026-10-30
Tags: portfolio, landing, dark, both, bento, minimal, dark-techno, technical, confident, calm, premium, human
Colors: #121111, #f9f9f9, #abaaa7, #d4d1ce, #909083, #f4a137, #2b2b2c, #727168
Type (small): Geist · 12px/18px · 500 — "Washington, DC"
Type (button): Geist · 11px/16.5px · 500 — "All"
Button: "All" — fill #ffffff, text #1a1a1a, radius 8px, border 0px, padding 4px 12px, height 25px, type 11px/500
Radii: 12px (28), 8px (6), 9999px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/ramintahbaz-com/hero.webp?v=e79b5ec7
- Page crop (mid-1): https://media.lvly.design/library/ramintahbaz-com/mid-1.webp?v=4813c80c
- Page crop (mid-2): https://media.lvly.design/library/ramintahbaz-com/mid-2.webp?v=a54b443b
- Hero (mobile): https://media.lvly.design/library/ramintahbaz-com/mobile-hero.webp?v=61802282
- Full page (desktop): https://media.lvly.design/library/ramintahbaz-com/full.jpg?v=b250fbd8
- Full page (mobile): https://media.lvly.design/library/ramintahbaz-com/mobile-full.jpg?v=a61aec3d
- Clip preview (mp4): https://media.lvly.design/library/ramintahbaz-com/video-y82769.preview.mp4?v=c0d2f13d

A design engineer's portfolio that is nothing but the work. It has a near-black (#161616) canvas, no headline and no intro paragraph, just a three-column masonry of 12px-radius media cards running nearly edge to edge under a single line of chrome. That line is a one-row status strip: avatar, city, live weather and two ticking airport-code clocks set in monospace. It does all the identity work a hero normally would, with the quiet confidence of a system readout. The cards carry autoplaying clips and screenshots of interface experiments, fintech product work and, further down, film and commercial stills. Each is 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 and blues, a gold electric border, warm cinematic grades. A small floating segmented filter docked bottom-left slices the grid by discipline, so the page never needs a toolbar.

## Steal-worthy details

- Status-bar header instead of a hero: avatar, "Washington, DC", an amber sun glyph with 54°F, then "DCA 01:02:05" and "SFO 22:02:05" as live monospace clocks, then Resume and three 16px icon links. Everything is 12px/500 on one baseline with ~16px gaps, sticky on a solid #161616 band. It says who, where and when in a single row and leaves the fold to the work.
- Airport codes as time-zone labels: "DCA" and "SFO" in monospace read like a terminal or a departures board, a far more characterful way to show two cities than "EST / PST".
- Floating segmented filter docked bottom-left: a dark #1a1a1a capsule with a hairline border holding All · Interaction · Product · Film · Writing at 11px/500. The active segment is a solid #ffffff chip with #1a1a1a text, 8px radius and 4px 12px padding. It stays fixed over the scrolling grid, so filtering never needs a toolbar.
- Two-voice caption overlaid on the media: the title sits bottom-left in white Geist 14px/500 and the metadata bottom-right in gray (#727168-ish) monospace ("Explore", "March 2026", "2019–2024"), over a soft bottom scrim. Sans for the name, mono for the data, and no card footer.
- Beveled media cards: each tile is a 12px-radius frame with a 1px hairline (#2b2b2c) and the media inset ~3px inside it. Every clip sits in a thin dark bezel, like a screen in a device, instead of bleeding to the card edge.
- Desktop wallpapers as stage backdrops: UI experiments such as a payment-plan picker or a button demo are shot as a light panel floating on a macOS-style gradient wallpaper. That gives a monochrome page its only color and makes each component demo feel staged.
- Object-on-void tiles: some cards drop the wallpaper entirely and float a single 3D-ish object, like a fanned stack of tilted photo prints or a glowing gold-bordered card, on the bare #161616 card fill with a soft drop shadow. It breaks the rhythm of full-bleed screenshots.
- Staggered masonry with uneven tile heights across three ~456px columns and ~12px gutters. No row lines up, so the grid reads as a contact sheet rather than a template, and the product work flows straight into the film reel with no section break.

## Style recipe

Build on a near-black canvas, #161616, and let the content supply all the color. The interface itself stays monochrome: #f9f9f9 for primary text, a warm gray around #727168 for metadata and #2b2b2c for hairlines. Set everything in Geist (body 16px/24px at 400, UI labels 12px/500, controls 11px/500). Pair it with a monospace face for every number, timestamp and date, so data reads as a readout. Skip the hero. Put identity in one slim sticky top row on a solid canvas-colored band (avatar, location, live weather, live clocks labeled with airport codes, a text link and a few 16px 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 (~16–24px page margin), with tile heights varied on purpose. Every tile is a 12px-radius card with a 1px dark hairline and its media inset ~3px inside it, like a bezel. Caption directly on the media over a bottom scrim: title in white sans 14px/500 on the left, gray monospace date or action on the right. Stage UI demos as light panels on vivid gradient wallpapers, and mix in object-on-void tiles that float a single shadowed object on the bare card fill. Use 12px radius for cards, 8px for controls and full pills only for tiny chips. Put filtering in one small floating segmented control fixed to the bottom-left: a dark #1a1a1a capsule with a hairline border, with the active segment as a solid #ffffff chip with #1a1a1a text and 4px 12px padding. If an accent is needed, use a warm amber like #f4a137 and spend it on one tiny glyph or state, such as the weather sun, never on a surface.