41 lines
2 KiB
Markdown
41 lines
2 KiB
Markdown
# UI Kit — Home
|
|
|
|
A high-fidelity recreation of the **joshbairstow.com** home page: a minimal hub
|
|
that *fuses* its three jobs into one composition rather than stacking three
|
|
sections.
|
|
|
|
- **Interactive hero** (`HeroZone.jsx`) — the reserved zone, shown as a
|
|
constrained placeholder: a **rounded** cut-out panel of warm chiaroscuro whose
|
|
light source drifts toward the pointer (the one signature motion moment),
|
|
with the **rings watermark** and a ring-dots accent. A **Zone spec** toggle
|
|
reveals the safe area (9% pad, 1:1.25) so any future element inherits the
|
|
frame. Respects `prefers-reduced-motion`.
|
|
- **Latest-writing line** (`LatestLine.jsx`) — the newest post as *one*
|
|
typographic line; bait, not a billboard. Arrow drifts on hover.
|
|
- **Subdomain index** (`SubdomainIndex.jsx`) — navigation as a refined index;
|
|
tolerates a growing/uneven set; a not-yet-live item shows a quiet `soon`
|
|
badge, never looks broken. Hover indents the row + draws an ochre tick.
|
|
- **Wordmark** (`Wordmark.jsx`) — Bodoni lockup; the only color event is a
|
|
single ochre period.
|
|
- **Light / dark** — **dark is the default** (deep warm ink ground); the header
|
|
toggle swaps to the bone alternate. Grain, the rings watermark, and simple
|
|
accent marks (rings/dots/pipes) sprinkled loosely carry through both.
|
|
|
|
## Run
|
|
Open `index.html`. React + Babel load from CDN; components are separate
|
|
`.jsx` files exported to `window`. Tokens come from `../../colors_and_type.css`;
|
|
marks/texture from `../../assets/`.
|
|
|
|
## Files
|
|
| File | Component |
|
|
|---|---|
|
|
| `index.html` | App shell, theming, layout grid |
|
|
| `Wordmark.jsx` | Name lockup |
|
|
| `HeroZone.jsx` | Interactive hero placeholder |
|
|
| `LatestLine.jsx` | Latest-post line |
|
|
| `SubdomainIndex.jsx` | Refined subdomain index nav |
|
|
|
|
## Notes
|
|
This is a **cosmetic recreation** for prototyping — interactions are faked
|
|
(links are inert). The hero's interactive element is a deliberate placeholder
|
|
per the brief; drop the real piece into the same clipped frame + safe area.
|