# johnhansportfolio.framer.website

Source: https://johnhansportfolio.framer.website/
Captured: 2026-09-20
Tags: portfolio, landing, light, both, playful, minimal, playful, friendly, optimistic, confident
Colors: #fefefe, #d0d3cf, #2e2e2f, #909091, #afafb0, #505051, #6f6f70, #141416
Type (h1): SF Pro Rounded Heavy · 72px/82.8px · 400 — "l"
Type (h2): SF Pro Rounded Bold · 10px/11.5px · 400 — "Projects"
Type (h3): SF Pro Rounded Semibold · 18px/20.7px · 400 — "Featured work"
Type (body): SF Pro Rounded Semibold · 18px/20.7px · 400 — "Optimizing Libby’s search to give users an effortless browsing and borrowing exp"
Radii: 9999px (11), 24px (11), 1.89px (3), 50px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/johnhansportfolio-framer-website/hero.webp?v=9eb6e1e4
- Page crop (mid-1): https://media.lvly.design/library/johnhansportfolio-framer-website/mid-1.webp?v=0dc5cff1
- Page crop (mid-2): https://media.lvly.design/library/johnhansportfolio-framer-website/mid-2.webp?v=4fdd0211
- Hero (mobile): https://media.lvly.design/library/johnhansportfolio-framer-website/mobile-hero.webp?v=e9dadeed
- Full page (desktop): https://media.lvly.design/library/johnhansportfolio-framer-website/full.jpg?v=11dfebbd
- Full page (mobile): https://media.lvly.design/library/johnhansportfolio-framer-website/mobile-full.jpg?v=236671e6
- Clip preview (mp4): https://media.lvly.design/library/johnhansportfolio-framer-website/video-v5gln9.preview.mp4?v=b340d23a

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.

## Steal-worthy details

- Headline as the entire hero — 72px/82.8px SF Pro Rounded Heavy, centered, four lines, no subhead, no CTA, no image; the job title *is* the pitch and nothing competes with it
- Glossy 3D blobs set inline in the sentence at cap height — a lime dome after "designer", an orange flower before "scrappy" — so they behave as typographic characters, not decoration parked in the margin
- Tiny circled plus-marks scattered at irregular offsets around the headline — ~14px, pale gray ring, yellow glyph; they cost nothing and make a plain white field feel like a canvas
- One pearl-like glass sphere pinned in the top-right as the page's only chrome — the site's whole identity mark, in place of a logo and a nav
- The card's ground carries the color, not the image: a 24px-radius, roughly square panel in acid lime #BDFE40 or warm gray #F0EBEA with the screenshot floating inside it under a soft drop shadow — one swatch per project does all the differentiating
- Caption stack under every card instead of inside it: a two-line 18px semibold sentence describing the outcome, then a gray 18px "Discipline / Year" line — no project titles anywhere
- Section headings are a heavy title over a small semibold sub-line, and one takes an emoji as a drop cap — a saturn overlapping the "E" of "Extras" — so the section marker is a picture, not a rule or a badge
- An odd card count is left odd: the last card sits alone in the left column with the right slot simply empty, never centered or stretched to fill

## Style recipe

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.