Replace credential embeds with native badge cards

css/styles.css

@@ -367,25 +367,17 @@ section { padding: 64px 0; }
   text-align: center;
 }
 
-.credly-embed {
+.credential-badge {
-  min-height: 270px;
+  min-height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.parchment-embed {
+.credential-badge img {
-  min-height: 270px;
+  width: 190px;
-  display: flex;
+  height: 190px;
-  align-items: center;
+  object-fit: contain;
-  justify-content: center;
-}
-
-.parchment-embed iframe {
-  width: 370px;
-  max-width: 100%;
-  height: 167px;
-  border: 0;
   display: block;
 }
 
@@ -600,7 +592,8 @@ section { padding: 64px 0; }
   .skills-grid { grid-template-columns: 1fr; }
   .credentials-grid { grid-template-columns: 1fr; }
   .credential-card { grid-template-columns: 1fr; text-align: center; }
-  .credly-embed { min-height: 270px; }
+  .credential-badge { min-height: 190px; }
+  .credential-badge img { width: 165px; height: 165px; }
   .credential-copy .view-link { display: inline-block; }
   .note-item { grid-template-columns: 36px 1fr; padding: 16px; }
   .note-item .chevron { display: none; }

index.html

@@ -231,8 +231,9 @@
 
         <div class="credentials-grid">
           <article class="credential-card">
-            <div class="credly-embed">
+            <div class="credential-badge">
-              <div data-iframe-width="300" data-iframe-height="270" data-share-badge-id="c4e4c5b4-0645-47b4-89fc-4624a8db3aa9" data-share-badge-host="https://www.credly.com"></div>
+              <img src="assets/credentials/aws-cloud-practitioner.png"
+                   alt="AWS Certified Cloud Practitioner badge" />
             </div>
             <div class="credential-copy">
               <h3>AWS Certified Cloud Practitioner</h3>
@@ -242,8 +243,9 @@
           </article>
 
           <article class="credential-card">
-            <div class="credly-embed">
+            <div class="credential-badge">
-              <div data-iframe-width="300" data-iframe-height="270" data-share-badge-id="be8c0167-dc6c-403f-a498-ba4320a8fc6d" data-share-badge-host="https://www.credly.com"></div>
+              <img src="assets/credentials/google-it-support.png"
+                   alt="Google IT Support Professional Certificate badge" />
             </div>
             <div class="credential-copy">
               <h3>Google IT Support Professional Certificate (v2)</h3>
@@ -253,11 +255,9 @@
           </article>
 
           <article class="credential-card">
-            <div class="parchment-embed">
+            <div class="credential-badge">
-              <iframe
+              <img src="assets/credentials/wgu-front-end-developer.png"
-                src="https://badges.parchment.com/public/assertions/J6-al6URSYq8tsitUvT0Dw?embedVersion=1&amp;embedWidth=370&amp;embedHeight=167&amp;utm_source=html_embed"
+                   alt="WGU Certificate: Front-End Developer badge" />
-                title="Badge: WGU Certificate: Front-End Developer"
-                loading="lazy"></iframe>
             </div>
             <div class="credential-copy">
               <h3>WGU Certificate: Front-End Developer</h3>
@@ -385,7 +385,6 @@
     </div>
   </footer>
 
-  <script type="text/javascript" async src="https://cdn.credly.com/assets/utilities/embed.js"></script>
   <script src="js/main.js" defer></script>
 </body>
 </html>