refactor: consolidate population and complexity sections into ChartSection

Add named slot 'extra' to ChartSection for between-header-and-card
content. Replace hand-rolled population-section and complexity-section
(which duplicated ChartSection's structure, h2 styling, and card CSS)
with ChartSection components. Move complexity-metrics CSS into the
only place that uses it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ReadyPlayerNaN

src/components/ChartSection.astro

@@ -8,22 +8,13 @@ const { id, title, subtitle } = Astro.props;
 ---
 
 <section id={id} class="chart-section">
-  <div class="chart-header" style="max-width:65ch;margin:0 auto 1.5rem;">
-    <h2
-      style="
-      font-family:'Raleway','Arial Black',sans-serif;
-      font-size:clamp(1.5rem,4vw,2.2rem);
-      font-weight:800;
-      letter-spacing:-0.02em;
-      color:#F2F0E5;
-      margin-bottom:0.35rem;
-    "
-    >
-      {title}
-    </h2>
-    {subtitle && <p style="color:#64748b;max-width:65ch;margin:0 auto;">{subtitle}</p>}
+  <div class="chart-header">
+    <h2>{title}</h2>
+    {subtitle && <p class="chart-subtitle">{subtitle}</p>}
   </div>
 
+  <slot name="extra" />
+
   <div class="chart-card">
     <slot />
   </div>
@@ -35,6 +26,23 @@ const { id, title, subtitle } = Astro.props;
     max-width: 1400px;
     margin: 0 auto;
   }
