# 08 · Bold & Playful — Design System

> A loud, primary-colour, geometric-playful personal site — thick black borders, hard offset shadows, and a rotated marquee, in the tradition of Bricolage Grotesque type specimens and "fun" Figma-community landing pages.
> **All content is placeholder** — the persona ("Jinyu Chen") and every project/link are samples; replace them with your own. Single self-contained HTML file (inline CSS + JS).

---

## 1. Website Goal
Give a maker a site that feels fun and human without sacrificing craft. The single upbeat scroll shouts a headline, marches a marquee of skills, states a cheerful about line, cycles projects through bright colour blocks, lists the journey, and ends on an energetic contact block — the primary outcome being a confident, memorable "let's talk."

## 2. Target Audience
People who want their portfolio to feel energetic, cheerful, and human — designers, front-end/creative engineers, and indie makers who'd rather be bold than muted. It flatters playful, personality-forward work.

## 3. Brand Personality
Loud, energetic, geometric, cheerful, confident, fun. Voice is upbeat and casual — emoji and exclamation marks are on-brand — confident, never chaotic.

## 4. Visual Direction
Off-white base with true-black ink and five equally-weighted flat primary colour blocks. Thick 3px black borders, hard un-blurred offset shadows (`8px 8px 0`), and a slight rotation on hover. Four free-floating decorative shapes spin/bob behind the hero, and a rotated marquee strip marches skill words below it.

## 5. Color System
Off-white base + true black + five flat primary colour blocks (no gradients).

| Token | Hex | Use |
|---|---|---|
| `--bg` | `#fffdf7` | page background |
| `--ink` | `#141013` | text, 3px borders, nav pill, offset shadows |
| `--blue` | `#2b4cff` | colour block — hero word, cards, contact block |
| `--pink` | `#ff4d9d` | colour block — hero underline word, `<mark>`, cards |
| `--lime` | `#c6ff3d` | colour block — lang toggle, badges/labels, marquee dot, CTA |
| `--yellow` | `#ffd23d` | colour block — cards, hover states |
| `--purple` | `#7b2ff7` | colour block — floating shape, cards |

All five accents are equally valid — cards cycle through them via `nth-child(4n+1..4)`. Never collapse to one "brand colour" and never blend two into a gradient.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Bricolage Grotesque** (variable optical size) | weight 700–800, tight negative letter-spacing |
| Body / UI | **DM Sans** | weight 400–700 |

- Hero `h1` `clamp(3.2rem, 15vw, 13rem)`, weight 800, line-height `0.86`, letter-spacing `-.03em`; contact `h2` `clamp(2.6rem, 10vw, 7rem)`.
- Highlight moves inside copy: `<mark>` (pink pill background, `8px` radius) and `<u>` (thick coloured underline — lime `12px` in hero, blue `8px` in about).
- Marquee runs Bricolage at `clamp(1.4rem, 3vw, 2.2rem)`; labels are uppercase lime pills.

## 7. Layout Principles
- Sections `max-width:1180px`, centered, padding `clamp(60px,9vh,120px) clamp(24px,5vw,64px)`; body `line-height:1.6`.
- Radius rounded throughout: `100px` pills (nav, buttons, badges, labels), `20–26px` cards, `20px` xp rows, `40px` contact block, `8px` on `<mark>`.
- Borders are thick 3px `--ink`; elevation is hard offset shadow (`8px 8px 0 var(--ink)`) plus a slight `rotate()` on hover — never soft/blurred shadows.
- Work cards `auto-fit minmax(280px,1fr)`; xp rows `1fr` → `160px 1fr auto` at ≥680px.

## 8. Homepage Sections
1. **Nav** — fixed floating black pill: brand + sparkle mark left; EN·中文 toggle (lime border) + lime "Let's talk →" CTA right.
2. **Hero** (`#top`) — four floating shapes (circle, triangle, rounded-square, blob) behind a wave badge, huge headline mixing a blue word + a pink underlined word, lead, two pill buttons.
3. **Marquee** — rotated (`-1.5deg`) infinite strip: DESIGN ✳ FRONTEND ✳ BACKEND ✳ CLOUD.
4. **About** — lime label pill + statement headline with a pink `<mark>` and a blue `<u>`.
5. **Projects** (work) — rounded cards cycling the colour blocks, each with year, title, description, "Explore →".
6. **The journey** (experience) — bordered rows that invert to black and shift right on hover.
7. **Contact** — rounded blue block: yellow label, huge headline, white CTA, link row.
8. **Footer** — centered, bold, single line.

