feat(home): humanize narrative and fix portfolio visual placeholders

Author: just3ws

home/index.html

@@ -1,23 +1,23 @@
 ---
 layout: minimal
-title: Mike Hall | Staff Software Engineer
-description: Staff-level engineer focused on platform architecture, reliability, observability, and reclaiming legacy systems. Creator of Phalanx Duel.
+title: Mike Hall | Architect, Creator, Human
+description: Personal site of Mike Hall. Creator of Phalanx Duel, technical interviewer, and software architect focused on human agency and technical history.
 breadcrumb: Home
 canonical_url: https://www.just3ws.com/home/
 ---
 
 <article class="page">
   <header class="home-header">
-    <h1>Mike Hall <span class="subtitle">Staff Software Engineer</span></h1>
-    <p class="home-headline">I reclaim legacy, revenue-critical systems by making behavior visible, reducing systemic risk, and enabling teams to change safely.</p>
+    <h1>Mike Hall <span class="subtitle">Architect & Creator</span></h1>
+    <p class="home-headline">I build systems that value human agency—whether that's reclaiming a legacy platform or designing tactical card combat.</p>
   </header>
 
   <section class="home-phalanx-callout" aria-label="Phalanx Duel game callout">
     <div class="home-phalanx-duel">
       <img class="phalanx-avatar" src="/assets/images/phalanxduel-avatar.png" alt="Phalanx Duel" width="120" height="120" loading="lazy" decoding="async">
       <div class="phalanx-info">
         <h3 class="phalanx-title">Phalanx Duel</h3>
-        <p class="phalanx-description">Experience deterministic, tactical card combat. My latest project in product architecture and tactical game design. No download. No account required.</p>
+        <p class="phalanx-description">Deterministic, tactical card combat. My latest project in pure tactical decision-making and product architecture. No luck, no accounts, just strategy.</p>
         <div class="phalanx-actions">
           <a href="https://phalanxduel.com" class="phalanx-btn">Start a Duel →</a>
           <a href="/portfolio/#project-phalanx-duel" class="phalanx-link">Project Details</a>
@@ -27,64 +27,44 @@ <h3 class="phalanx-title">Phalanx Duel</h3>
   </section>
 
   <section class="home-intro">
-    <p>Staff Engineer focused on architecture, production health, and systemic risk. I specialize in making complex legacy cores legible and evolvable through observability, incident leadership, and system modeling. Beyond the platform, I build tactical systems like <strong>Phalanx Duel</strong> and maintain a deep archive of the <strong>DevOps and Craftsmanship</strong> movements.</p>
+    <p>I’ve spent the last two decades at the intersection of technology and community. I’m the person called in when systems become illegible and teams need a path back to sanity. Beyond the technical specs, I’m a father, a historian of technical movements, and a builder of "alive" things—from the <strong>UGtastic</strong> interview archive to the high-stakes tactics of <strong>Phalanx Duel</strong>.</p>
   </section>
 
   <section class="home-patterns">
-    <h2>What I’m Known For</h2>
+    <h2>What I Value</h2>
     <ul class="home-list">
-      <li><strong>System Reconstruction</strong>: Rebuilding understanding where documentation has drifted from production reality.</li>
-      <li><strong>Incident-to-Correction</strong>: Turning high-severity failures into durable system and process improvements.</li>
-      <li><strong>Modernization Under Load</strong>: Enabling platform evolution without greenfield rewrites or service interruption.</li>
-      <li><strong>Operational Legibility</strong>: Making system behavior transparent to align engineering, security, and product goals.</li>
-      <li><strong>Product Craftsmanship</strong>: Applying engineering rigour to product design, as seen in projects like Phalanx Duel and UGl.st.</li>
+      <li><strong>Legibility over Magic</strong>: Software should be understandable by the humans who have to live with it.</li>
+      <li><strong>Agency & Intention</strong>: Every move should matter—in a codebase, in a user group, or in a card game.</li>
+      <li><strong>Archival Continuity</strong>: We stand on the shoulders of giants. I'm dedicated to preserving the "why" behind the DevOps and Craftsmanship movements.</li>
+      <li><strong>Modernization as Reclamation</strong>: Reclaiming the value locked in legacy systems is an act of craftsmanship and respect for what came before.</li>
     </ul>
   </section>
 
-  <section class="home-experience">
-    <h2>Core Experience</h2>
-    
-    <div class="position">
-      <div class="position-header">
-        <h3 class="position-title">Associate Director, Staff Engineer</h3>
-        <span class="position-dates">2021 – 2026</span>
-      </div>
-      <p class="position-company">OneMain Financial | Remote</p>
-      <p class="position-context">Owned lane-level architecture and systemic risk for a customer acquisition platform in a regulated environment.</p>
-      
-      <ul class="achievement-highlights">
-        <li>Re-architected fragmented engineering ownership into a single accountable operating model.</li>
-        <li>Led enterprise adoption of OpenTelemetry, standardizing observability across engineering and cybersecurity.</li>
-        <li>Modernized legacy Rails platform components under continuous production load.</li>
-      </ul>
-    </div>
-  </section>
-
   <section class="home-navigation">
-    <h2>Explore the Archive</h2>
+    <h2>Explore the Work</h2>
     <div class="home-link-grid">
       <section class="home-link-card">
-        <h3>Project Portfolio</h3>
-        <p>A timeline of systems, platforms, and communities I've built, from 2010 to the present.</p>
+        <h3>The Portfolio</h3>
+        <p>A timeline of systems and platforms I've built, from the early days of Chicago Code Camp to Phalanx Duel.</p>
         <ul class="home-list">
-          <li><a href="/portfolio/">View Portfolio</a></li>
+          <li><a href="/portfolio/">View Digital Archeology</a></li>
         </ul>
       </section>
 
       <section class="home-link-card">
         <h3>Technical Conversations</h3>
-        <p>A decade of dialogues with the creators who shaped the modern software landscape.</p>
+        <p>A high-bandwidth archive of dialogues with the people who shaped our industry.</p>
         <ul class="home-list">
-          <li><a href="/interviews/">All Conversations</a></li>
-          <li><a href="/interviews/stories/">Community Stories</a></li>
+          <li><a href="/interviews/">Browse the Library</a></li>
+          <li><a href="/interviews/stories/">Curated Stories</a></li>
         </ul>
       </section>
 
       <section class="home-link-card">
         <h3>Writing & Notes</h3>
-        <p>Technical writing focused on implementation details, tradeoffs, and leadership.</p>
+        <p>Reflections on technical tradeoffs, leadership, and the rhythm of software development.</p>
         <ul class="home-list">
-          <li><a href="/writing/">Latest Posts</a></li>
+          <li><a href="/writing/">Latest Essays</a></li>
         </ul>
       </section>
     </div>

portfolio.html

@@ -95,8 +95,9 @@ <h3 class="editorial-card-title">
     position: relative;
     width: 100%;
     padding-top: 56.25%; /* 16:9 */
-    background: #000;
+    background: #1a1a1a; /* Slightly lighter than black */
     cursor: pointer;
+    overflow: hidden;
   }
 
   .slideshow-track {
@@ -105,6 +106,25 @@ <h3 class="editorial-card-title">
     left: 0;
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+  }
+
+  /* Placeholder text for missing images */
+  .portfolio-slideshow::after {
+    content: "Snapshot Loading...";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255,255,255,0.4);
+    font-size: 0.9rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    z-index: 2;
   }
 
   .slide {