+  .chart-header {
+    max-width: 65ch;
+    margin: 0 auto 1.5rem;
+  }
+  .chart-header h2 {
+    font-family: 'Raleway', 'Arial Black', sans-serif;
+    font-size: clamp(1.5rem, 4vw, 2.2rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    color: #F2F0E5;
+    margin-bottom: 0.35rem;
+  }
+  .chart-subtitle {
+    color: #94a3b8;
+    line-height: 1.7;
+    font-size: 1rem;
+  }
   .chart-card {
     background: #252525;
     border: 1px solid #3a3a3a;

src/pages/index.astro

@@ -62,43 +62,20 @@ import ComplexityChart from '../components/ComplexityChart';
     <SkillFilters client:only="react" />
   </ChartSection>
 
-  <section id="population" class="population-section">
-    <div class="population-header">
-      <h2>Developer Population</h2>
-      <p class="population-story">
-        In 1970 fewer than 100,000 people worldwide wrote code — mostly academics and defense
-        contractors working on mainframes. The personal computer changed that: by the mid-1980s
-        anyone with a desk could program. Then the web exploded the numbers again — the dot-com
-        boom pulled millions into the field between 1995 and 2000, and even the bust that followed
-        barely dented the trajectory. Smartphones, cloud computing, and the startup gold rush of the
-        2010s kept the curve steep, while coding bootcamps and free online courses lowered the
-        barrier to entry almost to zero. The result: the developer population roughly doubles every
-        eight years. That growth rate is exactly why senior developers are so scarce — when half of
-        all developers have less than eight years of experience at any given moment, seniority is
-        a mathematical minority, not a failure of hiring.
-      </p>
-    </div>
-
-    <div class="population-chart-card">
-      <PopulationChart client:only="react" />
-    </div>
-  </section>
-
-  <section id="complexity" class="complexity-section">
-    <div class="complexity-header">
-      <h2>Software Complexity Growth</h2>
-      <p class="complexity-story">
-        In the 1970s a whole program fit on a stack of punch cards. C and Unix made code portable,
-        PCs multiplied the audience, but the tools stayed simple. The web broke that — software
-        suddenly had to run on unknown browsers, talk to remote servers, and handle millions of users.
-        Open source turned shared dependencies into an avalanche nobody fully controls. The security
-        surface grew in lockstep, the stack fragmented into containers, orchestrators, cloud services,
-        and dozens more tools. All of it compounds: more packages mean more vulnerabilities, more
-        technologies mean more integration surface, more decision points mean more places to break.
-      </p>
-    </div>
+  <ChartSection
+    id="population"
+    title="Developer Population"
+    subtitle="In 1970 fewer than 100,000 people worldwide wrote code — mostly academics and defense contractors working on mainframes. The personal computer changed that: by the mid-1980s anyone with a desk could program. Then the web exploded the numbers again — the dot-com boom pulled millions into the field between 1995 and 2000, and even the bust that followed barely dented the trajectory. Smartphones, cloud computing, and the startup gold rush of the 2010s kept the curve steep, while coding bootcamps and free online courses lowered the barrier to entry almost to zero. The result: the developer population roughly doubles every eight years. That growth rate is exactly why senior developers are so scarce — when half of all developers have less than eight years of experience at any given moment, seniority is a mathematical minority, not a failure of hiring."
+  >
+    <PopulationChart client:only="react" />
+  </ChartSection>
 
-    <div class="complexity-metrics">
+  <ChartSection
+    id="complexity"
+    title="Software Complexity Growth"
+    subtitle="In the 1970s a whole program fit on a stack of punch cards. C and Unix made code portable, PCs multiplied the audience, but the tools stayed simple. The web broke that — software suddenly had to run on unknown browsers, talk to remote servers, and handle millions of users. Open source turned shared dependencies into an avalanche nobody fully controls. The security surface grew in lockstep, the stack fragmented into containers, orchestrators, cloud services, and dozens more tools. All of it compounds: more packages mean more vulnerabilities, more technologies mean more integration surface, more decision points mean more places to break."
+  >
+    <div slot="extra" class="complexity-metrics">
       <details class="complexity-metric">
         <summary><span class="metric-dot" style="background:#60a5fa;"></span>Linux LOC</summary>
         <p>
@@ -152,78 +129,10 @@ import ComplexityChart from '../components/ComplexityChart';
       </details>
     </div>
 
-    <div class="complexity-chart-card">
-      <ComplexityChart client:only="react" />
-    </div>
-  </section>
+    <ComplexityChart client:only="react" />
+  </ChartSection>
 
   <style>
-    .population-section {
-      padding: 3.5rem 2rem;
-      max-width: 1400px;
-      margin: 0 auto;
-    }
-    .population-header {
-      max-width: 65ch;
-      margin: 0 auto 1.5rem;
-    }
-    .population-header h2 {
-      font-family: 'Raleway', 'Arial Black', sans-serif;
-      font-size: clamp(1.5rem, 4vw, 2.2rem);
-      font-weight: 800;
-      letter-spacing: -0.02em;
-      color: #F2F0E5;
-      margin-bottom: 0.35rem;
-    }
-    .population-story {
-      color: #94a3b8;
-      line-height: 1.7;
-      font-size: 1rem;
-    }
-    .population-chart-card {
-      background: #252525;
-      border: 1px solid #3a3a3a;
-      border-radius: 1rem;
-      padding: 1.5rem 1.5rem 1rem;
-      position: relative;
-    }
-    @media (max-width: 768px) {
-      .population-section {
-        padding: 2rem 0;
-      }
-      .population-header {
-        padding: 0 2rem;
-      }
-      .population-chart-card {
-        padding: 1.5rem;
-        border-radius: 0;
-        border-left: none;
-        border-right: none;
-        overflow: hidden;
-      }
-    }
-    .complexity-section {
-      padding: 3.5rem 2rem;
-      max-width: 1400px;
-      margin: 0 auto;
-    }
-    .complexity-header {
-      max-width: 65ch;
-      margin: 0 auto 1.5rem;
-    }
-    .complexity-header h2 {
-      font-family: 'Raleway', 'Arial Black', sans-serif;
-      font-size: clamp(1.5rem, 4vw, 2.2rem);
-      font-weight: 800;
-      letter-spacing: -0.02em;
-      color: #F2F0E5;
-      margin-bottom: 0.35rem;
-    }
-    .complexity-story {
-      color: #94a3b8;
-      line-height: 1.7;
-      font-size: 1rem;
-    }
     .complexity-metrics {
       display: grid;
       gap: 0.25rem;
@@ -282,30 +191,10 @@ import ComplexityChart from '../components/ComplexityChart';
       font-family: 'JetBrains Mono', 'Fira Code', monospace;
       font-size: 0.88em;
     }
-    .complexity-chart-card {
-      background: #252525;
-      border: 1px solid #3a3a3a;
-      border-radius: 1rem;
-      padding: 1.5rem 1.5rem 1rem;
-      position: relative;
-    }
     @media (max-width: 768px) {
-      .complexity-section {
-        padding: 2rem 0;
-      }
-      .complexity-header {
-        padding: 0 2rem;
-      }
       .complexity-metrics {
         padding: 0 2rem;
       }
-      .complexity-chart-card {
-        padding: 1.5rem;
-        border-radius: 0;
-        border-left: none;
-        border-right: none;
-        overflow: hidden;
-      }
     }
   </style>