feat(archive): add collection filters to Technical Conversations page

Author: just3ws

_includes/interview-card.html

@@ -13,7 +13,7 @@
   {% endif %}
 {% endif %}
 
-<article class="editorial-card">
+<article class="editorial-card" data-collection="{{ interview.collection }}">
   {% if thumb %}
     <a class="editorial-card-thumb" href="{{ primary_url }}">
       <img src="{{ thumb }}" alt="Thumbnail for {{ interview.title }}" loading="lazy">

_sass/_p_main.scss

@@ -576,3 +576,59 @@
 .status-note a:hover {
   text-decoration: underline;
 }
+
+/* Archive Filters */
+.archive-filters {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+  padding: 0.5rem 0;
+}
+
+.filter-label {
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #888;
+}
+
+.filter-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  background: white;
+  border: 1px solid #eee;
+  padding: 0.5rem 1.25rem;
+  border-radius: 2rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #666;
+}
+
+.filter-btn:hover {
+  border-color: var(--color-primary, #007bff);
+  color: var(--color-primary, #007bff);
+}
+
+.filter-btn.is-active {
+  background: var(--color-primary, #007bff);
+  border-color: var(--color-primary, #007bff);
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
+}
+
+/* Editorial Card Filter Logic */
+.editorial-card {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.editorial-card.is-hidden {
+  display: none;
+}

interviews/index.html

@@ -34,6 +34,17 @@ <h2 class="title">A decade of dialogues with the engineers, authors, and communi
       <a href="https://github.com/just3ws/just3ws.github.io/issues" target="_blank" rel="noopener">submit an issue</a> on GitHub.
     </p>
   </section>
+
+  <nav class="archive-filters no-print" aria-label="Archive Collections">
+    <span class="filter-label">Browse Collections:</span>
+    <div class="filter-group">
+      <button class="filter-btn is-active" data-filter="all">All</button>
+      <button class="filter-btn" data-filter="UGtastic">UGtastic</button>
+      <button class="filter-btn" data-filter="SCMC">SCMC</button>
+      <button class="filter-btn" data-filter="Archive">Archive</button>
+    </div>
+  </nav>
+
   {% include schema-factory.html
     collection_name="Technical Conversations"
     collection_description=page.description
@@ -52,4 +63,31 @@ <h2 class="title">A decade of dialogues with the engineers, authors, and communi
       {% endif %}
     {% endfor %}
   </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const buttons = document.querySelectorAll('.filter-btn');
+      const cards = document.querySelectorAll('.editorial-card');
+
+      buttons.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const filter = btn.getAttribute('data-filter');
+
+          // Update active state
+          buttons.forEach(b => b.classList.remove('is-active'));
+          btn.classList.add('is-active');
+
+          // Filter cards
+          cards.forEach(card => {
+            const collection = card.getAttribute('data-collection');
+            if (filter === 'all' || collection === filter) {
+              card.classList.remove('is-hidden');
+            } else {
+              card.classList.add('is-hidden');
+            }
+          });
+        });
+      });
+    });
+  </script>
 </article>