Mark CISSP and SSCP certifications as expired

Adds an optional 'expired' flag to the certification schema and renders
a subtle pill-shaped 'Expired' badge next to the credential name. The
credential link is preserved (Credly badges still verify), but readers
can tell at a glance it's no longer actively maintained.

Styled in neutral gray (not red) so it reads as factual status rather
than a warning, with a tooltip and aria-label that expand to 'no longer
actively maintained' for assistive tech.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: benbalter

src/content.config.ts

@@ -119,6 +119,7 @@ const pagesCollection = defineCollection({
       name: z.string(),
       url: z.string().optional(),
       category: z.enum(['professional', 'personal']).default('professional'),
+      expired: z.boolean().default(false),
     })).optional(),
     skills: z.array(z.object({
       group: z.string(),

src/content/pages/resume.md

@@ -48,10 +48,12 @@ certifications:
     name: Certified Information Systems Security Professional (CISSP)
     url: https://www.credly.com/badges/1a8b31f1-3727-4acf-a6a8-8d67af9ecb23
     category: professional
+    expired: true
   - authority: International Information System Security Certification Consortium (ISC)²
     name: Systems Security Certified Practitioner (SSCP)
     url: https://www.credly.com/badges/7eb85996-c7fc-4c68-95df-fcd33ec445ba/
     category: professional
+    expired: true
   - authority: Federal Communications Commission
     name: Amateur Radio Technician Class License, callsign KO6EYB
     category: personal

src/pages/resume.astro

@@ -137,7 +137,7 @@ const resumeSchema = generateResumeSchema({
   {certifications && certifications.length > 0 && (() => {
     const professional = certifications.filter((c: { category?: string }) => (c.category ?? 'professional') === 'professional');
     const personal = certifications.filter((c: { category?: string }) => c.category === 'personal');
-    const renderCert = (cert: { authority: string; name: string; url?: string }) => (
+    const renderCert = (cert: { authority: string; name: string; url?: string; expired?: boolean }) => (
       <div class="certification-item">
         <div class="certification-header">
           <span class="certification-authority">{cert.authority}</span>
@@ -147,6 +147,9 @@ const resumeSchema = generateResumeSchema({
             ) : (
               cert.name
             )}
+            {cert.expired && (
+              <span class="cert-expired" title="No longer actively maintained" aria-label="Expired — no longer actively maintained">Expired</span>
+            )}
           </span>
         </div>
       </div>
@@ -393,6 +396,43 @@ const resumeSchema = generateResumeSchema({
     letter-spacing: 0.03em;
   }
 
+  .cert-expired {
+    display: inline-block;
+    margin-left: 0.5rem;
+    padding: 0.05rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-gray-600, #6c757d);
+    background-color: color-mix(in srgb, var(--color-gray-600, #6c757d) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-gray-600, #6c757d) 25%, transparent);
+    border-radius: 9999px;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .certification-name a[href] + .cert-expired,
+  .certification-name > .cert-expired {
+    text-decoration: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cert-expired {
+      color: var(--color-gray-400, #adb5bd);
+      background-color: color-mix(in srgb, var(--color-gray-400, #adb5bd) 12%, transparent);
+      border-color: color-mix(in srgb, var(--color-gray-400, #adb5bd) 30%, transparent);
+    }
+  }
+
+  @media print {
+    .cert-expired {
+      background-color: transparent;
+      border-color: #999;
+      color: #555;
+    }
+  }
+
   /* ============================================================
    * Dark Mode
    * ============================================================ */