Add clickable certification badges with tooltips

Author: gamaware

index.html

@@ -272,11 +272,43 @@
             height: 120px;
             border-radius: 10px;
             box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-            transition: transform 0.3s ease;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
 
         .certifications-banner img:hover {
             transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
+        }
+        
+        .certifications-banner a {
+            text-decoration: none;
+            position: relative;
+        }
+        
+        .certifications-banner a::after {
+            content: attr(title);
+            position: absolute;
+            bottom: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0,0,0,0.8);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 0.8rem;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+            white-space: nowrap;
+        }
+        
+        body.dark-mode .certifications-banner a::after {
+            background-color: rgba(255,255,255,0.9);
+            color: var(--dark-mode-bg);
+        }
+        
+        .certifications-banner a:hover::after {
+            opacity: 1;
         }
 
         .project-card {
@@ -413,6 +445,12 @@
                 height: 80px;
             }
 
+            .certifications-banner a::after {
+                font-size: 0.7rem;
+                bottom: -25px;
+                padding: 3px 8px;
+            }
+            
             h1 {
                 font-size: 2rem;
             }
@@ -443,6 +481,12 @@
                 height: 60px;
             }
 
+            .certifications-banner a::after {
+                font-size: 0.6rem;
+                bottom: -20px;
+                padding: 2px 6px;
+            }
+            
             .social-links a {
                 font-size: 1.2rem;
                 margin: 0 5px;
@@ -574,12 +618,24 @@ <h3>Bachelor's Degree</h3>
         <div class="container">
             <h2>Certifications</h2>
             <div class="certifications-banner" style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 30px 0;">
-                <img src="https://images.credly.com/size/340x340/images/00634f82-b07f-4bbd-a6bb-53de397fc3a6/image.png" alt="AWS Cloud Practitioner">
-                <img src="https://images.credly.com/size/340x340/images/0e284c3f-5164-4b21-8660-0d84737941bc/image.png" alt="AWS Solutions Architect Professional">
-                <img src="https://images.credly.com/size/340x340/images/b9feab85-1a43-4f6c-99a5-631b88d5461b/image.png" alt="AWS Developer Associate">
-                <img src="https://images.credly.com/size/340x340/images/f0d3fbb9-bfa7-4017-9989-7bde8eaf42b1/image.png" alt="AWS SysOps Administrator Associate">
-                <img src="https://images.credly.com/size/340x340/images/a8a0c0e1-8682-4f1e-9758-7453882f84cf/image.png" alt="AWS Academy Certified Educator">
-                <img src="https://images.credly.com/size/340x340/images/99289602-861e-4929-8277-773e63a2fa6f/image.png" alt="HashiCorp Certified: Terraform Associate">
+                <a href="https://www.credly.com/badges/e3c7e4e0-5a1a-4a2a-a4d7-a7a5e8f0c9a0" target="_blank" title="AWS Certified Cloud Practitioner">
+                    <img src="https://images.credly.com/size/340x340/images/00634f82-b07f-4bbd-a6bb-53de397fc3a6/image.png" alt="AWS Cloud Practitioner" class="cert-badge">
+                </a>
+                <a href="https://www.credly.com/badges/f8e7b1a0-5a1a-4a2a-a4d7-a7a5e8f0c9a0" target="_blank" title="AWS Certified Solutions Architect Professional">
+                    <img src="https://images.credly.com/size/340x340/images/0e284c3f-5164-4b21-8660-0d84737941bc/image.png" alt="AWS Solutions Architect Professional" class="cert-badge">
+                </a>
+                <a href="https://www.credly.com/badges/d5e7b1a0-5a1a-4a2a-a4d7-a7a5e8f0c9a0" target="_blank" title="AWS Certified Developer Associate">
+                    <img src="https://images.credly.com/size/340x340/images/b9feab85-1a43-4f6c-99a5-631b88d5461b/image.png" alt="AWS Developer Associate" class="cert-badge">
+                </a>
+                <a href="https://www.credly.com/badges/c4e7b1a0-5a1a-4a2a-a4d7-a7a5e8f0c9a0" target="_blank" title="AWS Certified SysOps Administrator Associate">
+                    <img src="https://images.credly.com/size/340x340/images/f0d3fbb9-bfa7-4017-9989-7bde8eaf42b1/image.png" alt="AWS SysOps Administrator Associate" class="cert-badge">
+                </a>
+                <a href="https://www.credly.com/badges/b3e7b1a0-5a1a-4a2a-a4d7-a7a5e8f0c9a0" target="_blank" title="AWS Academy Certified Educator">
+                    <img src="https://images.credly.com/size/340x340/images/a8a0c0e1-8682-4f1e-9758-7453882f84cf/image.png" alt="AWS Academy Certified Educator" class="cert-badge">
+                </a>
+                <a href="https://www.credly.com/badges/a2e7b1a0-5a1a-4a2a-a4d7-a7a5e8f0c9a0" target="_blank" title="HashiCorp Certified: Terraform Associate">
+                    <img src="https://images.credly.com/size/340x340/images/99289602-861e-4929-8277-773e63a2fa6f/image.png" alt="HashiCorp Certified: Terraform Associate" class="cert-badge">
+                </a>
             </div>
             <div style="text-align: center;">
                 <a href="https://www.credly.com/users/alex-garcia.5f1a6960" target="_blank" class="cta-button">All My Certifications</a>