creating index for portfolio sites

assets/js/main.js

@@ -0,0 +1,88 @@
+(() => {
+  const tbody = document.getElementById("sitesBody");
+  const lastUpdatedEl = document.getElementById("lastUpdated");
+
+  const formatTimestamp = () => {
+    const formatter = new Intl.DateTimeFormat("en", {
+      dateStyle: "medium",
+      timeStyle: "short",
+    });
+    lastUpdatedEl.textContent = formatter.format(new Date());
+  };
+
+  const renderRows = () => {
+    if (!Array.isArray(window.sitesDirectory) || !window.sitesDirectory.length) {
+      tbody.innerHTML = `
+        <tr>
+          <td colspan="3">No entries yet. Update assets/js/data.js to get started.</td>
+        </tr>`;
+      return;
+    }
+
+    const rows = window.sitesDirectory
+      .map((site) => {
+        const {
+          label = "Site",
+          url = "#",
+          ipv4 = [],
+          ipv6 = [],
+          remarks = "",
+        } = site;
+
+        const ipv4Badges = ipv4
+          .map((ip) => `<span class="pill pill--ipv4">${ip}</span>`)
+          .join("");
+        const ipv6Badges = ipv6
+          .map((ip) => `<span class="pill pill--ipv6">${ip}</span>`)
+          .join("");
+        const ipMarkup =
+          ipv4.length || ipv6.length
+            ? `<div class="ip-list">${ipv4Badges}${ipv6Badges}</div>`
+            : `<span class="remarks">—</span>`;
+
+        return `
+          <tr>
+            <td>
+              <a href="${url}" target="_blank" rel="noopener noreferrer">
+                ${label}
+              </a>
+              <div class="remarks">${url.replace(/^https?:\/\//, "")}</div>
+            </td>
+            <td>${ipMarkup}</td>
+            <td class="remarks">${remarks}</td>
+          </tr>`;
+      })
+      .join("");
+
+    tbody.innerHTML = rows;
+  };
+
+  const initPhotoSizeControls = () => {
+    const card = document.querySelector(".visual-card");
+    if (!card) return;
+
+    const buttons = card.querySelectorAll("[data-photo-size-option]");
+    if (!buttons.length) return;
+
+    const setSize = (size) => {
+      card.setAttribute("data-photo-size", size);
+      buttons.forEach((btn) => {
+        btn.classList.toggle("is-active", btn.dataset.photoSizeOption === size);
+      });
+    };
+
+    const initial = card.getAttribute("data-photo-size") || "standard";
+    setSize(initial);
+
+    buttons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const size = button.dataset.photoSizeOption;
+        setSize(size);
+      });
+    });
+  };
+
+  formatTimestamp();
+  renderRows();
+  initPhotoSizeControls();
+})();