AOS/skills/design/portfolio.md

# Portfolio / Personal Website

This reference is for portfolio sites, personal websites, and creative showcases. Consult it when the user asks to build a site that presents a person and their work.

---

## The Two Non-Negotiables

Everything else is flexible, but these two must be true:

1. **Work first.** The visitor must see actual work — not a bio, not a mission statement, not a loading animation — within the first viewport. The work IS the hero. If you're designing an "About Me" section before the work is visible, you're building a resume, not a portfolio.

2. **Emotion in 2 seconds.** Before the visitor reads a single word, they should feel something — curiosity, awe, tension, delight. This comes from an unusual navigation concept, an unexpected layout, a bold typographic choice, or the work itself presented at full impact. If the first 2 seconds feel like "a website," the design has already failed.

---

## Choose a Structure

Portfolio sites have more structural freedom than any other type of website. The work's nature should dictate the structure — don't default to "grid of thumbnails."

### A. The Index List
Projects shown as text rows — title, year, category. Hovering a row reveals a preview image that follows the cursor or fills a dedicated zone. Dense, editorial, fast to scan.
**Best for:** Large bodies of work (10+), designers who want to signal breadth and taste. Also works well for mixed-discipline portfolios where thumbnail sizes would be inconsistent.
**The move:** The hover-preview image makes the visitor feel like they're "discovering" each project rather than being shown it.

### B. Full-Bleed Showcase
One project occupies the entire viewport. Scroll or swipe transitions to the next. Each project gets its own atmosphere — background color, typography weight, even ambient sound.
**Best for:** Visual-heavy work — photography, branding, motion design. Small portfolios (4-6 projects) where each piece deserves full attention.
**The move:** Per-project theming. When the background shifts from warm ivory to deep navy between projects, the designer proves they can inhabit different brand worlds.

### C. Spatial / Non-Linear
Projects exist as points, clusters, or objects in a 2D/3D space. No list order, no grid. Navigation is exploration — the visitor chooses where to go by moving through space.
**Best for:** Conceptual work, art direction, experimental portfolios. Small portfolios where spatial relationships between projects add meaning.
**The move:** The navigation model itself IS the portfolio. A coordinate system with crosshairs, a room you walk through, a map you explore — the metaphor communicates the designer's thinking.

### D. The Product-as-Portfolio
The website is not a showcase OF work — it IS the work. A functional tool, an interactive experience, a playable thing. Past projects may be listed elsewhere, but the site itself demonstrates capability.
**Best for:** Developers, creative technologists, interaction designers. People whose skill is building things, not just showing images of things.
**The move:** The visitor uses the portfolio before they read it. The proof of skill is in their hands.

### E. Fixed Identity + Scrollable Work
A fixed panel (side or top) holds the person's identity — name, role, contact. The rest of the screen is dedicated to browsable work in any format (horizontal scroll, vertical scroll, grid).
**Best for:** General-purpose portfolios where both identity and work need to coexist. Freelancers and job-seekers who need quick access to contact info.
**The move:** The identity panel is always visible, so the visitor never loses context about WHO made this work. The panel becomes a quiet signature.

**Anti-pattern: The Marketing Page Portfolio.**
Hero section with big tagline → grid of thumbnail cards → about section → testimonials → contact form → footer. This is a business landing page wearing a portfolio costume. It signals "I downloaded a template," not "I designed this."

---

## How to Present Work

### On the Home Page

The home page presentation should make the visitor want to click into a project. This means:

- **Lead with the strongest piece, not the most recent.** The first visible project is the one the visitor will judge you by. Chronological order is lazy; curated order shows taste.
- **Vary the visual weight.** If every project thumbnail is the same size, all work looks equivalent. Give the hero project more space, let secondary work be smaller. Hierarchy signals confidence.
- **Show the work, not a mockup of the work.** A screenshot inside a laptop mockup inside a browser frame adds three layers of distance between the visitor and the actual design. Show the work directly.
- **Cap at 4-8 projects.** Showing everything signals inability to edit. A tightly curated selection says "I have more, but these are the ones that matter."

### Project Detail Pages

