Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- White minimalist personal portfolio with a small rounded M/Menu pill at top left. Large two-line biography sits in upper-left quadrant, followed by several compact paragraphs. Lower content begins with an experience label and company/role timeline, while most of the right side remains open.
- Type
- Medium-large sans/serif mixed opening where select phrases are italic and blue; body is compact gray sans with blue italic links. Lower timeline has small labels and role text.
- Color and surface
- White background, dark gray copy, selective bright blue italic emphasis and links. No cards, shadows, or dividers visible.
- Components
- Compact logo/menu pill, lead biography, short bio paragraphs, experience/timeline section.
What makes it work
- Open canvas
- Personal identity and concise positioning
- Short supporting biography
- Experience section
On a new subjectSummarize an unrelated person or organization in a short position statement, then add brief context and a clear experience record. Replace all personal details.
Prompts
Create a visual direction for {{website_name}} in {{industry}} for {{audience}}, shaping {{content}} and supporting {{functionality}}.
COMPOSITION INVARIANTS: Place a compact introduction and short biography in a narrow left-aligned column within a broad open field. Begin a simple factual timeline/list below rather than adding a large hero or repeated cards. Preserve the observed visual hierarchy and spacing relationships, not the source-specific object inventory.
TYPE: Use modest sans body text, selective italic emphasis, and restrained blue or underlined link styling. Keep labels smaller and softer than the biography. Set a readable scale step between display text, supporting copy, captions, and utilities. Do not name a font family.
SURFACE AND COMPONENTS: Use a white or very pale field with dark readable copy and a single subtle link accent; avoid decorative surfaces. Component roles: Small utility/menu control, short introduction, biography paragraphs, inline links and simple experience list. Keep controls visually distinct and subordinate to the main content.
IMAGE DIRECTION: No hero image is needed; add an image only if it supports the new content. Proportion estimate from the selected still: Visual estimate: text uses about 40% frame width; small menu about 12%; right half mostly blank. Treat it as an estimate, not fixed CSS geometry.
VARIABLES: Adapt names, details, image subjects, palette accents, and working actions to {{website_name}}, {{industry}}, {{audience}}, {{content}}, and {{functionality}}.
PROHIBITIONS: Use original copy and assets. Do not reproduce the source brand, exact wording, photographs, illustrations, products, people, or signature artwork; source-specific objects and motifs are optional only when they genuinely fit the new subject.
CONTINUATION: Continue with factual sections using the same modest type scale and open whitespace.
RESPONSIVE PROPOSAL: Widen the column to the phone measure, preserve paragraph and timeline order, and keep the compact utility reachable. These are design proposals, not observed mobile behavior. The selected still does not establish source fonts, CSS, implementation technology, motion, or control behavior. Do not present any of those as observed. Implement requested {{functionality}} as working new behavior without implying source validation.
Implement a responsive page for {{website_name}} in {{industry}} for {{audience}}, presenting {{content}} and working {{functionality}}.
INVARIANTS: Place a compact introduction and short biography in a narrow left-aligned column within a broad open field. Begin a simple factual timeline/list below rather than adding a large hero or repeated cards. Keep the same relative prominence and spacing without requiring the same source objects.
TYPE AND SURFACES: Use modest sans body text, selective italic emphasis, and restrained blue or underlined link styling. Keep labels smaller and softer than the biography. Use a white or very pale field with dark readable copy and a single subtle link accent; avoid decorative surfaces. Maintain clear display/body/utility scale, readable line lengths, and sufficient contrast. Components: Small utility/menu control, short introduction, biography paragraphs, inline links and simple experience list.
IMAGERY AND SCALE: No hero image is needed; add an image only if it supports the new content. Visual estimate only: Visual estimate: text uses about 40% frame width; small menu about 12%; right half mostly blank. Use flexible widths and content-led dimensions; do not copy this screenshot's coordinates as fixed values.
VARIABLES: Adapt names, details, image subjects, palette accents, and working actions to {{website_name}}, {{industry}}, {{audience}}, {{content}}, and {{functionality}}.
PROHIBITIONS: Use original copy and assets. Do not reproduce the source brand, exact wording, photographs, illustrations, products, people, or signature artwork; source-specific objects and motifs are optional only when they genuinely fit the new subject.
CONTINUATION: Continue with factual sections using the same modest type scale and open whitespace.
RESPONSIVE PROPOSAL: Widen the column to the phone measure, preserve paragraph and timeline order, and keep the compact utility reachable. Use semantic content, keyboard-operable controls, visible focus, meaningful alt text, and no clipped content. The selected still does not establish source fonts, CSS, implementation technology, motion, or control behavior. Do not present any of those as observed. Implement requested {{functionality}} as working new behavior without implying source validation.
Measured
Fonts loadedserif
H130px / 400
Body text16px
Page background#0e63ff
Text color#34384c
Page height3,583px
Computed CSS at 1440px, 2026-10-24.