## 9. Component Style
- **Buttons** — `100px` pills with 3px `--ink` border; `.btn-p` ink→blue on hover, `.btn-s` fills yellow; both rotate + scale slightly on hover. Nav `.cta` is a lime pill that rotates on hover.
- **Cards** — 3px border, `26px` radius, colour cycled via `nth-child(4n+…)`; hover lifts `-8px`, rotates `-1.5deg`, adds `8px 8px 0` hard shadow.
- **Experience rows** — bordered `20px` rows; hover inverts to ink fill + `translateX(8px)`.
- **Labels** — uppercase Bricolage on lime pills (yellow on the contact block).
- **Bilingual EN/中文 toggle** — `data-en`/`data-zh` on every string, swapped via `apply(lang)` (sets `innerHTML`, also `data-en-ph`/`data-zh-ph` placeholders), buttons reflect `aria-pressed`; active button fills lime; persisted in localStorage under **`sp08_lang`**; `<html lang>` becomes `zh-Hant` for Chinese.

## 10. Motion / Animation
- `.reveal` → `.in`: fade + translateY(28px) + rotate(-1deg), `0.7s cubic-bezier(.2,.8,.2,1)`, staggered by `(i % 4) * 80ms` via IntersectionObserver (threshold `0.14`).
- Four hero shapes animate independently: `@keyframes spin` (18s/22s linear, one reversed) and `@keyframes bob` (4s/5s ease-in-out).
- Marquee `@keyframes march` translateX(-50%) over `18s` linear; cards/buttons/xp-rows rotate + shift on hover.
- `prefers-reduced-motion: reduce` disables reveals, shape spin/bob, and the marquee.

## 11. Responsive Design
- `@media(min-width:680px)` — `.xp-row` becomes `160px 1fr auto` (single column, stacked below).
- Projects reflow via `auto-fit minmax(280px,1fr)`; headline/marquee/contact type scale fluidly via `clamp()`.
- Nav is a floating pill inset `16px`; the hero packs floating shapes with `overflow:hidden` so they never cause horizontal scroll (`overflow-x:hidden` on body).

## 12. Things to Avoid
- Don't mute the palette or collapse the five accents to one "brand colour."
- Don't blend accents into gradients.
- Don't thin the 3px borders or swap hard offset shadows for soft blur.
- Don't switch to serif or a quiet, restrained voice (that's templates 01/06/07).
- Don't drop the rotation-on-hover or the rotated marquee — the slight tilt is the signature.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: bold and playful — loud primary colour blocking with geometric energy, like a Bricolage Grotesque type specimen. Off-white background `#fffdf7`, near-black ink `#141013` for text/borders/shadows, and five equally-weighted flat accent colours cycled across the page: blue `#2b4cff`, pink `#ff4d9d`, lime `#c6ff3d`, yellow `#ffd23d`, purple `#7b2ff7` — no gradients blending them together. Typography: Bricolage Grotesque (weight 700–800, tight negative letter-spacing) for all display/heading text, DM Sans for body/UI. Round every corner generously (100px pills for nav/buttons/badges, 20–26px for cards); use thick 3px black borders and hard, un-blurred offset shadows (e.g. 8px 8px 0 black) plus a slight rotation on hover instead of soft shadows. Add four free-floating decorative shapes (circle, triangle, rounded square, blob) with independent slow spin/bob animations behind the hero, and a rotated (-1.5deg), infinitely marching marquee strip of skill words just below it. Structure: a fixed floating black pill nav with a brand mark, an EN/中文 toggle, and a lime "Let's talk" CTA; a hero with a wave-emoji badge, a huge headline mixing a solid-blue word and a thick-underlined pink word, a lead paragraph, and two pill buttons; an About section with a lime label and a statement headline containing a pink highlight mark and a blue underline; a Projects section of rounded cards that cycle through all five accent colours, each with a year, title, description, and "Explore →"; a journey/Experience section of bordered rows that invert to black and shift right on hover; and a rounded blue Contact block with a yellow label, a huge headline, a white CTA button, and a link row, ending in a bold centered footer. Add scroll-triggered fade+rise+slight-rotate reveals via IntersectionObserver, respecting prefers-reduced-motion (also disable the floating shapes and marquee in that mode). Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp08_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].