From 8926acb8050b2ed6238b1f54d3e002a6d48cf939 Mon Sep 17 00:00:00 2001
From: ced4568 <chasedumphord@gmail.com>
Date: Sat, 25 Apr 2026 15:04:02 -0500
Subject: [PATCH] Clean NOC dashboard UI with real inventory data

---
 assets/images/data/noc-status.json |  69 +++++++++++
 index.html                         |  86 +++++++-------
 script.js                          |  71 +++++++++++-
 style.css                          | 176 +++++++++++++++--------------
 4 files changed, 276 insertions(+), 126 deletions(-)
 create mode 100644 assets/images/data/noc-status.json

diff --git a/assets/images/data/noc-status.json b/assets/images/data/noc-status.json
new file mode 100644
index 00000000..8e8ffc4f
--- /dev/null
+++ b/assets/images/data/noc-status.json
@@ -0,0 +1,69 @@
+{
+  "nocName": "Ced's NOC",
+  "status": "Operational Build",
+  "lastUpdated": "Manual V1",
+  "summary": {
+    "nodes": "12+",
+    "services": "10+",
+    "vlans": "4",
+    "edgeSystems": "2"
+  },
+  "systems": [
+    {
+      "name": "Proxmox VE",
+      "type": "Virtualization",
+      "address": "10.10.30.250:8006",
+      "status": "Online",
+      "layer": "Infrastructure"
+    },
+    {
+      "name": "TrueNAS",
+      "type": "Storage",
+      "address": "10.10.30.143",
+      "status": "Online",
+      "layer": "Storage"
+    },
+    {
+      "name": "Nginx Proxy Manager",
+      "type": "Reverse Proxy",
+      "address": "10.10.30.210:81",
+      "status": "Online",
+      "layer": "Access"
+    },
+    {
+      "name": "Dashy",
+      "type": "Dashboard",
+      "address": "10.10.30.61:4000",
+      "status": "Online",
+      "layer": "Monitoring"
+    },
+    {
+      "name": "Jellyfin",
+      "type": "Media Service",
+      "address": "10.10.30.143:30013",
+      "status": "Online",
+      "layer": "Services"
+    },
+    {
+      "name": "K3s Cluster",
+      "type": "Kubernetes",
+      "address": "10.10.30.72 / 245 / 128",
+      "status": "Active Build",
+      "layer": "Compute"
+    },
+    {
+      "name": "APRS Home iGate",
+      "type": "RF Edge System",
+      "address": "KJ5JCO-10",
+      "status": "Operational / Tuning",
+      "layer": "Edge"
+    },
+    {
+      "name": "APRS Mobile iGate",
+      "type": "Mobile Edge System",
+      "address": "KJ5JCO-15",
+      "status": "Building",
+      "layer": "Edge"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c926f659..49d2de60 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
       <nav>
         <ul class="nav-links">
           <li><a href="#snapshot">Snapshot</a></li>
+          <li><a href="#noc">NOC</a></li>
           <li><a href="#about">About</a></li>
           <li><a href="#projects">Projects</a></li>
           <li><a href="#resume">Resume</a></li>
@@ -103,48 +104,6 @@ building_real_systems</code></pre>
           </p>
         </div>
 
-        <section class="section noc-dashboard">
-  <div class="container">
-    <div class="section-heading">
-      <p class="section-label">Ced’s NOC</p>
-      <h2>Network Operations Dashboard</h2>
-      <p class="section-intro">
-        A portfolio view of the infrastructure, edge systems, and monitoring stack I’m building across Ced’s HomeLab.
-      </p>
-    </div>
-
-    <div class="noc-status-grid">
-      <div class="noc-status-card online">
-        <span class="status-dot"></span>
-        <h3>HomeLab Core</h3>
-        <p>Infrastructure services, VLANs, dashboards, and self-hosted systems.</p>
-        <small>Status: Active Build</small>
-      </div>
-
-      <div class="noc-status-card online">
-        <span class="status-dot"></span>
-        <h3>K3s Cluster</h3>
-        <p>Distributed container environment for service deployment and orchestration.</p>
-        <small>Status: Active Build</small>
-      </div>
-
-      <div class="noc-status-card warning">
-        <span class="status-dot"></span>
-        <h3>APRS iGate</h3>
-        <p>RF-to-IP edge system using Raspberry Pi, Direwolf, APRS-IS, and mobile expansion.</p>
-        <small>Status: Operational / Tuning</small>
-      </div>
-
-      <div class="noc-status-card planned">
-        <span class="status-dot"></span>
-        <h3>Unified Monitoring</h3>
-        <p>Future Grafana/Uptime Kuma view for services, nodes, and edge devices.</p>
-        <small>Status: Planned</small>
-      </div>
-    </div>
-  </div>
-</section>
-
         <div class="stats-grid">
           <div class="stat-card">
             <h3>12+</h3>
@@ -173,6 +132,47 @@ building_real_systems</code></pre>
       </div>
     </section>
 
+    <section id="noc" class="section noc-dashboard">
+      <div class="container">
+        <div class="section-heading">
+          <p class="section-label">Ced’s NOC</p>
+          <h2>Live Systems Overview</h2>
+          <p class="section-intro">
+            Real infrastructure inventory from Ced’s HomeLab, K3s cluster, and APRS edge systems.
+          </p>
+        </div>
+
+        <div class="noc-command-bar">
+          <span class="status-dot"></span>
+          <span id="noc-status-text">Loading NOC status...</span>
+        </div>
+
+        <div class="noc-metrics-grid">
+          <div class="noc-metric">
+            <h3 id="metric-nodes">--</h3>
+            <p>Nodes</p>
+          </div>
+
+          <div class="noc-metric">
+            <h3 id="metric-services">--</h3>
+            <p>Services</p>
+          </div>
+
+          <div class="noc-metric">
+            <h3 id="metric-vlans">--</h3>
+            <p>VLANs</p>
+          </div>
+
+          <div class="noc-metric">
+            <h3 id="metric-edge">--</h3>
+            <p>Edge Systems</p>
+          </div>
+        </div>
+
+        <div id="noc-system-grid" class="noc-system-grid"></div>
+      </div>
+    </section>
+
     <section id="about" class="section">
       <div class="container">
         <div class="section-heading">
@@ -440,7 +440,7 @@ building_real_systems</code></pre>
 
   <footer class="site-footer">
     <div class="container footer-content">
-      <p>© Chase Dumphord</p>
+      <p>© <span data-year></span> Chase Dumphord</p>
       <a href="#top" class="back-to-top">Back to top ↑</a>
     </div>
   </footer>
diff --git a/script.js b/script.js
index bea7d2d7..916fd476 100644
--- a/script.js
+++ b/script.js
@@ -3,4 +3,73 @@ document.addEventListener("DOMContentLoaded", () => {
   if (yearSpan) {
     yearSpan.textContent = new Date().getFullYear();
   }
-});
\ No newline at end of file
+
+  loadNocStatus();
+});
+
+async function loadNocStatus() {
+  try {
+    const response = await fetch("data/noc-status.json");
+
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    const statusText = document.getElementById("noc-status-text");
+    const nodes = document.getElementById("metric-nodes");
+    const services = document.getElementById("metric-services");
+    const vlans = document.getElementById("metric-vlans");
+    const edge = document.getElementById("metric-edge");
+    const grid = document.getElementById("noc-system-grid");
+
+    if (!statusText || !nodes || !services || !vlans || !edge || !grid) {
+      return;
+    }
+
+    statusText.textContent = `${data.nocName} — ${data.status} — ${data.lastUpdated}`;
+
+    nodes.textContent = data.summary.nodes;
+    services.textContent = data.summary.services;
+    vlans.textContent = data.summary.vlans;
+    edge.textContent = data.summary.edgeSystems;
+
+    grid.innerHTML = "";
+
+    data.systems.forEach((system) => {
+      const card = document.createElement("article");
+      card.className = "noc-system-card";
+
+      const status = system.status.toLowerCase();
+
+      const statusClass =
+        status.includes("online") || status.includes("operational")
+          ? "online"
+          : status.includes("building") || status.includes("tuning") || status.includes("active")
+          ? "warning"
+          : "planned";
+
+      card.innerHTML = `
+        <div class="noc-system-top">
+          <span class="mini-status ${statusClass}"></span>
+          <span>${system.layer}</span>
+        </div>
+        <h3>${system.name}</h3>
+        <p>${system.type}</p>
+        <code>${system.address}</code>
+        <small>Status: ${system.status}</small>
+      `;
+
+      grid.appendChild(card);
+    });
+  } catch (error) {
+    const statusText = document.getElementById("noc-status-text");
+
+    if (statusText) {
+      statusText.textContent = "Ced’s NOC data unavailable";
+    }
+
+    console.error("Failed to load NOC status:", error);
+  }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index d42dd12f..2dd39187 100644
--- a/style.css
+++ b/style.css
@@ -187,6 +187,8 @@ a:hover {
 .project-card,
 .stat-card,
 .noc-card,
+.noc-metric,
+.noc-system-card,
 .personal-image-wrap {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
@@ -195,10 +197,6 @@ a:hover {
   box-shadow: var(--shadow);
 }
 
-.hero-image-card {
-  padding: 1rem;
-}
-
 .hero-image {
   border-radius: 16px;
   width: 100%;
@@ -270,7 +268,9 @@ a:hover {
 .contact-grid,
 .personal-grid,
 .noc-grid,
-.stats-grid {
+.stats-grid,
+.noc-metrics-grid,
+.noc-system-grid {
   display: grid;
   gap: 1.25rem;
 }
@@ -289,18 +289,21 @@ a:hover {
 }
 
 .stats-grid,
-.noc-grid {
+.noc-metrics-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.noc-grid {
+.noc-grid,
+.noc-system-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .card,
 .project-card,
 .stat-card,
-.noc-card {
+.noc-card,
+.noc-metric,
+.noc-system-card {
   padding: 1.35rem;
 }
 
@@ -364,13 +367,15 @@ a:hover {
   font-weight: 800;
 }
 
-.stat-card h3 {
+.stat-card h3,
+.noc-metric h3 {
   margin: 0;
   font-size: 2.2rem;
   color: var(--accent-2);
 }
 
-.stat-card p {
+.stat-card p,
+.noc-metric p {
   margin: 0.25rem 0;
   font-weight: 800;
   color: var(--text);
@@ -381,6 +386,79 @@ a:hover {
   font-size: 0.92rem;
 }
 
+.noc-dashboard {
+  background:
+    radial-gradient(circle at top left, rgba(142, 240, 207, 0.08), transparent 30%),
+    linear-gradient(180deg, #070b12 0%, #0d1422 100%);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.noc-command-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0.9rem 1rem;
+  margin-bottom: 1.25rem;
+  color: var(--muted);
+}
+
+.status-dot,
+.mini-status {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  display: inline-block;
+  background: var(--accent-2);
+  box-shadow: 0 0 16px rgba(142, 240, 207, 0.9);
+}
+
+.mini-status.warning {
+  background: var(--warning);
+  box-shadow: 0 0 16px rgba(242, 204, 96, 0.9);
+}
+
+.mini-status.planned {
+  background: var(--accent);
+  box-shadow: 0 0 16px rgba(88, 166, 255, 0.9);
+}
+
+.noc-system-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.noc-system-card h3 {
+  margin: 0.8rem 0 0.35rem;
+}
+
+.noc-system-card p {
+  color: var(--muted);
+  margin: 0.2rem 0 0.6rem;
+}
+
+.noc-system-card code {
+  display: inline-block;
+  color: var(--accent-2);
+  background: rgba(0, 0, 0, 0.25);
+  padding: 0.25rem 0.45rem;
+  border-radius: 8px;
+  font-size: 0.82rem;
+}
+
+.noc-system-card small {
+  display: block;
+  margin-top: 0.8rem;
+  color: var(--accent);
+  font-weight: 700;
+}
+
 .noc-section {
   background:
     linear-gradient(135deg, rgba(88, 166, 255, 0.08), rgba(142, 240, 207, 0.04));
@@ -423,7 +501,9 @@ a:hover {
 
 @media (max-width: 1050px) {
   .projects-grid,
-  .stats-grid {
+  .stats-grid,
+  .noc-metrics-grid,
+  .noc-system-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -456,7 +536,9 @@ a:hover {
 
 @media (max-width: 620px) {
   .projects-grid,
-  .stats-grid {
+  .stats-grid,
+  .noc-metrics-grid,
+  .noc-system-grid {
     grid-template-columns: 1fr;
   }
 
@@ -477,74 +559,4 @@ a:hover {
     align-items: flex-start;
     gap: 0.5rem;
   }
-}
-
-.noc-dashboard {
-  background:
-    radial-gradient(circle at top left, rgba(142, 240, 207, 0.08), transparent 30%),
-    linear-gradient(180deg, #070b12 0%, #0d1422 100%);
-  border-top: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-}
-
-.noc-status-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1.25rem;
-}
-
-.noc-status-card {
-  position: relative;
-  padding: 1.35rem;
-  border-radius: var(--radius);
-  background: rgba(17, 28, 46, 0.92);
-  border: 1px solid var(--line);
-  box-shadow: var(--shadow);
-}
-
-.noc-status-card h3 {
-  margin-top: 0.7rem;
-  margin-bottom: 0.5rem;
-}
-
-.noc-status-card p {
-  color: var(--muted);
-}
-
-.noc-status-card small {
-  display: inline-block;
-  margin-top: 0.8rem;
-  color: var(--accent-2);
-  font-weight: 700;
-}
-
-.status-dot {
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  display: inline-block;
-  background: var(--accent-2);
-  box-shadow: 0 0 16px rgba(142, 240, 207, 0.9);
-}
-
-.noc-status-card.warning .status-dot {
-  background: var(--warning);
-  box-shadow: 0 0 16px rgba(242, 204, 96, 0.9);
-}
-
-.noc-status-card.planned .status-dot {
-  background: var(--accent);
-  box-shadow: 0 0 16px rgba(88, 166, 255, 0.9);
-}
-
-@media (max-width: 1050px) {
-  .noc-status-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 620px) {
-  .noc-status-grid {
-    grid-template-columns: 1fr;
-  }
 }
\ No newline at end of file