feat(about): wire bio portraits, swap images, circular frame, widen pull-quote

Portraits (1365 square) rendered as circles via border-radius:50%; parallax
tamed to fit. Process figure swapped to dd-mixer-2; Home Our Origin split
swapped to dd-pedals. Pull-quote widened 22ch to 44ch.
This commit is contained in:
daniel-c-harvey
2026-06-17 21:45:55 -04:00
parent 9850be8a49
commit c7d627b817
10 changed files with 19 additions and 14 deletions
+11 -7
View File
@@ -94,11 +94,11 @@
Image2="@member.PortraitImage2" Image2="@member.PortraitImage2"
Alt1="@($"{member.Name} — portrait")" Alt1="@($"{member.Name} — portrait")"
NaturalWidth="1365" NaturalWidth="1365"
NaturalHeight="2048" NaturalHeight="1365"
WindowHeightFraction="0.62" WindowHeightFraction="1.0"
ImageHeight="auto" ImageHeight="auto"
ImageWidth="100%" ImageWidth="100%"
ParallaxSpeed="0.5" /> ParallaxSpeed="0.3" />
} }
else else
{ {
@@ -180,8 +180,8 @@
@* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image, @* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image,
captioned in the rail rather than run full-bleed. *@ captioned in the rail rather than run full-bleed. *@
<figure class="movement-figure"> <figure class="movement-figure">
<ParallaxImage Image1="img/mixer-bw.jpg" <ParallaxImage Image1="img/dd-mixer-2-bw.jpeg"
Image2="img/mixer.jpg" Image2="img/dd-mixer-2.jpg"
Alt1="Deep DRFT — hands on the gear" Alt1="Deep DRFT — hands on the gear"
NaturalWidth="2048" NaturalWidth="2048"
NaturalHeight="1365" NaturalHeight="1365"
@@ -353,10 +353,14 @@
new( new(
Name: "Khabran Peters", Name: "Khabran Peters",
Role: "Production · Sound Design · Live", Role: "Production · Sound Design · Live",
Bio: null), Bio: null,
PortraitImage1: "img/dd-khabran-bw.jpeg",
PortraitImage2: "img/dd-khabran.jpeg"),
new( new(
Name: "Daniel Harvey", Name: "Daniel Harvey",
Role: "Production · Sound Design · Live", 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."), 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.",
PortraitImage1: "img/dd-daniel-bw.jpeg",
PortraitImage2: "img/dd-daniel.jpeg"),
]; ];
} }
+5 -4
View File
@@ -272,16 +272,17 @@
.bio-portrait { .bio-portrait {
width: 100%; width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
border: 1px solid var(--deepdrft-border); border: 1px solid var(--deepdrft-border);
border-radius: 50%;
} }
/* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in /* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in
the navy family with the site's portrait aspect precedent (1365×2048). */ the navy family, matching the circular portrait frame. */
.bio-portrait-placeholder { .bio-portrait-placeholder {
width: 100%; width: 100%;
aspect-ratio: 1365 / 2048; aspect-ratio: 1 / 1;
max-height: 56vh;
background: background:
linear-gradient(160deg, linear-gradient(160deg,
color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%, color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%,
@@ -480,7 +481,7 @@
.pull-quote { .pull-quote {
margin: 0; margin: 0;
margin-left: -7rem; margin-left: -7rem;
max-width: 22ch; max-width: 44ch;
} }
.pull-eyebrow { .pull-eyebrow {
+3 -3
View File
@@ -144,10 +144,10 @@
<MudItem xs="12" md="6"> <MudItem xs="12" md="6">
<div class="split-right"> <div class="split-right">
<ParallaxImage Image1="img/kp-shoulder-bw.jpeg" <ParallaxImage Image1="img/dd-pedals.jpeg"
InvertDirection InvertDirection
NaturalWidth="1365" NaturalWidth="1159"
NaturalHeight="2048" NaturalHeight="1196"
WindowHeightFraction="0.5" WindowHeightFraction="0.5"
ImageHeight="auto" ImageHeight="auto"
ImageWidth="100%" ImageWidth="100%"
Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 444 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 373 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 KiB