daniel-c-harvey
412b96ba16
Resolve §9 open questions: hero title "The Collective", Khabran bio as empty-slot placeholder, wwwroot/img hosting, Process placement for "designed not extracted". COPY D approved provisional; typo flags kept.
24 KiB
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).
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 | <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-tags |
| 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 "The <em>Collective</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: "The Collective" (RESOLVED 2026-06-17). The
<em>device falls on Collective. This is a label, not body copy. - Standfirst: the condensed ethos line — see
[COPY A]below.
- Eyebrow:
- 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 usesdd-duo-hero.jpeg/dd-duo-hero-bw.jpegas 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 — 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.jpegis 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 becomeParallaxImages. - Name —
Khabran Peters,Daniel Harvey(display serif, e.g..section-titlescale stepped down, or a dedicated.bio-nametoken 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
ReleaseDescriptionuses. 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:
- Sketch — start on the Akai Force or MPC Live 3.
- Arrange — into Ableton, or the whole thing in REAPER (heavy REAPER users).
- Studio — an arsenal of synths and pedals; digital and analog, hard and soft, some custom-made.
- 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]
- 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.
- 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.
- 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.
- 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 <em> device; one primary + one ghost action.
- Primary (
.btn-white): Explore the Archive →/archive. - Secondary (
.btn-outline-white): Hear a Cut / Start Streaming — reuseStreamNowButton'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.
- 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. - 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).
- Image hosting path. RESOLVED — static
DeepDrftPublic/wwwroot/img/, same as Home photos; no image vault (§8). - CUTS / SESSIONS / MIXES — explained on About? RESOLVED — yes, via the one-line-per-medium
.medium-cardgrid (§6.1), per COPY F approval. - Where does the "designed, not extracted" thesis land? RESOLVED — the Process movement, carried by COPY D-intro (§5).
- Hero title wording. RESOLVED — "The Collective" (§3).
- 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-bodyor similar) — and even those should first be tried with existing type tokens before adding scoped CSS to a newAbout.razor.css. - Hero: reuse the
.hero-*classes directly (About's own words), not theDeepDrftHerocomponent (it hard-codes the masthead + streaming CTA). - Page-scoped CSS: follow Home's pattern —
About.razor.cssscoped, mirrored into the globaldeepdrft-styles.cssonly 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/NaturalHeightfor every above-the-fold band to avoid the documented layout shift (component remarks); pass the bw+colourImage1/Image2pair where files allow. - Nav: register
/aboutinPages.cs(the centralised nav index) so it appears inDeepDrftMenu. - 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.