daniel-c-harvey
a97cdcf395
Studio/Live/DJ Set eyebrows mirror Home's established vocabulary. Orphaned @media (max-width: 960px) for .section-dark-standfirst merged into the sibling dark-section block.
322 lines
15 KiB
Plaintext
322 lines
15 KiB
Plaintext
@page "/about"
|
|
@using DeepDrftPublic.Client.Controls
|
|
|
|
<PageTitle>The Collective - Deep DRFT</PageTitle>
|
|
|
|
@* ── HERO (split 50/50) — reuses the .hero-* type classes with About's own words.
|
|
NOT DeepDrftHero (that hard-codes the Deep/DRFT masthead + streaming CTA). ── *@
|
|
<section class="hero">
|
|
<MudGrid Spacing="0" Style="height: 100%;">
|
|
<MudItem xs="12" md="6">
|
|
<div class="hero-left">
|
|
<div class="hero-eyebrow @AnimClass">Charleston, South Carolina</div>
|
|
<h1 class="hero-title @AnimClass">The<br /><em>Collective</em></h1>
|
|
<p class="hero-desc @AnimClass">
|
|
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.
|
|
</p>
|
|
</div>
|
|
</MudItem>
|
|
|
|
<MudItem xs="12" md="6">
|
|
@* IMG SLOT A — hero duo portrait. Reuses the committed duo pair as interim. *@
|
|
<div class="hero-image-pane">
|
|
<ParallaxImage Image1="img/dd-duo-2-bw.jpg"
|
|
Image2="img/dd-duo-2.jpeg"
|
|
Alt1="Deep DRFT — two-person electronic music collective"
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.9"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.25" />
|
|
</div>
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
@* IMG SLOT B — full-bleed band under the hero, bw+colour crossfade pair. *@
|
|
<ParallaxImage Image1="img/dd-duo-hero-bw.jpeg"
|
|
Image2="img/dd-duo-hero.jpeg"
|
|
Alt1="Deep DRFT Electronic Music Duo"
|
|
FullWidth
|
|
InvertDirection
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.45"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.35"
|
|
Class="my-12" />
|
|
</section>
|
|
|
|
@* ════════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════════ *@
|
|
<div class="section-divider">
|
|
<div class="divider-line"></div>
|
|
<div class="divider-tag">The People</div>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
|
|
@* People intro — two-column section: label + serif title left, prose right. *@
|
|
<section class="section">
|
|
<div class="section-header-grid">
|
|
<MudGrid Style="margin-bottom: 5rem;">
|
|
<MudItem xs="12" md="4">
|
|
<div class="section-label">The Collective</div>
|
|
<h2 class="section-title">Two of Us,<br />No Fixed<br /><em>Roles</em></h2>
|
|
</MudItem>
|
|
<MudItem xs="12" md="8" Class="section-body-item">
|
|
<div class="section-body">
|
|
<p>
|
|
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.
|
|
</p>
|
|
</div>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
|
|
@* Member bio pair — two cards side by side; each composes with the body absent
|
|
(Khabran ships with an empty body slot, same null-renders-nothing discipline
|
|
as ReleaseDescription). *@
|
|
<MudGrid>
|
|
@foreach (var member in _members)
|
|
{
|
|
<MudItem xs="12" md="6">
|
|
<div class="bio-card">
|
|
<div class="bio-portrait">
|
|
@if (member.PortraitImage1 is not null)
|
|
{
|
|
<ParallaxImage Image1="@member.PortraitImage1"
|
|
Image2="@member.PortraitImage2"
|
|
Alt1="@($"{member.Name} — portrait")"
|
|
NaturalWidth="1365"
|
|
NaturalHeight="2048"
|
|
WindowHeightFraction="0.62"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.5" />
|
|
}
|
|
else
|
|
{
|
|
@* Graceful-degrade placeholder until a portrait file lands. *@
|
|
<div class="bio-portrait-placeholder" aria-hidden="true"></div>
|
|
}
|
|
</div>
|
|
<div class="bio-meta">
|
|
<div class="bio-name">@member.Name</div>
|
|
<div class="bio-role">@member.Role</div>
|
|
@if (!string.IsNullOrWhiteSpace(member.Bio))
|
|
{
|
|
<p class="bio-body">@member.Bio</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</section>
|
|
|
|
@* ════════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════════ *@
|
|
<div class="section-divider">
|
|
<div class="divider-line"></div>
|
|
<div class="divider-tag">The Process</div>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
|
|
@* Dark feature band — gear-stage cards. The dark ground carries the analytical register. *@
|
|
<section class="section-dark">
|
|
<div class="section-label section-label-dark">How It's Made</div>
|
|
<h2 class="section-title section-title-dark">
|
|
Digital, Analog,<br /><em>Whatever Moves</em>
|
|
</h2>
|
|
|
|
<p class="section-dark-standfirst">
|
|
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.
|
|
</p>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" /><line x1="9" y1="9" x2="9" y2="21" /></svg>
|
|
</div>
|
|
<div class="feature-title">Sketch</div>
|
|
<div class="feature-desc">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.</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" /><line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" /><line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" /><line x1="1" y1="14" x2="7" y2="14" /><line x1="9" y1="8" x2="15" y2="8" /><line x1="17" y1="16" x2="23" y2="16" /></svg>
|
|
</div>
|
|
<div class="feature-title">Arrange</div>
|
|
<div class="feature-desc">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.</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" /><line x1="12" y1="3" x2="12" y2="6" /><line x1="12" y1="18" x2="12" y2="21" /></svg>
|
|
</div>
|
|
<div class="feature-title">Studio</div>
|
|
<div class="feature-desc">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.</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M3 12h3l2-7 4 14 2-7h3" /><circle cx="20" cy="12" r="1.5" /></svg>
|
|
</div>
|
|
<div class="feature-title">Live Rig</div>
|
|
<div class="feature-desc">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.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@* IMG SLOT D — hands-on-gear band, the literal proof-of-effort image. *@
|
|
<section>
|
|
<ParallaxImage Image1="img/mixer-bw.jpg"
|
|
Image2="img/mixer.jpg"
|
|
Alt1="Deep DRFT — hands on the gear"
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.45"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.35" />
|
|
</section>
|
|
|
|
@* ════════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════════ *@
|
|
<div class="section-divider">
|
|
<div class="divider-line"></div>
|
|
<div class="divider-tag">The Product</div>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
|
|
@* Product intro — two-column section framing the catalogue as evidence. *@
|
|
<section class="section">
|
|
<div class="section-header-grid">
|
|
<MudGrid Style="margin-bottom: 5rem;">
|
|
<MudItem xs="12" md="4">
|
|
<div class="section-label">The Output</div>
|
|
<h2 class="section-title">Classics,<br />with a<br /><em>Twist</em></h2>
|
|
</MudItem>
|
|
<MudItem xs="12" md="8" Class="section-body-item">
|
|
<div class="section-body">
|
|
<p>
|
|
Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club.
|
|
</p>
|
|
</div>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
|
|
@* Medium triptych — one-line frame of each medium; definitions, not a re-pitch. *@
|
|
<div class="medium-grid">
|
|
<a class="medium-card" href="/cuts">
|
|
<div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
|
|
<div class="medium-scrim"></div>
|
|
</div>
|
|
<div class="medium-body">
|
|
<div class="medium-type">Studio</div>
|
|
<div class="medium-name">Cuts</div>
|
|
<div class="medium-desc">Studio work, composed and finished.</div>
|
|
</div>
|
|
</a>
|
|
<a class="medium-card" href="/sessions">
|
|
<div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
|
|
<div class="medium-scrim"></div>
|
|
</div>
|
|
<div class="medium-body">
|
|
<div class="medium-type">Live</div>
|
|
<div class="medium-name">Sessions</div>
|
|
<div class="medium-desc">Live, caught once, never the same twice.</div>
|
|
</div>
|
|
</a>
|
|
<a class="medium-card" href="/mixes">
|
|
<div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
|
|
<div class="medium-scrim"></div>
|
|
</div>
|
|
<div class="medium-body">
|
|
<div class="medium-type">DJ Set</div>
|
|
<div class="medium-name">Mixes</div>
|
|
<div class="medium-desc">Uninterrupted sets, start to finish.</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
@* The live turn — "on the street, in the swamp": the identity beyond the releases. *@
|
|
<div class="section-split">
|
|
<MudGrid Spacing="0" Style="height: 100%;">
|
|
<MudItem xs="12" md="6">
|
|
<div class="split-left">
|
|
<div class="split-eyebrow">Beyond the Releases</div>
|
|
<h2 class="split-title">On the Street,<br /><em>in the Swamp</em></h2>
|
|
<p class="split-body">
|
|
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.
|
|
</p>
|
|
</div>
|
|
</MudItem>
|
|
|
|
<MudItem xs="12" md="6">
|
|
<div class="split-right">
|
|
<ParallaxImage Image1="img/dd-live.jpeg"
|
|
Alt1="Deep DRFT — live, out in the world"
|
|
InvertDirection
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.7"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.6" />
|
|
</div>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
|
|
@* ── Closing CTA into the catalogue ── *@
|
|
<section class="cta-banner">
|
|
<div class="cta-text">
|
|
<h2 class="cta-headline">Hear the<br /><em>Proof</em></h2>
|
|
<p class="cta-sub">The catalogue is the evidence. Start listening.</p>
|
|
</div>
|
|
<div class="cta-actions">
|
|
<a class="btn-white" href="/archive">Explore the Archive</a>
|
|
<a class="btn-outline-white" href="/cuts">Hear a Cut</a>
|
|
</div>
|
|
</section>
|
|
|
|
@* IMG SLOT E — closing atmosphere band. *@
|
|
<section>
|
|
<ParallaxImage Image1="img/dd-duo-hero-bw.jpeg"
|
|
Image2="img/dd-duo-hero.jpeg"
|
|
Alt1="Deep DRFT"
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.45"
|
|
InvertDirection
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.35" />
|
|
</section>
|
|
|
|
@code {
|
|
private string AnimClass => RendererInfo.IsInteractive ? string.Empty : "fade-up";
|
|
|
|
// 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."),
|
|
];
|
|
}
|