dannpetty.com

A designer's portfolio built as one endless four-column masonry of rounded tiles on pure black, with no header, no hero headline and no section breaks. The work does the talking: each tile is a full-bleed screenshot of a client site, so the color on the page comes entirely from the shots, while the chrome stays near-black (#090808) with warm stone grays (#37302b, #5b514a, #78716c) and off-white text (#f2f4f4). The person shows up as a small sticky profile card in the bottom-left corner, a live location widget and a client-logo strip. The columns start at different heights, so the grid reads as a scattered board rather than a page with a top.

Build the page as a four-column masonry of rounded tiles on pure black (#000, card fill around #090808) with ~20px gutters. Skip the header and the headline. Start each column at a different vertical offset so the first screen has no common top edge. Tiles use a 20px radius and a 1px hairline in a warm stone (#37302b). Interactive and status shapes are full pills (9999px), and inner frames use 10px. Use a single system sans (ui-sans-serif) throughout at modest sizes: 14px/1.25 body, 12px labels, 16–20px semibold names. Body text is warm gray (#78716c to #919394), and names and links are off-white (#f2f4f4), with links underlined and no colored link styling. The chrome has no accent hue. Color comes only from the imagery: full-bleed photos and screenshots, each inset in a matte tinted to match it. If you need an emphasis color, use #78716c stone or a solid white pill (#ffffff fill, #000 text, 44px tall, 10px 16px padding, regular weight). Use the white pill for at most one CTA per tile. Make small utility tiles feel personal: local time, location and a logo strip of 36px circular badges that bleeds off the tile edge. Overlay captions go in dark translucent pills, and carousel pagination uses dots where the active one stretches into a dash. On scroll, keep the identity reachable as a floating translucent name pill with a back-to-top arrow.