@page "/about" @using DeepDrftPublic.Client.Controls @implements IAsyncDisposable @inject IJSRuntime JsRuntime The Collective - Deep DRFT @* ────────────────────────────────────────────────────────────────────────────── THE LINER NOTES — a numbered three-movement editorial essay. This page deliberately does NOT reuse Home's section grammar (centred dividers, symmetric 4/8 splits, the medium-card grid). Its backbone is a persistent left "rail" — a continuous vertical hairline (the narrative spine) carrying oversized Bodoni movement numerals (01/02/03) and mono marginalia — with the content column running asymmetrically to its right. Movement boundaries are rendered as a self-contained SVG waveform stroke (the DeepDrft visualizer motif, hand-authored here — NOT the live WaveformVisualizer component). The numeral active-highlight (green on the movement in view) is progressive enhancement via IntersectionObserver: without JS the numerals still render statically in low-opacity navy. See Interop/about/about-rail.ts. ────────────────────────────────────────────────────────────────────────────── *@ @* ── HERO — the page opener. Reuses the .hero-* type scale with About's own words. NOT DeepDrftHero (that hard-codes the Deep/DRFT masthead + streaming CTA). ── *@
Charleston, South Carolina

The
Collective

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.

@* IMG SLOT A — hero duo portrait, inset within the content column. *@
@* ════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════ *@
@* Waveform movement divider — a static SVG oscillation stroke carrying the movement tag. The folded-in D3 signature motif. *@
The People
@* People intro — prose hangs at the rail's left edge; the sharp line breaks left into the margin at large serif scale. *@
The Collective

Two of Us, No Fixed Roles

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.

@* Member bio pair — framed portrait insets with rail-side captions. Each composes with the body absent (Khabran ships with an empty body slot, the same null-renders-nothing discipline as ReleaseDescription). *@
@foreach (var member in _members) {
@if (member.PortraitImage1 is not null) { } else { @* Graceful-degrade placeholder until a portrait file lands. *@ }
@member.Name · @member.Role
@member.Name
@if (!string.IsNullOrWhiteSpace(member.Bio)) {

@member.Bio

}
}
@* ════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════ *@
The Process
@* Dark band — gear-stage cards. The navy ground carries the analytical register. *@
How It's Made

Digital, Analog, Whatever Moves

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.

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.
@* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image, captioned in the rail rather than run full-bleed. *@
the live rig
@* ════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════ *@
The Product
The Output

Classics, with a Twist

Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club.

@* Medium triptych — one-line frame of each medium; definitions, not a re-pitch. A stacked editorial list rather than Home's card grid. *@ @* The live turn — "on the street, in the swamp": the identity beyond releases. A left-breaking pull-quote at large serif scale. *@
Beyond the Releases

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.

@* ── Closing CTA into the catalogue ── *@

Hear the
Proof

The catalogue is the evidence. Start listening.

Explore the Archive Hear a Cut
@code { private string AnimClass => RendererInfo.IsInteractive ? string.Empty : "fade-up"; // A static sine path for the movement-divider waveform stroke. Authored as plain // SVG markup — independent of the live WaveformVisualizer component. The viewBox is // 1200×40; the curve oscillates around the vertical midline (y=20). private static readonly string WavePath = BuildWavePath(); private ElementReference _movementOne; private ElementReference _movementTwo; private ElementReference _movementThree; private IJSObjectReference? _railModule; protected override async Task OnAfterRenderAsync(bool firstRender) { if (!firstRender || !RendererInfo.IsInteractive) { return; } try { // Progressive enhancement only: lights the active movement's numeral green // as it scrolls into view. Numerals render statically without this. _railModule = await JsRuntime.InvokeAsync( "import", "./js/about/about-rail.js"); await _railModule.InvokeVoidAsync("observe", _movementOne, _movementTwo, _movementThree); } catch (JSException) { // Module failed to load — numerals stay statically navy. Nothing actionable. _railModule = null; } } public async ValueTask DisposeAsync() { if (_railModule is not null) { try { await _railModule.InvokeVoidAsync("unobserve"); await _railModule.DisposeAsync(); } catch (JSException) { // Runtime already gone (navigation/teardown) — nothing to clean up. } _railModule = null; } } // Builds an evaluated-at-compile-time sine path string for the divider stroke. private static string BuildWavePath() { // 8 full cycles across the 1200-wide viewBox, amplitude 14 around midline 20. const int width = 1200; const int steps = 96; const double midline = 20; const double amplitude = 14; const double cycles = 8; var sb = new System.Text.StringBuilder("M 0 20"); for (var i = 1; i <= steps; i++) { var x = width * (double)i / steps; var y = midline - amplitude * System.Math.Sin(cycles * 2 * System.Math.PI * i / steps); sb.Append(System.Globalization.CultureInfo.InvariantCulture, $" L {x:0.##} {y:0.##}"); } return sb.ToString(); } // Member bios. Khabran's body is an intentional empty slot — the card composes // without it (graceful degrade). Daniel's copy is verbatim per spec COPY C, // including the two typos he chose to keep ("embarked in", "metalhead at from"). // PortraitImage* are null until final portrait files land — the card renders a // placeholder treatment in their absence. private record Member( string Name, string Role, string? Bio, string? PortraitImage1 = null, string? PortraitImage2 = null); private readonly Member[] _members = [ new( Name: "Khabran Peters", Role: "Production · Sound Design · Live", Bio: null), new( Name: "Daniel Harvey", Role: "Production · Sound Design · Live", Bio: "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."), ]; }