PROJECT SEON

Fixed-Viewport Layout System

• · Home, About and Project each resolve to a single screen with no scroll. Row height is derived from viewport height minus header, gutters and caption band, so the grid reflows against the window rather than a fixed breakpoint.
• · Verified at 1440×900, 1512×982 and 1920×1080 with zero vertical overflow; the same rule keeps the mobile grid filling the screen instead of leaving dead space under the pagination.

Two-Token Spacing System

• · Every page shares a single gutter value and a single header-height value. Content top padding is composed from both, so the gap under the logo always equals the left and right margin — measured at 72px on both axes at 1440.
• · The client asked for identical margins across all pages; expressing it as tokens rather than per-page values meant later adjustments touched one declaration instead of four files.

Two Kinds of Text Reveal

• · Scroll-scrubbed word reveal (GSAP ScrollTrigger, blur and opacity tied to scroll position) is used where reading pace should follow the hand; a play-once-on-enter blur reveal is used for blocks that arrive as a unit.
• · Scrubbed reveals end at a fixed distance rather than at viewport centre, so text near the page bottom always completes instead of freezing half-faded.

Portfolio CMS & Dual-Axis Ordering

• · 23 sites and 233 photographs were migrated from hardcoded arrays into Postgres, with project creation, cover image, multi-photo upload, reordering and visibility handled from the admin.
• · Display order is kept on two independent axes — the All tab and the per-size category tab — because a project can lead one list without leading the other. Insertion shifts neighbours and reindexes to 0..n so numbering never drifts.

Client-side Image Pipeline

• · Uploads failed outright at first: server action bodies cap at 1MB while camera originals run 5–20MB, so the request was rejected before reaching any handler.
• · Images are now downscaled to 2000px WebP in the browser and sent one at a time with progress shown, which both clears the limit and matches the 233 seeded photographs in format.

Inquiry Automation & Map Fallback

• · Consultation enquiries persist to Supabase and notify the studio inbox through Resend; sending is deliberately decoupled from saving so a mail failure can never swallow a lead. A honeypot field absorbs the first layer of bots.
• · NAVER Maps is wired through NCP; because the SDK script returns 200 even with an invalid key, auth failure is caught through the vendor's global hook and the panel falls back to an embedded map rather than showing an empty grey box.

Korean SEO & Staging Guard

• · Per-page metadata, canonical, OG and Twitter cards, LocalBusiness JSON-LD carrying address, phone, coordinates and opening hours, plus robots and sitemap.
• · While the site still lived on a preview URL, indexing was blocked automatically; connecting the production domain flips robots and canonical over in one environment variable, so the preview host never competes with the real one in search.

Minimal Editorial Identity

Warm off-white (#F7F6F3) against ink black (#191919) with a thin geometric sans. No ornament — hierarchy and empty space do the work, which is the closest visual equivalent of the studio's own restraint.

Typography as a Fixed Scale

Display, heading, lead, body and label are locked to token steps rather than chosen per page, after the client flagged that type sizes felt inconsistent across screens. Korean line breaking is set to keep words whole.

The Loading Screen as the Brand

A thin line draws itself while a counter climbs, then the hero settles out of a slow zoom. The brand name is an idea about lines, so the first five seconds state it before any copy does.

Portfolio-first Navigation

Filters by unit size, a 2×2 grid held to one screen, and a keyboard-navigable detail viewer — the built work stays two clicks away at all times.