# swamii.me

Source: https://swamii.me/
Captured: 2026-09-13
Tags: portfolio, landing, dark, both, minimal, dark-techno, technical, confident, calm, serious
Colors: #0a0a0c, #2e2e30, #f9f9f9, #4d4d4f, #6e6e6f, #d0d0d1, #929293, #acacad
Type (h2): Space Grotesk · 36px/40px · 600 · tracking -0.9px — "Projects"
Type (h3): Space Grotesk · 20px/28px · 600 — "VidStudio"
Type (body): GeistPixelSquare · 24px/32px · 400 — "I build Websites that look and feel good to use. Design Engineer and Full Stack "
Type (small): Geist · 12px/16px · 400 — "Next.js"
Type (button): Geist · 14px/20px · 500 — "Book a Meeting"
Button (primary): "Book a Meeting" — fill #171717, text #fafafa, radius 8px, border 1px, padding 16px 24px, height 40px, type 14px/500
Button (secondary): "Projects" — text #ffffff, radius 0px, border 0px, padding 0px 0px, height 24px, type 16px/500
Radii: 3px (170), 10px (28), 8px (10), 12px (2), 18px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/swamii-me/hero.webp?v=c84b5b0a
- Page crop (mid-1): https://media.lvly.design/library/swamii-me/mid-1.webp?v=fee81ebf
- Page crop (mid-2): https://media.lvly.design/library/swamii-me/mid-2.webp?v=6479e184
- Hero (mobile): https://media.lvly.design/library/swamii-me/mobile-hero.webp?v=62f3b820
- Full page (desktop): https://media.lvly.design/library/swamii-me/full.jpg?v=e1650d4a
- Full page (mobile): https://media.lvly.design/library/swamii-me/mobile-full.jpg?v=c7a0a819
- Clip preview (mp4): https://media.lvly.design/library/swamii-me/video-cj0xix.preview.mp4?v=ac0b32bb

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.

## Steal-worthy details

- Hero headline pairing: a verified-badge icon set inline after the name at display size, and a hand-drawn arrow + scrawled "psst... I'm open to work" annotation beside the primary CTA.
- Ruler tick marks along the two outer hairline columns — a free "engineering drawing" frame for a dark page.
- The only color on the page is a 6px green status dot, reused consistently as "live" on cards and "online" in the dock.
- Floating bottom-center social dock: pill, 1px border, four circular icon buttons plus the status dot, persistent across the whole scroll.
- Project cards keep the GitHub star count in the image corner as a tiny pill, so social proof rides on the thumbnail rather than in the copy.
- Outline-only buttons everywhere (1px border, 8px radius, 40px tall, 14px/500) — no filled primary at all, which keeps the monochrome honest.

## Style recipe

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.