✦ StealThis .dev
Pages Easy

DIY — Maker Profile

A designer profile page for a fictional 3D-printing community, built on a deep slate palette with filament-orange and cyan accents. It pairs a gradient cover band and isometric SVG avatar plate with a mono stat strip, four switchable panes for models, makes, collections and about, sortable isometric render tiles with like counters, hexagonal achievement medallions with tooltips, printer spec cards, a slicer settings table and a sticky activity rail with tip support.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Maker Profile

SPOOLYARD is an invented 3D-model community, and this is the public profile of one of its designers, nozzlecraft. The page opens with a gradient cover band — blurred orange and cyan blobs behind a masked mesh grid — with an isometric SVG avatar plate overlapping its lower edge. Identity, location, join date and live follower count sit beside it, next to a follow toggle, a support button and a copy-link action. Directly beneath, a five-cell stat strip reports models published, downloads, likes, makes by others and community points in JetBrains Mono, so the numbers read as instrumentation rather than marketing.

The body is a tab set. Models is a responsive grid of isometric render tiles on radial-gradient plates, each with a print-time badge, a download count and a like button that increments and pulses on press; a sort select reorders the grid by popularity, date, downloads or print time, and a load-more button appends three further tiles. Makes lists prints this designer made from other people’s models, each carrying a credit chip back to the original designer plus material and layer chips. Collections shows folder cards with model and download counts, and About holds bio prose, three printer spec cards with mono definition lists, and a preferred-slicer-settings table.

The right rail is sticky. Achievement medallions are hexagonal clip-path shapes that tilt on hover and expose a positioned tooltip explaining exactly how each one was earned — locked badges are dimmed and greyed but still keyboard-reachable and still explain their unlock condition. Below them a dotted activity timeline lists recent publishes, makes and badge unlocks, and a tip card lets you pick an amount and fire a toast. Tabs support arrow, Home and End keys, focus is always visible, and everything collapses to a single column below 520px.

How this look is built

The layout is written in the spirit of maker-community profile pages like Printables, but every technique here is modern CSS rather than the float-and-sprite approach those layouts once required. A single two-column grid with position:sticky on the rail replaces the old sidebar-clone hacks; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) makes the model grid reflow without a single breakpoint; the cover texture is pure layered radial-gradient plus a repeating linear-gradient mesh faded out with mask-image, so there are no image requests at all; every render plate is inline SVG, which stays crisp at any density and can be recoloured with the same custom properties as the rest of the page. Badge medallions use clip-path instead of PNG sprites, panes swap by toggling hidden on real role="tabpanel" elements so the tab set is accessible by default, and entrance animation is delegated to IntersectionObserver + the Web Animations API — no scroll-event thrash, and the whole thing is short-circuited by a prefers-reduced-motion check.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.