FP52 | Maya Chen | FIT=C | Creators & personal | Swiss & grid
TECHNIQUES: scroll pin hover focus rotate product card front back filter motion checkout contact account font hero lenis
BORN_HOOD_ADVICE: Designer selection-grid gimmick likely distracts from shopping.
DESIGN_SIGNATURE: 's colors] The design The idea: a portfolio as a precise Swiss system, where the layout grid is visible and the work speaks. Fonts: Geist for everything, set large with tight letter-spacing; Geist Mono in small uppercase for labels, numbers and captions. Colors: paper #F6F6F3 background, ink #111111 text, grid line #DADAD5 hairlines, signal blue #2F5BFF for selection boxes and one key phrase, graphite #5E5E58 for secondary text. Draw faint 12-column grid lines behind the whole page (8 on tablets, 4 on phones) and align every block to them. Sections: a fixed nav with a Grid toggle and an availability pill; a hero with role, location, live local time and status across the top, the name set edge to edge, an intro and four project thumbnails; four case studies, each with a mono meta bar, a headline, count-up results and a realistic product screen built right into the page (not a picture) on a dotted grey backdrop, laid out split, full width, flipped, then on a dark full-bleed band; an approach index list and a twelve-week plan where each grid column is a week; an experience timeline beside sticky stats; testimonials; writing as a table; contact with copy-email, quarterly availability and a brief form; a dark footer with the name huge. Motion: on load the columns draw down in blue, the hero pieces land slightly off-grid with dashed outlines and a selection box on the name, then snap crisply into the columns as the blue fades. Case screens snap in the same way, then play: charts draw, sliders drag, a cursor clicks buttons. The timeline draws as you scroll.
HTML_SURFACE: headings=H1 · Geist Medium · cols 1–121360 × 262Maya Chen, product designer; Screens that had to be right.; How the work gets made.; Ten years, four teams.; Notes from the work.; Send me the hard screen. | ids=i-send, i-req, i-inv, i-pot, i-home, i-card, i-bell, i-grid4, i-search, i-users, i-alert, i-msg, i-bars, i-sliders, i-check, i-arrow, i-chev, i-pin, i-copy, i-plus, i-lock, i-truck, i-dl, i-cols, i-sb, i-cur, menu, main, top, work, work-h, tally, tg, cadence, ballast | functions=tick, setMenu, setGrid, getCols, selInfo, ready, colAt, countUp, step, play, onScroll
ORIGINAL_PROMPT: prompt/maya-chen.md (SHA256 5b5030b8ce17c2d74564edabbff7e8ed51ae26b60f087a71138a2e71ed0ff258)
EXAMPLE_SOURCE: example/maya-chen.html (SHA256 efbc41c87f3424db251dfc6f3ef7c19aa4f6a4bcdc2322c232b35fe7eb6726db)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\maya-chen\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
