update narrative cards

Author: florykhan

src/pages/narrative/projects.html

@@ -27,13 +27,13 @@
     </p>
 
     <header class="narrative-header">
-      <h1 class="narrative-title">Projects — ML + Software</h1>
+      <h1 class="narrative-title">Projects — Data, ML & Software</h1>
       <p class="narrative-desc">Pipelines, evaluation, and product thinking in practice. Building artifacts informed by real-world constraints.</p>
     </header>
 
     <section class="narrative-intro">
-      <p class="narrative-intro-text">After Synkron, I wanted to go beyond using machine learning as a black box. I started building systems myself — from data pipelines and model training to full-stack apps that put AI in users' hands. My focus: <strong>data</strong>, <strong>machine learning</strong>, and <strong>software</strong> that solve real problems.</p>
-      <p class="narrative-intro-text">These projects are where theory meets practice. Each one pushes on a different part of the stack: data wrangling and feature engineering, model evaluation and iteration, or end-to-end product design. The goal is not perfection — it's learning how systems fail, scale, and ship.</p>
+      <p class="narrative-intro-text">After Synkron, I wanted to go beyond using machine learning as a black box. I started building systems myself, from data pipelines and model training to full-stack apps that put AI in users' hands. My focus: <strong>data</strong>, <strong>machine learning</strong>, and <strong>software</strong> that solve real problems.</p>
+      <p class="narrative-intro-text">These projects are where theory meets practice. Each one pushes on a different part of the stack: data wrangling and feature engineering, model evaluation and iteration, or end-to-end product design. The goal is not perfection, it's learning how systems fail, scale, and ship.</p>
     </section>
 
     <div class="narrative-content">
@@ -48,11 +48,31 @@ <h2>What I built</h2>
       </section>
       <section class="narrative-section">
         <h2>Tools</h2>
-        <p>Python (scikit-learn, Pandas, NumPy, PyTorch) for data and ML. React, Node.js, and Flask for web. Git, Linux, and structured workflows for shipping. The stack evolves with each project — the constant is thinking in terms of pipelines, evaluation metrics, and user value.</p>
+        <p>Python, SQL, and JavaScript for data and ML. scikit-learn, CatBoost, pandas, NumPy, and Jupyter for modeling and analysis. React, Flask, Leaflet, and Tableau on the product side, plus Git, GitHub Actions, and GitHub Pages to actually ship things. The stack evolves with each project — the constant is thinking in terms of pipelines, evaluation metrics, and user value.</p>
       </section>
       <section class="narrative-section">
         <h2>Proof / demos</h2>
-        <p>See the full project catalog with live demos, reports, and write-ups: <a href="../projects.html">Projects</a>. Highlights include <a href="../projects/gym-whisper.html">GymWhisper</a> (demo + report), <a href="../projects/house-price-ml.html">House-Price-ML</a> (report), and <a href="../projects/network-impact-analyzer.html">TelusGuardAI</a> (demo + report).</p>
+        <p>See the full project catalog with live demos, reports, and write-ups: <a href="../projects.html">See all projects →</a>. Highlights include <a href="../projects/gym-whisper.html">GymWhisper</a> (demo + report), <a href="../projects/house-price-ml.html">House-Price-ML</a> (report), and <a href="../projects/network-impact-analyzer.html">TelusGuardAI</a> (demo + report).</p>
+        <div class="narrative-projects-grid">
+          <a class="narrative-project-card" href="../projects/network-impact-analyzer.html">
+            <figure>
+              <img src="../../assets/projects/TelusGuardAI.png" alt="TelusGuardAI dashboard showing map with impact zones and tower locations">
+              <figcaption>TelusGuardAI — network impact analyzer (full-stack + multi-agent AI)</figcaption>
+            </figure>
+          </a>
+          <a class="narrative-project-card" href="../projects/gym-whisper.html">
+            <figure>
+              <img src="../../assets/projects/GymWhisper.png" alt="GymWhisper app: voice input and workout panel">
+              <figcaption>GymWhisper — voice-powered workout tracking (React + Gemini API)</figcaption>
+            </figure>
+          </a>
+          <a class="narrative-project-card" href="../projects/customer-churn-dashboard.html">
+            <figure>
+              <img src="../../assets/projects/customer-churn-dashboard.png" alt="Customer Churn Tableau dashboard with KPIs and segment views">
+              <figcaption>Customer Churn Dashboard — SQL → R → Tableau analytics demo</figcaption>
+            </figure>
+          </a>
+        </div>
       </section>
     </div>
 

src/styles/main.css

@@ -1277,6 +1277,37 @@ body[data-narrative] .narrative-dated-label {
   margin-bottom: 1.5rem;
 }
 
+/* Narrative projects section: small gallery of demo cards */
+.narrative-projects-grid {
+  margin-top: 1.1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 1.25rem;
+}
+
+.narrative-project-card {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.narrative-project-card figure {
+  margin: 0;
+}
+
+.narrative-project-card img {
+  display: block;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.narrative-project-card figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #b8b4ae;
+}
+
 .narrative-section h2 {
   font-size: 1rem;
   font-weight: 600;