Every portfolio MUST have project detail pages. A portfolio without details is a slideshow. Details are where the visitor decides "this person thinks clearly" or "this person just makes things look nice."

**What a project detail page needs:**

1. **The work at full scale.** Large images, multiple views, real screenshots — not thumbnails.
2. **The narrative (short).** Three paragraphs maximum: What was the challenge? What did you do? What was the result? This is not a case study — it's a summary that proves you can think, not just execute.
3. **Structured metadata.** Role, team size, timeline, tools — in a sidebar or compact block. This is where monospace labels work well.
4. **Navigation between projects.** Previous/next links so the visitor can browse without going back to the index. Keep them in the flow.
5. **A way back.** Close button, back link, or ESC key. Never trap someone in a detail view.

**What a project detail page does NOT need:**
- A "problem statement" section with 3 paragraphs about the client's industry
- A "process" section with wireframe screenshots and sticky-note photos
- Testimonial quotes from clients
- "Want to see more? Let's chat!" CTAs after every project

---

## Identity & Bio

The bio should feel like a person wrote it, not a LinkedIn profile generator.

**The 2-sentence rule:** You get 2 sentences to say who you are. Make them count. Specifics beat adjectives.

- Bad: "I'm a passionate designer who loves crafting beautiful experiences."
- Good: "Senior visual designer at Deloitte Digital. Former pianist — my thinking is both visual and structural."
- Good: "I design AI products in Beijing. Previously made tools for researchers at Zhipu AI."

**Placement:** The bio should be accessible but NOT the first thing you see. Work first, identity second. Common good placements:
- Fixed side panel (always visible but secondary to the work area)
- Accessible via a single click/link from the home page
- At the bottom of the page, after the work
- In an overlay triggered by clicking the name

**Credentials embedded, not shouted.** "Awwwards Jury member since 2022" as a small caption under the bio, not a banner at the top of the page.

---

## Portfolio-Specific Moves

### Dynamic theming per project
When a visitor scrolls from one project to the next, the background color, accent color, and mood shift to match that project's brand. This is the single strongest signal of design capability — you're proving you can work in multiple visual languages, not just your own.

### Taste as proof
Curating other people's work — a list of music videos you love, a collection of typefaces you admire, a reading list — demonstrates taste and cultural awareness without being self-promotional. The best designers know good work when they see it.

### The entrance moment
A brief, deliberate loading or entrance sequence sets the mood before the content appears. Not a loading spinner — a percentage counter, a text reveal, a quick animation that establishes the site's personality in 1-2 seconds. Must be fast (under 2 seconds) or it becomes an obstacle.

### Custom cursor or interaction pattern
A non-default cursor (crosshair, dot, custom shape), a hover preview that follows the mouse, or a non-standard interaction model signals "this was built from scratch." Even subtle: making the cursor change to a "view" icon when hovering over projects.

### Contact as conversation, not form
A mailto link feels human. A contact form feels corporate. Portfolio sites should feel like you're reaching out to a person, not submitting a request to a company. "lilu@example.com" beats a 5-field form every time.

### Oversized type as the hero
Set the name, role, or a one-line statement at display scale — `clamp()` scaling up to ~12–18vw — so it fills most of the first viewport and the text itself is the hero, no image required. Keep body/meta small (14–16px) so the size jump is 8–10×; that contrast is what reads as confident, not the big number alone. Pair a display face for the giant type with a smaller mono face for labels/coordinates/year tags.

### Dark statement break for rhythm
Don't let the page be one flat light scroll. Insert one or two full-bleed dark sections (a manifesto line, a single statement, a section divider) between lighter content — same type system, reversed colors. These are tempo beats: the visitor feels the page breathe in and out instead of scrolling a uniform document. One or two only; more kills the effect.

### Asymmetric layout, not centered safety
Default to off-balance grids — `1.2fr 1fr`, `2fr 1fr 1fr`, or content pinned to one edge with deliberate empty space on the other — instead of centered `1fr 1fr` symmetry. Let a hero image bleed off one side, let a heading hang into the margin. The tension and editorial feel come from the imbalance; centered-everything is what makes a page look like a template.

---

## Completeness Checklist

