swamii.me

A near-black (#09090b) developer portfolio that gets its personality from type contrast rather than color: a huge, tight Space Grotesk 600 hero ("Hi I'm Swami / I build for the web.") set against a pixel-monospace body face (GeistPixelSquare) that gives the subtitle a terminal-printout texture. The page is bounded by hairline vertical rules with ruler-style tick marks in the margins, so the whole thing reads like a blueprint sheet. Color is almost entirely a gray ramp (#2e2e30 borders, #6e6e6f secondary text, #f9f9f9 ink) with one signal color — a small green "live" dot on project cards and in the floating social dock. Cards are 1px-bordered charcoal panels with a screenshot cap, an outline "View Live / Github" button pair and a GitHub star count; the experience section is an accordion list with a small logo tile and a bordered "Intern / Freelance" tag. A pill-shaped social dock floats at the bottom center the whole way down.

Build on a near-black ground (#09090b) with a strict gray ramp and no chromatic accent except one small status green (e.g. #22c55e) used only as a dot. Set display type in Space Grotesk 600 at 64–96px with -0.025em tracking and 1.0–1.1 line-height; set body and captions in a pixel or plain monospace face (GeistPixelSquare, falling back to Geist Mono) at 16–24px, weight 400, in #929293–#acacad for secondary text and #f9f9f9 for primary. Use 1px hairlines (#2e2e30) for every border: card edges, section rules, and two full-height vertical rules that frame the content column, with small ruler ticks drawn in the outer gutters. Corner radius is 8–10px for cards and buttons, 3px for tags and tiny pills. Buttons are outline-only, 40px tall, 16px/24px padding, 14px/500 sans, no fill; put a subtle inner-glow border on hover instead of a color change. Cards are #0a0a0c panels with a cropped screenshot cap, title left and status dot + label right, a short muted description, then a full-width button row. Lists (experience, timeline) are single-border accordion rows with a 48px rounded logo tile, bordered mono tag, and a chevron. Float a persistent pill dock at the bottom center holding circular icon buttons and the status dot. Add one hand-drawn annotation (sketchy arrow and a scrawled monospace aside) near the primary CTA for warmth; otherwise keep every surface flat and every accent typographic.