johnhansportfolio.framer.website

A near-empty white page carrying one very loud sentence. John Han's portfolio spends its entire budget on a centered 72px SF Pro Rounded Heavy headline — "Playful product designer / systems thinker / scrappy prototyper" — and then gets out of the way: no nav bar, no hero image, no CTA, just a small centered name-and-city block at the top and a pearl-like glass sphere pinned in the top-right corner. The play comes from objects rather than layout: glossy 3D blobs (a lime dome, an orange flower) sit inline in the headline at cap height, so they read as words in the sentence, and tiny circled plus-marks float around the type like registration marks on a sticker sheet. Below the fold the same restraint holds — two columns of 24px-radius cards where the card ground is the color (acid lime #BDFE40 against a warm gray #F0EBEA) and the work floats inside it as a shadowed object, each one captioned with a plain two-line sentence and a gray "Discipline / Year" line. It works because the page is otherwise so quiet: pure white, one typeface, black ink, and every drop of chroma reserved for the artwork and the toys.

Build on pure white #FFFFFF. Use one rounded geometric sans for everything (SF Pro Rounded, or Nunito / Poppins as a substitute) in exactly two weights: Heavy for display, Semibold for body and labels — never Regular, and never a second family. Type scale: display 72px / 82.8px line height / normal tracking, section title ~48px Heavy, body and captions 18px / 20.7px Semibold, meta line 18px Semibold in gray #909091. Ink is near-black #141416; secondary text is #6F6F70; there are no borders and no rules anywhere on the page.

Center everything in the opening screen: a small name + location block at the very top (16px Semibold over 13px gray), then one sentence in display type occupying three or four lines, and nothing else — no CTA button, no nav bar, no hero image. Give the sentence at least 200px of air above and below. Chrome is two floating objects only: a glossy sphere or single mark in the top-right, and a pill-shaped (border-radius: 9999px) icon button fixed bottom-right for navigation.

Color lives in objects, never in surfaces. Keep the page white and let one or two saturated accents — acid lime #BDFE40, warm orange #FFB26D, soft green #6FCC51 — appear as 3D blobs and card grounds. Set the blobs inline inside the display line, sized to cap height with a subtle specular highlight and a soft ground shadow, so they parse as glyphs. Scatter three or four ~14px circled plus-marks at random offsets near the type.

Content grid: two equal columns, ~48px gutter, cards at border-radius: 24px and roughly 1:1, each a flat colored panel (alternate the acid accent with a warm neutral #F0EBEA) holding the artwork as a floating, shadowed object with generous inset padding — never a full-bleed screenshot. Caption sits below the card, centered: a two-line sentence describing what the work achieved, then a gray Discipline / Year line. Skip project titles entirely. Section headings are a Heavy title with a small Semibold sub-line under it, optionally with an emoji overlapping the first letter as a drop cap. Leave an odd trailing card alone in its column rather than centering it.

Shadows are soft, large-radius and low-opacity (0 12px 40px rgba(0,0,0,0.08)) and belong to floating objects, not to panels. Motion is springy and small: blobs and plus-marks drift or bob on load, cards lift ~4px with a 200ms ease on hover. The two moves that make this recognizable are the emoji-scale 3D objects living inside the sentence, and the discipline of spending all the color on those objects while every surface stays white.