A portfolio site is finished when:

- [ ] Actual work is visible in the first viewport — no bio-first, no loading-first
- [ ] Every project on the home page has a detail page with full images and narrative
- [ ] Previous/next navigation exists between project details
- [ ] There is a way to return from detail view to the index (back link + ESC key)
- [ ] The bio is 2-3 sentences of specific, human text — not LinkedIn prose
- [ ] Contact is a real email address or link, not `href="#"`
- [ ] The strongest project is shown first, not the most recent
- [ ] No more than 8 projects on the home page
- [ ] The site works on mobile — the structure adapts, not just shrinks
- [ ] There is one memorable element someone would describe to a friend: "the one where projects are dots on a grid" / "the one where the background color changes per project"

---

## How this fits the Design Skill flow

This file is the portfolio scenario reference. It plugs into the main `SKILL.md` flow — it does not replace it.

- **Scene type.** A portfolio is an **expressive** scene. Per `SKILL.md` Creative Context, before building, make a concrete visual commitment (which structure A–E, the hero treatment, the one signature move) — written as specific elements and actions, not adjectives like "bold" or "premium". The "one memorable element" in the checklist above IS that commitment.
- **Don't fall back to a mature design system here.** The Mature System Fallback in `SKILL.md` is for restrained/no-style scenes (dashboards, tools). A portfolio is expressive — design it from the structure choices above, not from a generic system baseline.
- **Templates.** If `design-templates/INDEX.md` has a matching portfolio/personal-site template, it may be used as a starting skeleton — but the structure choice (A–E) and the signature move still drive the result; never ship the template's layout unchanged.

## Creative Context (from SKILL.md)

For open-ended requests, complete these before generating:

- `creative_positioning` — what this person should be known for (one line).
- `first_impression` — what the visitor should feel in the first 2 seconds (tie to "Emotion in 2 seconds").
- `anti_default` — which generic portfolio reflex to avoid (usually the Marketing-Page-Portfolio anti-pattern).

The artifact must visibly reflect this. Don't print the context unless asked.

## References — load only when triggered

Don't read these by default. A first draft usually needs this file + a selected style/design-system reference if any + only 1–3 triggered craft files.

- `horizontal-craft/chinese-typography.md` — substantial Chinese text. **If the page has Chinese, its font rules are mandatory**: any named font must actually be loaded (`<link>` or `@font-face`), and a Chinese page's `font-family` must contain a CJK font name — never let a Latin font fall straight to `system-ui`. Font choice/loading: `horizontal-craft/fonts.md`.
- `horizontal-craft/color.md` — no color direction is given.
- `horizontal-craft/icon-system.md` — UI/social/navigation icons are used. No emoji as icons.
- `horizontal-craft/animation-discipline.md` — entrance choreography, scroll reveal, hover, custom cursor, or theming transitions (the Portfolio-Specific Moves above). For an expressive scene a fully static page is under-delivered; take paste-ready entrance CSS from here.
- `horizontal-craft/technique-library.md` — advanced technique genuinely serves the work: 3D, shader, rich scroll narrative, custom data-viz, spatial navigation (structure C).
- `design-system-reference.md` — the user gives a brand/style reference, DESIGN.md, screenshots, or a prior artifact to follow.
- `canvas-and-device.md` — fixed export size, device frame, or screenshot-showcase constraints.

## Final Gate

Run `quality-gate.md` as the blocking final checklist before delivery. It owns the global checks (accessibility, `:focus-visible`, reduced-motion, dead links, placeholder logic, Design Compliance comments, version/handoff) — don't duplicate them here.

Portfolio-specific gate, on top of the Completeness Checklist above:

- the strongest work is visually prioritized; projects are not flattened into equal cards;
- no invented credentials, employers, clients, testimonials, awards, metrics, outcomes, logos, or press;
- role / domain / point of view are clear within the first screen;
- the distinctiveness test passes: cover the person's name — could this be anyone's portfolio? If yes, revise;
- any motion or special technique serves the person's identity or work, not novelty.

## Handoff

Use the standard Design Skill delivery, export, and version-management flow (`export.md`). This file does not define a separate portfolio handoff.