# About Page — DeepDrft public site — Design Spec Status: **APPROVED for implementation** — structure + copy signed off 2026-06-17 (Phase 12). Author: product-designer. Date: 2026-06-17. Implementer: staff-engineer. Surface: **public site only** (`DeepDrftPublic` / `DeepDrftPublic.Client`). > **Visual-distinction follow-up (2026-06-17):** the page as built reads too much like Home (it reuses > Home's section primitives in Home's order). Structure + copy below are unaffected; the *visual > treatment* is being revisited. See `about-page-distinction.md` for 2–3 proposed directions and a > recommendation — **awaiting Daniel's pick.** > **Approval (2026-06-17):** Daniel signed off the structure and all copy. The spec is > implementation-ready. All COPY blocks (A–H, D-intro) are **APPROVED** — D (Process card bodies) is > approved *provisionally*: Daniel's word was "it's fine for now, we can change that wording later," > so the body copy may still be reworded before or after build. The **only remaining open item is the > final photo files** (§8, item 2) — Daniel is still sorting them; every image slot stays a > graceful-degrade placeholder until files land. Khabran's bio is resolved: build the card now with an > empty/placeholder body slot, Daniel drops his text in later. 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** | `` | 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** | `` (`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. `` 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 "The Collective" │ │ 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: **"The Collective"** (RESOLVED 2026-06-17). The `` device falls on *Collective*. This is a label, not body 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 `` 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 — APPROVED — standfirst]` > Two people, many hats. We bring the heart and soul of Midwest deep house to Charleston — informed > by the founders of the style, and promising to push 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 — APPROVED — People intro]` > We met trading synthesizers and found out we were seeking 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 — RESOLVED (2026-06-17):** build the card now with an empty / placeholder body > slot; Daniel drops his text in later. This is not a blocker — **the card must compose correctly > with the body absent** (portrait + name + role line still render; the body block simply omitted) — > the same null-renders-nothing discipline `ReleaseDescription` uses. Daniel's bio (`[COPY C]`) is > approved verbatim below. > `[COPY C — APPROVED — Daniel bio, Daniel's words verbatim; Khabran's body slot ships empty until he supplies it]` > Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. > A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the > nights with synthesized tones and rhythms, shaped most of all by modern underground Detroit techno. > Art & engineering cannot be separated: custom plugins, hardware recording & performance rigs, the > tools behind the tracks are just as important as the finished sound. To him the science and the > math matter as much as the beauty — tension and release, built deliberately. > **Typo flags (Daniel has chosen to KEEP these verbatim for now — text preserved above, not > auto-corrected; flag retained so it isn't lost):** (1) "embarked **in** electronic music" reads as > a likely slip for "embarked **on**"; (2) "A metalhead **at from** a young age" reads as a likely > slip for "A metalhead **from** a young age." Both left as Daniel wrote them — his to revisit if he > wants. ### 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, Whatever Moves*). 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** — a big spread of hardware played 100% live, DAWless, sometimes fully improvised. Built for the room / the warehouse. > `[COPY D — APPROVED (provisional) — Process card bodies — wording may be revised later per Daniel]` > 1. *Sketch — A loop starts on the Force or the MPC, hands on the pads. The idea has to survive > first contact before anything else gets built around it.* > 2. *Arrange — Sometimes into Ableton, sometimes start-to-finish in REAPER. The track gets shaped > wherever it wants to go — we follow the take, not the template.* > 3. *Studio — A deep bench of synths, drum machines, and pedals; digital and analog, hard and soft, > some of it built by hand. If the sound we need doesn't exist yet, we make the thing that makes it.* > 4. *Live Rig — No laptop, no safety net. A full spread of hardware patched together and played > 100% live — sequenced, twisted, and pushed in the moment. Built for the room, the warehouse, the > night that doesn't repeat.* > `[COPY D-intro — APPROVED — 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. **RESOLVED (2026-06-17): it lands here, in the Process movement** — carried by COPY D-intro above — not the hero. It is the *why behind the method* and pays off the dark band.) 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 Twist*); prose framing the catalogue as the evidence — what the site is *for*. > `[COPY E — APPROVED — Product intro]` > Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound > of the club. ### 6.1 Medium triptych — CUTS / SESSIONS / MIXES on About — **RESOLVED: yes, cards** **RESOLVED (2026-06-17, per COPY F approval): use the cards.** The medium triptych reuses Home's `.medium-grid` / `.medium-card` grid, with a one-line frame of each medium, each linking to `/cuts`, `/sessions`, `/mixes`. The About page is where a newcomer reading top-to-bottom learns *what a "Session" is* vs. a "Mix," and the medium cards are the established device for it. Copy is one line per medium (a frame, not a re-pitch) so it reads as *definition*, not a second sales section. (Alternative considered and rejected: prose-only mention with no cards. Rejected because it loses the concrete payoff at the end of the Product movement and pushes the taxonomy explanation off the page.) > `[COPY F — APPROVED — medium one-liners]` > - 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 — APPROVED — 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 `` 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 — APPROVED — CTA]` > Headline: "Hear the Proof" / 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 — RESOLVED (2026-06-17) **Static serving under `DeepDrftPublic/wwwroot/img/`, same as the existing Home photos.** The About page is not dynamic — these are marketing chrome with the exact lifecycle of the Home photos (`dd-duo-hero.jpeg`, `mixer.jpg`, etc.), committed static assets referenced as `img/...`. **No image vault** — that machinery is for *content* (release covers, session hero images tied to releases), and the About portraits are chrome, not content. Files drop into `wwwroot/img/` and are referenced directly. --- ## 9. Open questions — resolved 2026-06-17 The structure and all copy are signed off (Phase 12). **The only remaining open item is item 2 — final photo files.** Everything else is resolved. 1. **Khabran's bio.** **RESOLVED** — build the card now with an empty/placeholder body slot; Daniel drops his text in later. The card composes with the body absent (§4.1). Daniel's bio (`[COPY C]`) is approved verbatim. 2. **Final photos. — STILL OPEN (the one remaining TODO).** 4–5 files still being sorted; every image slot stays a graceful-degrade placeholder until files land. Spec is laid out so placement is ready when files arrive (§8). 3. **Image hosting path.** **RESOLVED** — static `DeepDrftPublic/wwwroot/img/`, same as Home photos; no image vault (§8). 4. **CUTS / SESSIONS / MIXES — explained on About?** **RESOLVED** — yes, via the one-line-per-medium `.medium-card` grid (§6.1), per COPY F approval. 5. **Where does the "designed, not extracted" thesis land?** **RESOLVED** — the Process movement, carried by COPY D-intro (§5). 6. **Hero title wording.** **RESOLVED** — "The Collective" (§3). 7. **Copy status.** **RESOLVED** — all COPY blocks (A–H, D-intro) approved; D (Process card bodies) approved *provisionally* (wording may be reworded later per Daniel). The two suggested typo-fixes in COPY C are flagged inline; Daniel has chosen to keep his text verbatim for now. --- ## 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.