Task 7: Build experience section with timeline and ECG decoration

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

4-vitals-monitor.html

@@ -415,6 +415,143 @@
     margin-top: 2px;
   }
 
+  /* =========================================
+     EXPERIENCE SECTION
+     ========================================= */
+
+  .experience-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    margin-bottom: 32px;
+  }
+
+  .experience-header h2 {
+    font-family: var(--font-primary);
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--heading);
+    margin: 0;
+  }
+
+  .ecg-decoration {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  .timeline {
+    position: relative;
+  }
+
+  .timeline::before {
+    content: '';
+    position: absolute;
+    left: 20%;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--teal);
+    opacity: 0.2;
+  }
+
+  .timeline-entry {
+    position: relative;
+    padding-left: calc(20% + 32px);
+    margin-bottom: 32px;
+  }
+
+  .timeline-entry:last-child {
+    margin-bottom: 0;
+  }
+
+  .timeline-dot {
+    position: absolute;
+    left: 20%;
+    top: 8px;
+    transform: translateX(-50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 2px solid var(--teal);
+    background: var(--bg);
+    z-index: 1;
+  }
+
+  .timeline-dot.current {
+    background: var(--teal);
+  }
+
+  .timeline-card {
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    padding: 24px;
+    box-shadow: var(--shadow-sm);
+    border-left: 3px solid transparent;
+    transition: box-shadow 0.3s ease, transform 0.3s ease, border-left-color 0.3s ease;
+  }
+
+  .timeline-card:hover {
+    box-shadow: var(--shadow-md);
+    transform: scale(1.01);
+    border-left-color: rgba(0, 137, 123, 0.3);
+  }
+
+  .timeline-role {
+    font-family: var(--font-primary);
+    font-size: 17px;
+    font-weight: 600;
+    color: var(--heading);
+    margin: 0;
+    line-height: 1.3;
+  }
+
+  .timeline-org {
+    font-family: var(--font-primary);
+    font-size: 14px;
+    color: var(--teal);
+    margin: 2px 0;
+  }
+
+  .timeline-date {
+    display: inline-block;
+    padding: 2px 10px;
+    background: var(--teal-light);
+    border-radius: 999px;
+    font-family: var(--font-secondary);
+    font-size: 12px;
+    color: var(--teal);
+    font-weight: 500;
+    margin: 6px 0 12px;
+  }
+
+  .timeline-bullets {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .timeline-bullets li {
+    font-size: 14px;
+    line-height: 1.7;
+    margin: 4px 0;
+    padding-left: 15px;
+    position: relative;
+    color: var(--text);
+  }
+
+  .timeline-bullets li::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--teal);
+    position: absolute;
+    left: 0;
+    top: 10px;
+  }
+
   /* =========================================
      RESPONSIVE: 768px
      ========================================= */
@@ -445,6 +582,18 @@
     .skills-grid {
       grid-template-columns: repeat(3, 1fr);
     }
