update globe

Author: DannyW618

index.html

@@ -42,9 +42,9 @@
     <div id="about-bg"></div>
 
     <div class="container about-wrap hover-sheen">
-      <!-- <div class="about-media">
-        <img src="./images/profile.jpg" alt="Danny Wang" class="avatar" />
-      </div> -->
+      <div class="about-media">
+        <!-- <img src="./images/profile.jpg" alt="Danny Wang" class="avatar" /> -->
+      </div>
       <div class="about-text">
         <h1>Danny Wang</h1>
         <h2><span id="typed-text"></span></h2>
@@ -234,12 +234,10 @@ <h3 id="modal-title"></h3>
       <!-- ClustrMaps compact badge -->
       <div id="clustrmaps-widget">
         <script
+          type="text/javascript"
           id="clstr_globe"
-          src="//clustrmaps.com/globe.js?d=Z_eDdxmRmKJNB-6CkD-fuNodpz-v23QtWbpWgEUEaiE"
-          async defer></script>
-        <noscript>
-          <a href="https://clustrmaps.com/site/your-site" rel="noopener" target="_blank">Visitor Map</a>
-        </noscript>
+          src="https://clustrmaps.com/globe.js?d=Z_eDdxmRmKJNB-6CkD-fuNodpz-v23QtWbpWgEUEaiE">
+        </script>
       </div>
     </div>
   </footer>

styles.css

@@ -291,3 +291,13 @@ a:hover{opacity:.9}
 /* Footer layout with globe at right */
 .footer-flex{display:flex;align-items:center;justify-content:space-between;gap:16px}
 #clustrmaps-widget{display:flex;align-items:center;justify-content:center}
+#clustrmaps-widget { width: 260px; height: 160px; }
+#clustrmaps-widget canvas { width: 100% !important; height: 100% !important; display: block; }
+
+#clstr_globe {
+  width: 250px;   /* or whatever fits your footer */
+  height: 150px;
+  display: block;
+  margin: 0 auto;
+}
+