style(about): redesign /about as numbered "Liner Notes" editorial spine
Replace Home-cloned section grammar with a numbered left rail (Bodoni numerals, vertical spine, mono marginalia), an asymmetric content column, and SVG waveform dividers. Adds a degrade-safe IntersectionObserver interop. Copy verbatim.
This commit is contained in:
daniel-c-harvey
@@ -1,9 +1,27 @@
|
||||
@page "/about"
|
||||
@using DeepDrftPublic.Client.Controls
|
||||
@implements IAsyncDisposable
|
||||
@inject IJSRuntime JsRuntime
|
||||
|
||||
<PageTitle>The Collective - Deep DRFT</PageTitle>
|
||||
|
||||
@* ── HERO (split 50/50) — reuses the .hero-* type classes with About's own words.
|
||||
@* ──────────────────────────────────────────────────────────────────────────────
|
||||
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). ── *@
|
||||
<section class="hero">
|
||||
<MudGrid Spacing="0" Style="height: 100%;">
|
||||
@@ -18,7 +36,7 @@
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
@* IMG SLOT A — hero duo portrait. Reuses the committed duo pair as interim. *@
|
||||
@* IMG SLOT A — hero duo portrait, inset within the content column. *@
|
||||
<div class="hero-image-pane">
|
||||
<ParallaxImage Image1="img/dd-duo-2-bw.jpg"
|
||||
Image2="img/dd-duo-2.jpeg"
|
||||
@@ -32,55 +50,43 @@
|
||||
</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>
|
||||
@* ════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════ *@
|
||||
<div class="movement" data-movement="1" @ref="_movementOne">
|
||||
<div class="rail" aria-hidden="true">
|
||||
<div class="rail-line"></div>
|
||||
<div class="rail-numeral">01</div>
|
||||
<div class="rail-margin">Charleston, SC</div>
|
||||
</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="movement-content">
|
||||
@* Waveform movement divider — a static SVG oscillation stroke carrying the
|
||||
movement tag. The folded-in D3 signature motif. *@
|
||||
<div class="wave-divider">
|
||||
<svg class="wave-stroke" viewBox="0 0 1200 40" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="@WavePath" />
|
||||
</svg>
|
||||
<span class="wave-tag">The People</span>
|
||||
</div>
|
||||
|
||||
@* People intro — prose hangs at the rail's left edge; the sharp line breaks
|
||||
left into the margin at large serif scale. *@
|
||||
<div class="movement-intro">
|
||||
<div class="movement-label">The Collective</div>
|
||||
<h2 class="movement-title">Two of Us, No Fixed <em>Roles</em></h2>
|
||||
<p class="movement-prose">
|
||||
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>
|
||||
|
||||
@* 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). *@
|
||||
<div class="bio-pair">
|
||||
@foreach (var member in _members)
|
||||
{
|
||||
<article class="bio-card">
|
||||
<div class="bio-portrait">
|
||||
@if (member.PortraitImage1 is not null)
|
||||
{
|
||||
@@ -100,170 +106,150 @@
|
||||
<div class="bio-portrait-placeholder" aria-hidden="true"></div>
|
||||
}
|
||||
</div>
|
||||
<div class="bio-caption">@member.Name · @member.Role</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>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
</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>
|
||||
@* ════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════ *@
|
||||
<div class="movement" data-movement="2" @ref="_movementTwo">
|
||||
<div class="rail" aria-hidden="true">
|
||||
<div class="rail-line"></div>
|
||||
<div class="rail-numeral">02</div>
|
||||
<div class="rail-margin">the live rig</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>
|
||||
<div class="movement-content">
|
||||
<div class="wave-divider">
|
||||
<svg class="wave-stroke" viewBox="0 0 1200 40" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="@WavePath" />
|
||||
</svg>
|
||||
<span class="wave-tag">The Process</span>
|
||||
</div>
|
||||
|
||||
@* ════════════════════ 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>
|
||||
@* Dark band — gear-stage cards. The navy ground carries the analytical register. *@
|
||||
<div class="process-band">
|
||||
<div class="process-label">How It's Made</div>
|
||||
<h2 class="process-title">Digital, Analog, <em>Whatever Moves</em></h2>
|
||||
|
||||
<p class="process-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>
|
||||
</div>
|
||||
|
||||
@* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image,
|
||||
captioned in the rail rather than run full-bleed. *@
|
||||
<figure class="movement-figure">
|
||||
<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" />
|
||||
<figcaption class="figure-caption">the live rig</figcaption>
|
||||
</figure>
|
||||
</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>
|
||||
@* ════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════ *@
|
||||
<div class="movement" data-movement="3" @ref="_movementThree">
|
||||
<div class="rail" aria-hidden="true">
|
||||
<div class="rail-line"></div>
|
||||
<div class="rail-numeral">03</div>
|
||||
<div class="rail-margin">in the swamp</div>
|
||||
</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 class="movement-content">
|
||||
<div class="wave-divider">
|
||||
<svg class="wave-stroke" viewBox="0 0 1200 40" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="@WavePath" />
|
||||
</svg>
|
||||
<span class="wave-tag">The Product</span>
|
||||
</div>
|
||||
|
||||
<div class="movement-intro">
|
||||
<div class="movement-label">The Output</div>
|
||||
<h2 class="movement-title">Classics, with a <em>Twist</em></h2>
|
||||
<p class="movement-prose">
|
||||
Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@* Medium triptych — one-line frame of each medium; definitions, not a re-pitch.
|
||||
A stacked editorial list rather than Home's card grid. *@
|
||||
<ul class="medium-list">
|
||||
<li class="medium-row">
|
||||
<a href="/cuts">
|
||||
<span class="medium-row-name">Cuts</span>
|
||||
<span class="medium-row-desc">Studio work, composed and finished.</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="medium-row">
|
||||
<a href="/sessions">
|
||||
<span class="medium-row-name">Sessions</span>
|
||||
<span class="medium-row-desc">Live, caught once, never the same twice.</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="medium-row">
|
||||
<a href="/mixes">
|
||||
<span class="medium-row-name">Mixes</span>
|
||||
<span class="medium-row-desc">Uninterrupted sets, start to finish.</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@* The live turn — "on the street, in the swamp": the identity beyond releases.
|
||||
A left-breaking pull-quote at large serif scale. *@
|
||||
<blockquote class="pull-quote">
|
||||
<span class="pull-eyebrow">Beyond the Releases</span>
|
||||
<p>
|
||||
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>
|
||||
</blockquote>
|
||||
</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 ── *@
|
||||
@@ -278,23 +264,78 @@
|
||||
</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";
|
||||
|
||||
// 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<IJSObjectReference>(
|
||||
"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").
|
||||
|
||||
Reference in New Issue
Block a user