+
+    .timeline::before {
+      display: none;
+    }
+
+    .timeline-dot {
+      display: none;
+    }
+
+    .timeline-entry {
+      padding-left: 0;
+    }
   }
 
   /* =========================================
@@ -487,6 +636,18 @@
     .skill-item {
       padding: 12px;
     }
+
+    .timeline-card {
+      padding: 16px;
+    }
+
+    .experience-header {
+      gap: 10px;
+    }
+
+    .ecg-decoration {
+      width: 120px;
+    }
   }
 </style>
 </head>
@@ -727,7 +888,90 @@
     </section>
 
     <section id="experience">
-      <!-- Task 7: Experience timeline with ECG decoration -->
+      <div class="experience-header">
+        <h2>Experience</h2>
+        <svg class="ecg-decoration" width="200" height="30" viewBox="0 0 200 30" fill="none">
+          <path d="M 0 15 L 40 15 L 50 15 C 53 15 55 12 58 12 C 61 12 63 15 66 15 L 76 15 L 80 20 L 86 2 L 92 22 L 96 15 L 106 15 C 109 15 111 11 114 11 C 117 11 120 15 123 15 L 200 15" stroke="var(--teal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3"/>
+        </svg>
+      </div>
+
+      <div class="timeline">
+
+        <div class="timeline-entry">
+          <div class="timeline-dot current"></div>
+          <div class="timeline-card">
+            <h3 class="timeline-role">Interim Head of Population Health &amp; Data Analysis</h3>
+            <p class="timeline-org">NHS Norfolk &amp; Waveney ICB</p>
+            <span class="timeline-date">May 2025 &mdash; Nov 2025</span>
+            <ul class="timeline-bullets">
+              <li>Led team through organisational transition, maintaining delivery of &pound;14.6M efficiency programme</li>
+              <li>Directed strategic priorities for population health analytics across Norfolk &amp; Waveney (population ~1M)</li>
+              <li>Managed stakeholder relationships with system leaders, provider trusts, and primary care networks</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-entry">
+          <div class="timeline-dot current"></div>
+          <div class="timeline-card">
+            <h3 class="timeline-role">Deputy Head of Population Health &amp; Data Analysis</h3>
+            <p class="timeline-org">NHS Norfolk &amp; Waveney ICB</p>
+            <span class="timeline-date">Jul 2024 &mdash; Present</span>
+            <ul class="timeline-bullets">
+              <li>Deputised for Head of department across all operational and strategic functions</li>
+              <li>Oversaw &pound;220M medicines budget and led programme of cost improvement initiatives</li>
+              <li>Developed Python-based switching algorithm processing 14,000 patients, delivering &pound;2.6M savings</li>
+              <li>Built Blueteq automation system reducing processing time by 70%, saving 200+ hours annually</li>
+              <li>Created PharMetrics dashboard platform for real-time medicines expenditure tracking</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-entry">
+          <div class="timeline-dot"></div>
+          <div class="timeline-card">
+            <h3 class="timeline-role">High-Cost Drugs &amp; Interface Pharmacist</h3>
+            <p class="timeline-org">NHS Norfolk &amp; Waveney ICB</p>
+            <span class="timeline-date">May 2022 &mdash; Jul 2024</span>
+            <ul class="timeline-bullets">
+              <li>Managed high-cost drugs budget across acute and community settings</li>
+              <li>Led NICE Technology Appraisal implementation and horizon scanning</li>
+              <li>Developed health economic models for biosimilar switching programmes</li>
+              <li>Built data pipelines for automated reporting of medicines expenditure</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-entry">
+          <div class="timeline-dot"></div>
+          <div class="timeline-card">
+            <h3 class="timeline-role">Pharmacy Manager</h3>
+            <p class="timeline-org">Tesco Pharmacy</p>
+            <span class="timeline-date">Nov 2017 &mdash; May 2022</span>
+            <ul class="timeline-bullets">
+              <li>Managed community pharmacy delivering 3,000+ items monthly</li>
+              <li>Pioneered asthma screening service generating &pound;1M+ national revenue</li>
+              <li>Led team of 6 through COVID-19 pandemic service delivery</li>
+              <li>Completed Mary Seacole NHS Leadership Programme (2018)</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-entry">
+          <div class="timeline-dot"></div>
+          <div class="timeline-card">
+            <h3 class="timeline-role">Duty Pharmacy Manager</h3>
+            <p class="timeline-org">Tesco Pharmacy</p>
+            <span class="timeline-date">Aug 2016 &mdash; Nov 2017</span>
+            <ul class="timeline-bullets">
+              <li>Supported pharmacy manager in daily operations and clinical services</li>
+              <li>Delivered Medicines Use Reviews and New Medicine Service consultations</li>
+              <li>Maintained controlled drug compliance and clinical governance standards</li>
+            </ul>
+          </div>
+        </div>
+
+      </div>
     </section>
 
     <section id="education">