docs: spec About page for public site (Phase 12)
Three-movement About page (People/Process/Product) in the Home page's existing visual language; draft copy fenced for approval, image slots and open questions captured. Adds product-notes/about-page.md and PLAN.md §12.
This commit is contained in:
daniel-c-harvey
@@ -239,6 +239,45 @@ Sequenced as **eight waves**; the critical path is `11.A → 11.B → 11.C → 1
|
||||
|
||||
---
|
||||
|
||||
## Phase 12 — About Page (public site editorial)
|
||||
|
||||
A real About page for the public site (`/about`), built entirely in the **Home page's existing
|
||||
visual language** — no new look. Three movements — **the People**, **the Process**, **the Product** —
|
||||
with ethos / pathos / logos woven through the prose as registers, not labelled blocks. The strategic
|
||||
frame (Daniel): the site is *presentation and proof of effort* — evidence that real people are
|
||||
pushing the classic club sound forward; the About page is where that claim is made explicit.
|
||||
|
||||
This is its own phase, not a graft onto Phase 11: Phase 11 was structural (release-cardinal browse,
|
||||
queue, GUID handles), whereas this is a net-new **editorial** surface. It reuses Home's section
|
||||
primitives wholesale (`.hero`, `.section-divider`, two-column `.section`, dark `.section-dark`
|
||||
feature band, `.section-split`, `.cta-banner`, `ParallaxImage` full-bleed bands) — the only candidate
|
||||
new styling is two member-bio cards, and even those should be assembled from existing type tokens
|
||||
first. Full spec — section order, the Home-primitive mapping, per-section content intent, image-slot
|
||||
table, and all draft copy fenced for approval: `product-notes/about-page.md`.
|
||||
|
||||
**Voice constraint (hard):** smart, serious, no AI-isms — underground Detroit/Midwest deep-club-house
|
||||
heritage carried to Charleston. **All body prose is DRAFT pending Daniel's approval** — section
|
||||
headers and UI labels may be set; any sentence/paragraph of site copy is a placeholder until Daniel
|
||||
(who curates the band's public voice) passes it. The spec's `[COPY …]` blocks are drafts, not final.
|
||||
|
||||
**Image slots (5; 4–5 photos, files still being sorted — every slot is a TODO, do not block):** duo
|
||||
hero portrait (likely hero), full-bleed atmosphere band, two member bio portraits (Khabran, Daniel),
|
||||
a hands-on-gear "proof of effort" band, and a closing band. Each must degrade gracefully (fallback /
|
||||
absent) until a file lands — the page composes correctly with zero images.
|
||||
|
||||
**Open questions (carried in the spec §9):** Khabran's bio text (drop-in slot, TODO — Daniel's bio is
|
||||
drafted from the transcript, Khabran's pending); final photo files; **image hosting path** —
|
||||
`wwwroot/img/` (recommended, Home-analogous, marketing chrome) vs. the image vault (content
|
||||
machinery, over-built here), flagged for staff-engineer; **whether CUTS/SESSIONS/MIXES are explained
|
||||
here** (recommend yes, a one-line-per-medium reuse of Home's `.medium-card` grid); where the
|
||||
"designed, not extracted" thesis lands (recommend the Process movement); hero title wording.
|
||||
|
||||
**Dependency shape:** none — fully free-floating; depends only on the Home primitives that already
|
||||
exist. The only true gate is Daniel's copy pass + final image files. `[design / spec — awaiting
|
||||
Daniel approval of structure and copy]`
|
||||
|
||||
---
|
||||
|
||||
## Working with this file
|
||||
|
||||
- **Add items by extending an existing phase first**; only create a new phase when the addition genuinely doesn't fit any of 1–5. Phase numbers are organisational, not sequencing.
|
||||
|
||||
@@ -0,0 +1,381 @@
|
||||
# About Page — DeepDrft public site — Design Spec
|
||||
|
||||
Status: **proposed** (2026-06-17). Author: product-designer. Date: 2026-06-17.
|
||||
Implementer: staff-engineer (when approved). Surface: **public site only** (`DeepDrftPublic` /
|
||||
`DeepDrftPublic.Client`).
|
||||
|
||||
> **All body prose in this spec is DRAFT, fenced as `[COPY — FOR APPROVAL]`. Daniel curates the
|
||||
> band's public voice himself.** Section headers, eyebrows, and UI labels are proposed and may be
|
||||
> set; any *sentence or paragraph* of site copy is a placeholder pending Daniel's own words. Do not
|
||||
> ship the drafts as written without his pass.
|
||||
|
||||
Cross-references: `Pages/Home.razor` + `Pages/Home.razor.css` (the visual language this page mirrors
|
||||
— inspected, not invented), `Controls/DeepDrftHero.razor` (hero type treatment),
|
||||
`DeepDrftShared.Client/Components/ParallaxImage.razor` (the full-bleed image idiom), `PLAN.md §12`
|
||||
(the concise phase entry). Plan only — no code edits made by this doc.
|
||||
|
||||
---
|
||||
|
||||
## 0. Goal and shape
|
||||
|
||||
A real About page with three movements — **the People**, **the Process**, **the Product** — with
|
||||
ethos / pathos / logos woven through the prose rather than bolted on as a labelled block. It reads
|
||||
as a continuous editorial scroll in the **exact visual language of the Home page**, not a new look.
|
||||
|
||||
The strategic intent (Daniel's framing, paraphrased): the site is *presentation and proof of effort*
|
||||
— evidence that real people in the Charleston scene are pushing classic club sounds forward. The
|
||||
About page is where that claim is made explicit. It is the page that earns the catalogue.
|
||||
|
||||
Route: `/about`. Linked from the main menu (`DeepDrftMenu` / `Pages.cs` nav index) and a natural
|
||||
target for the Home page's existing copy about the collective.
|
||||
|
||||
---
|
||||
|
||||
## 1. The look — mapped to the Home page (inspected, not invented)
|
||||
|
||||
The Home page (`Pages/Home.razor`) is built from a small, repeating set of section primitives. The
|
||||
About page reuses them verbatim so the two pages are visually continuous. Every class below is one
|
||||
the Home page already renders (scoped in `Home.razor.css`, mirrored in the global
|
||||
`deepdrft-styles.css`). **No new visual vocabulary is proposed** — the only genuinely new styling
|
||||
need is two member-bio cards (§4), and even those should be assembled from existing spacing/type
|
||||
tokens before any bespoke class is added.
|
||||
|
||||
The Home primitives, in the order they appear there, and how each maps onto About:
|
||||
|
||||
| Home primitive | Classes | Role on Home | Reuse on About |
|
||||
|---|---|---|---|
|
||||
| **Split hero** (50/50 grid) | `.hero`, `.hero-left`, `DeepDrftHero` | Title + NowPlaying panel | The About hero — left column carries the eyebrow + title + standfirst; right column carries the **duo hero portrait** (see §3) |
|
||||
| **Full-bleed parallax band** | `<ParallaxImage FullWidth>` | Duo photo under the hero | The duo shot or a hands-on-gear shot as the hero's full-width anchor |
|
||||
| **Section divider** | `.section-divider`, `.divider-line`, `.divider-tag` | "The Sound" rule between movements | One divider per movement boundary — `The People` / `The Process` / `The Product` are the three `.divider-tag`s |
|
||||
| **Two-column section** | `.section`, `.section-header-grid`, `.section-label`, `.section-title`, `.section-body` | "Music through Every Medium" (label+title left, prose right) | The default body rhythm for each movement — label + serif title on the left (md=4), prose on the right (md=8) |
|
||||
| **Dark feature band** | `.section-dark`, `.section-label-dark`, `.section-title-dark`, `.features-grid`, `.feature-card` | "Built for the Committed Listener" | **The Process** gear/method band — the dark ground suits the warehouse/rig material; the `feature-card` grid becomes the gear-stage cards (§5) |
|
||||
| **Split section** | `.section-split`, `.split-left`, `.split-right`, `.split-eyebrow`, `.split-title`, `.split-body` | "Where the Holy City Meets the Future" (prose left, parallax portrait right) | The **People** origin/meeting story (prose + a portrait) and the **Product** "on the street, in the swamp" turn |
|
||||
| **CTA banner** | `.cta-banner`, `.cta-headline`, `.cta-sub`, `.cta-actions`, `.btn-white`, `.btn-outline-white` | "Ready to Drift Deeper?" | Closing CTA into the catalogue / archive |
|
||||
| **Trailing parallax** | `<ParallaxImage>` (`mixer.jpg`) | Closing image | A closing hands-on-gear band |
|
||||
|
||||
**Type and palette** are inherited automatically — these classes already encode the Bodoni
|
||||
Moda / Cormorant / DM Sans stack and the light/dark palettes. `<em>` inside `.section-title` /
|
||||
`.split-title` / `.cta-headline` is the established italic-serif emphasis device (Home uses it on
|
||||
*Every*, *Committed Listener*, *Meets the Future*, *Drift*). The About titles should use the same
|
||||
device on one word per title, not more.
|
||||
|
||||
**Hero title treatment.** `DeepDrftHero` hard-codes "Deep / DRFT" — do **not** reuse the component
|
||||
verbatim for About (it carries the streaming CTA and the home masthead). Instead reuse its **CSS
|
||||
classes** (`.hero-eyebrow`, `.hero-title`, `.hero-subtitle`, `.hero-desc`) directly in the About
|
||||
hero markup so the type scale matches, with About's own words. (The `@AnimClass` fade-up-on-prerender
|
||||
trick in `DeepDrftHero` is worth copying for the eyebrow/title if Daniel wants the same entrance.)
|
||||
|
||||
---
|
||||
|
||||
## 2. Page structure and section order
|
||||
|
||||
The scroll, top to bottom. Movements are bounded by `.section-divider` tags so the three-movement
|
||||
structure is legible without a heading that says "Movement One."
|
||||
|
||||
```
|
||||
┌─ HERO (split 50/50) ──────────────────────────────────────────┐
|
||||
│ left: eyebrow "Charleston, South Carolina" │
|
||||
│ title "Deep <em>DRFT</em>" or "Who We <em>Are</em>" │
|
||||
│ standfirst (the ethos line, condensed) │
|
||||
│ right: DUO HERO PORTRAIT [IMG SLOT A — likely hero] │
|
||||
├─ full-bleed parallax band [IMG SLOT B — duo or gear] ─────────┤
|
||||
│ │
|
||||
│ ── divider: "The People" ── │
|
||||
│ SECTION (two-col): label "The Collective" + title; │
|
||||
│ prose: how they met / shared synths / shared taste │
|
||||
│ MEMBER BIO PAIR (two cards): [IMG SLOT C1 — Khabran] │
|
||||
│ [IMG SLOT C2 — Daniel] │
|
||||
│ each: portrait + name + role line + bio (drop-in slot) │
|
||||
│ SPLIT section (origin/meeting story + portrait) — optional │
|
||||
│ │
|
||||
│ ── divider: "The Process" ── │
|
||||
│ SECTION-DARK: label "How It's Made" + title; │
|
||||
│ gear-stage cards (feature-grid): │
|
||||
│ Sketch → Arrange → Studio → Live Rig │
|
||||
│ full-bleed parallax band [IMG SLOT D — hands on gear] │
|
||||
│ │
|
||||
│ ── divider: "The Product" ── │
|
||||
│ SECTION (two-col): label "The Output" + title; │
|
||||
│ prose: the catalogue as evidence │
|
||||
│ MEDIUM TRIPTYCH (optional reuse of Home's medium-card grid): │
|
||||
│ CUTS / SESSIONS / MIXES — brief frame each │
|
||||
│ SPLIT section: "...on the street, in the swamp" — live │
|
||||
│ identity beyond the releases │
|
||||
│ │
|
||||
│ CTA banner: into the archive / catalogue │
|
||||
│ trailing parallax [IMG SLOT E — gear/atmosphere] │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Why this order.** Ethos / pathos / logos are not three sections — they are three registers carried
|
||||
*through* the three movements:
|
||||
|
||||
- **The People** carries the **pathos** — heart and soul, the metalhead-at-heart, music for strife
|
||||
and celebration, two people who met over synthesizers.
|
||||
- **The Process** carries the **logos** — the gear, the method, "science and math is just as
|
||||
important as beauty," the soul that is *designed, not extracted*. The dark band's analytical feel
|
||||
fits this register.
|
||||
- **The Product** carries the **ethos** — the claim and the proof: classics with a twist, the
|
||||
catalogue as evidence, the collective's place in the Charleston scene, and the live identity
|
||||
("on the street, in the swamp").
|
||||
|
||||
The triad is woven, not labelled. No section is titled "Our Ethos."
|
||||
|
||||
---
|
||||
|
||||
## 3. The hero
|
||||
|
||||
Mirror Home's `.hero` split.
|
||||
|
||||
- **Left (`md=6`, `.hero-left`):** eyebrow + title + standfirst, using the `.hero-*` classes.
|
||||
- Eyebrow: `Charleston, South Carolina` (matches Home's hero eyebrow — anchors place immediately).
|
||||
- Title: a one-or-two-word masthead with the `<em>` device. Candidate: **"Who We <em>Are</em>"**
|
||||
or simply **"The <em>Collective</em>"**. (Header — proposed, not copy.)
|
||||
- Standfirst: the condensed ethos line — see `[COPY A]` below.
|
||||
- **Right (`md=6`):** **IMG SLOT A — the duo hero portrait.** This is the **likely hero image**.
|
||||
A duo shot reads "two people, a collective" at first paint. Aspect: landscape or square works in
|
||||
the split column; if a strong landscape duo file exists, prefer it. (Home uses
|
||||
`dd-duo-hero.jpeg` / `dd-duo-hero-bw.jpeg` as a 2048×1365 landscape pair in the full-bleed band —
|
||||
About could either reuse that pair in the band and put a *different* duo shot in the hero column,
|
||||
or promote it.)
|
||||
|
||||
Below the hero, a **full-bleed `<ParallaxImage FullWidth>` band** (IMG SLOT B) exactly as Home does
|
||||
under its hero. The bw/colour hover-crossfade pair (`Image1` + `Image2`) is the established idiom —
|
||||
supply both a bw and a colour file per slot where available (Home pairs `dd-duo-hero-bw` +
|
||||
`dd-duo-hero`).
|
||||
|
||||
> `[COPY A — FOR APPROVAL — standfirst]`
|
||||
> *Two people, all the hats. We bring the heart and soul of Midwest deep club house to Charleston —
|
||||
> informed by the founders of the style, and pushing it forward.*
|
||||
|
||||
---
|
||||
|
||||
## 4. The People
|
||||
|
||||
**Divider tag:** `The People`.
|
||||
|
||||
**Intro (two-column `.section`):** `.section-label` "The Collective" + `.section-title` with the
|
||||
origin/meeting hook; prose in the right column about how they met (exchanging synthesizers, realising
|
||||
they made and enjoyed similar music) and that both members wear every hat — music, sound design,
|
||||
arranging, producing, mixing, field recording, visual design, custom sound tools.
|
||||
|
||||
> `[COPY B — FOR APPROVAL — People intro]`
|
||||
> *We met trading synthesizers and found out we were chasing the same thing. Two of us, no fixed
|
||||
> roles — we both write, arrange, produce, mix, record in the field, build the visuals, and make the
|
||||
> tools when the tools don't exist yet.*
|
||||
|
||||
### 4.1 Member bio pair
|
||||
|
||||
Two bio cards, side by side (`MudGrid`, `xs=12 md=6`). **Each member's bio text is a drop-in slot** —
|
||||
Daniel supplies the prose per member; the spec reserves the slot and the layout.
|
||||
|
||||
Per card:
|
||||
- **Portrait** — IMG SLOT C1 (Khabran), IMG SLOT C2 (Daniel). Portrait orientation (the existing
|
||||
`kp-shoulder-bw.jpeg` is 1365×2048 portrait — that aspect is the precedent). Bw or colour;
|
||||
recommend bw to match the editorial restraint of the rest of the site, with an optional
|
||||
colour-on-hover via the parallax/crossfade idiom if these become `ParallaxImage`s.
|
||||
- **Name** — `Khabran Peters`, `Daniel Harvey` (display serif, e.g. `.section-title` scale stepped
|
||||
down, or a dedicated `.bio-name` token if needed).
|
||||
- **Role line** — both are "everything," so the role line should state that rather than a single
|
||||
title. Candidate label: *Production · Sound Design · Live* (proposed UI label, not copy).
|
||||
- **Bio body** — `[BIO SLOT — Daniel supplies per member]`.
|
||||
|
||||
> **Khabran's bio is an OPEN TODO** — Daniel will add it later (open question §8). Daniel's bio
|
||||
> material exists in the interview transcript and is drafted below for approval; **Khabran's card
|
||||
> renders its slot empty / with a placeholder until his text arrives.** Design the card so a missing
|
||||
> bio degrades gracefully (portrait + name + role line still compose; the body block simply absent) —
|
||||
> the same null-renders-nothing discipline `ReleaseDescription` uses.
|
||||
|
||||
> `[COPY C — FOR APPROVAL — Daniel bio, drafted from transcript; Khabran's TBD]`
|
||||
> *Daniel started on drums at ten and found electronic music at seventeen — synthesizers first. A
|
||||
> metalhead at heart, he spent ten years as a Detroit artist, shaped most of all by modern
|
||||
> underground Detroit techno. He's also an engineer: custom plugins, hardware recording rigs, the
|
||||
> tools behind the tracks. To him the science and the math matter as much as the beauty — tension and
|
||||
> release, built deliberately.*
|
||||
|
||||
### 4.2 Optional split — the meeting / origin
|
||||
|
||||
If the bio pair runs short, a `.section-split` (prose left, portrait right — IMG could reuse the duo
|
||||
shot or a second portrait) carries the meeting story and the pathos register: *underground art by
|
||||
real people, for real people, for strife and celebration.* Mark optional — fold into the intro prose
|
||||
if Daniel prefers a tighter People movement.
|
||||
|
||||
---
|
||||
|
||||
## 5. The Process
|
||||
|
||||
**Divider tag:** `The Process`.
|
||||
|
||||
Reuse Home's **dark band** (`.section-dark`). `.section-label-dark` "How It's Made" +
|
||||
`.section-title-dark` (e.g. *Digital, Analog, <em>Whatever Moves</em>*). The dark ground gives the
|
||||
gear/method material its own visual chapter and reads as the analytical (logos) register.
|
||||
|
||||
**Gear-stage cards** — reuse the `.features-grid` / `.feature-card` structure (Home uses four cards;
|
||||
About uses the same count). These are not "features we offer" but **stages of the process**, each
|
||||
with a hand-rolled SVG icon in the existing `.feature-icon` slot:
|
||||
|
||||
1. **Sketch** — start on the Akai Force or MPC Live 3.
|
||||
2. **Arrange** — into Ableton, or the whole thing in REAPER (heavy REAPER users).
|
||||
3. **Studio** — an arsenal of synths and pedals; digital and analog, hard and soft, some custom-made.
|
||||
4. **Live Rig** — DAWless live synthesizer rigs, sometimes fully improvised. Built for the warehouse.
|
||||
|
||||
> `[COPY D — FOR APPROVAL — Process card bodies]`
|
||||
> 1. *Sketch — A loop starts on the Force or the MPC. The idea comes first.*
|
||||
> 2. *Arrange — Sometimes into Ableton, sometimes start-to-finish in REAPER. Whatever gets the take.*
|
||||
> 3. *Studio — A wall of synths and pedals, digital and analog, some of it built by hand.*
|
||||
> 4. *Live Rig — DAWless rigs for the room. Sometimes composed, sometimes pure improvisation. Think
|
||||
> Octave One — big spread of gear, big tunes, meant for the warehouse.*
|
||||
|
||||
> `[COPY D-intro — FOR APPROVAL — Process standfirst, optional]`
|
||||
> *It doesn't matter how — digital or analog, hard or soft, bought or built — as long as it moves
|
||||
> the room. The soul in this music is designed, not extracted; assembled, not distilled.*
|
||||
|
||||
(The "designed, not extracted / assembled, not distilled / constructed, not grown" line is the
|
||||
sharpest statement of the logos register and the soul-is-engineered thesis. Recommend it land here,
|
||||
in the Process movement, rather than the hero — it's the *why behind the method*, and it pays off
|
||||
the dark band. Flag for Daniel: hero standfirst vs. Process — his call.)
|
||||
|
||||
Below the dark band: a **full-bleed parallax** (IMG SLOT D — **hands-on-gear shot**, the literal
|
||||
proof-of-effort image). Home's trailing `mixer.jpg` / `mixer-bw.jpg` pair is the precedent.
|
||||
|
||||
---
|
||||
|
||||
## 6. The Product
|
||||
|
||||
**Divider tag:** `The Product`.
|
||||
|
||||
Two-column `.section`: `.section-label` "The Output" + `.section-title` (e.g. *Classics, with a
|
||||
<em>Twist</em>*); prose framing the catalogue as the evidence — what the site is *for*.
|
||||
|
||||
> `[COPY E — FOR APPROVAL — Product intro]`
|
||||
> *Everything ends up here, in the catalogue. We play the classics, with a twist — proof that
|
||||
> someone in Charleston is still pushing the club sound forward.*
|
||||
|
||||
### 6.1 Medium triptych — should CUTS / SESSIONS / MIXES be explained here?
|
||||
|
||||
**Open question (§8), recommendation below.** The three mediums already exist app-wide and the Home
|
||||
page already carries a medium triptych (`.medium-grid` / `.medium-card`, the Studio / Live / DJ Mix
|
||||
cards). Two shapes:
|
||||
|
||||
- **(i) Reuse the `.medium-card` grid** with a one-line frame of each medium (CUTS = composed studio
|
||||
work; SESSIONS = live, unrepeatable; MIXES = uninterrupted DJ sets), each linking to `/cuts`,
|
||||
`/sessions`, `/mixes`. **Pro:** ties the About narrative directly to the catalogue; reuses an
|
||||
existing component; gives the Product movement a concrete payoff. **Con:** partial duplication of
|
||||
the Home page's medium section.
|
||||
- **(ii) Prose-only mention**, no cards — name the three mediums in a sentence and let the catalogue/
|
||||
nav do the explaining. **Pro:** avoids duplicating the Home triptych. **Con:** the About page is
|
||||
the natural place a newcomer learns *what a "Session" is* vs. a "Mix."
|
||||
|
||||
**Recommend (i) with a lighter touch than Home** — the About page is exactly where the taxonomy
|
||||
should be explained for someone reading top-to-bottom, and the medium cards are the established
|
||||
device for it. Keep the copy to one line per medium (a frame, not a re-pitch) so it reads as
|
||||
*definition*, not a second sales section. If Daniel finds it too repetitive next to Home, fall back
|
||||
to (ii).
|
||||
|
||||
> `[COPY F — FOR APPROVAL — medium one-liners, if cards used]`
|
||||
> - *CUTS — studio work, composed and finished.*
|
||||
> - *SESSIONS — live, caught once, never the same twice.*
|
||||
> - *MIXES — uninterrupted sets, start to finish.*
|
||||
|
||||
### 6.2 The live turn — "on the street, in the swamp"
|
||||
|
||||
Close the Product movement with a `.section-split` (or a second short band) carrying the live/public
|
||||
identity — the part of the collective that isn't a release at all.
|
||||
|
||||
> `[COPY G — FOR APPROVAL — live identity]`
|
||||
> *But that's just the releases. We're also out there — on the street, in the swamp, with a PA, a
|
||||
> generator, and a bunch of good vibes.*
|
||||
|
||||
---
|
||||
|
||||
## 7. Closing CTA
|
||||
|
||||
Reuse Home's `.cta-banner`. Headline with the `<em>` device; one primary + one ghost action.
|
||||
|
||||
- Primary (`.btn-white`): **Explore the Archive** → `/archive`.
|
||||
- Secondary (`.btn-outline-white`): **Hear a Cut** / **Start Streaming** — reuse `StreamNowButton`'s
|
||||
behaviour if a streaming CTA is wanted, or link to `/cuts`. (Home's CTA pairs "Explore the Archive"
|
||||
+ a live-schedule button; About should point inward to the catalogue, the thing it just argued for.)
|
||||
|
||||
> `[COPY H — FOR APPROVAL — CTA]`
|
||||
> *Headline: "Hear the <em>Proof</em>" / sub: "The catalogue is the evidence. Start listening."*
|
||||
|
||||
Trailing full-bleed parallax (IMG SLOT E) to close, matching Home's structure.
|
||||
|
||||
---
|
||||
|
||||
## 8. Image slots — summary table
|
||||
|
||||
5 slots specced; 4–5 photos expected. **Daniel is still sorting final files — treat every slot as a
|
||||
TODO; do not block on them.** Each slot degrades to the existing fallback treatment (or a bw
|
||||
placeholder) until a file lands.
|
||||
|
||||
| Slot | Section | Role | Orientation / aspect | bw+colour pair? | Likely file |
|
||||
|---|---|---|---|---|---|
|
||||
| **A** | Hero right column | **Likely HERO** — duo shot, "two people" at first paint | Landscape or square (fits `md=6`) | Optional (hover crossfade) | a duo shot; could promote `dd-duo-2.jpeg` |
|
||||
| **B** | Full-bleed band under hero | Atmosphere / duo anchor | Landscape ~2048×1365 (Home precedent) | **Yes** (Home pairs bw+colour) | `dd-duo-hero` pair (or a new duo/gear shot) |
|
||||
| **C1** | People — bio card | Khabran portrait | Portrait ~1365×2048 | Optional | Khabran portrait (TODO) |
|
||||
| **C2** | People — bio card | Daniel portrait | Portrait ~1365×2048 | Optional | Daniel portrait (TODO) |
|
||||
| **D** | Process — band under dark section | **Hands-on-gear** (proof of effort) | Landscape | Yes | a gear shot (or reuse `mixer` pair) |
|
||||
| **E** | Closing trailing band | Atmosphere close | Landscape | Yes | gear/atmosphere |
|
||||
|
||||
If only 4 files arrive, the two safe drops are slot B (the hero column A already carries a duo shot)
|
||||
and slot E (the closing band is decorative). The two bio portraits (C1/C2) and one gear shot (D) are
|
||||
the load-bearing four.
|
||||
|
||||
### Image hosting — OPEN QUESTION for implementation
|
||||
|
||||
**Where do these images physically live, and by what path are they served?** Two precedents exist in
|
||||
the repo and they differ:
|
||||
|
||||
- **Static `wwwroot/img/`** — every Home page image (`dd-duo-hero.jpeg`, `mixer.jpg`, etc.) is a
|
||||
committed static asset under `DeepDrftPublic/wwwroot/img/`, referenced as `img/...`. Simplest;
|
||||
these are brand/marketing assets, not catalogue content. **This is the likely right home** for the
|
||||
About images by direct analogy to Home.
|
||||
- **Image vault / streaming endpoint** — release cover art and session hero images go through the
|
||||
FileDatabase Image vault and the unauthenticated image-streaming endpoint. That machinery is for
|
||||
*content* (covers, hero images tied to releases), not chrome. The About portraits are chrome.
|
||||
|
||||
**Recommendation (flag, do not resolve):** put the About images in `wwwroot/img/` alongside the Home
|
||||
assets — they are marketing chrome with the exact lifecycle of the existing Home photos. Only reach
|
||||
for the vault if Daniel wants these editable from the CMS, which the brief gives no signal of. **This
|
||||
is staff-engineer's call at implementation; named here so it isn't discovered mid-build.**
|
||||
|
||||
---
|
||||
|
||||
## 9. Open questions (for Daniel)
|
||||
|
||||
1. **Khabran's bio.** Not yet supplied — the card renders its body slot empty/placeholder until it
|
||||
arrives. Daniel's bio is drafted from the transcript (`[COPY C]`); both are his to finalise.
|
||||
2. **Final photos.** 4–5 files still being sorted; every image slot is a TODO. Spec is laid out so
|
||||
placement is ready when files arrive (§8).
|
||||
3. **Image hosting path.** `wwwroot/img/` (recommended, Home-analogous) vs. the image vault. Flagged
|
||||
for staff-engineer; recommendation in §8.
|
||||
4. **CUTS / SESSIONS / MIXES — explained on About?** Recommend yes, via a one-line-per-medium reuse
|
||||
of the `.medium-card` grid (§6.1); fall back to prose-only if it reads as duplicate of Home.
|
||||
5. **Where does the "designed, not extracted" thesis land** — hero standfirst or the Process
|
||||
movement? Recommend Process (§5).
|
||||
6. **Hero title wording** — "Who We Are" vs. "The Collective" vs. a Deep/DRFT masthead echo. Header
|
||||
is proposed; Daniel's call.
|
||||
7. **All `[COPY …]` blocks** are drafts pending Daniel's voice. None ship as written without his pass.
|
||||
|
||||
---
|
||||
|
||||
## 10. Implementation notes (for staff-engineer, when approved)
|
||||
|
||||
- **No new visual language.** Assemble from the Home primitives in §1. The only candidate new classes
|
||||
are the two bio-card pieces (`.bio-name`, `.bio-role`, `.bio-body` or similar) — and even those
|
||||
should first be tried with existing type tokens before adding scoped CSS to a new `About.razor.css`.
|
||||
- **Hero:** reuse the `.hero-*` classes directly (About's own words), **not** the `DeepDrftHero`
|
||||
component (it hard-codes the masthead + streaming CTA).
|
||||
- **Page-scoped CSS:** follow Home's pattern — `About.razor.css` scoped, mirrored into the global
|
||||
`deepdrft-styles.css` only for anything that must reach beyond the component (Home does this for the
|
||||
section primitives; the About page should *consume* those, not re-declare them).
|
||||
- **ParallaxImage:** supply `NaturalWidth`/`NaturalHeight` for every above-the-fold band to avoid the
|
||||
documented layout shift (component remarks); pass the bw+colour `Image1`/`Image2` pair where files
|
||||
allow.
|
||||
- **Nav:** register `/about` in `Pages.cs` (the centralised nav index) so it appears in
|
||||
`DeepDrftMenu`.
|
||||
- **Null-safe images/bios:** every image slot and Khabran's bio must degrade gracefully (fallback or
|
||||
absent block) — the page must compose correctly before any final file or Khabran's text lands.
|
||||
- **Out of scope:** no source/Razor written by this spec; this is design only.
|
||||
Reference in New Issue
Block a user