Add files via upload

Author: d6veteran

index.html

@@ -44,13 +44,13 @@ <h1 class="hero-title">
     </div>
 
     <div class="hero-cats">
-      <div class="cat-float" style="--delay: 0s; --accent: #d97757;">🐱</div>
-      <div class="cat-float" style="--delay: 0.3s; --accent: #d4a843;">🐱</div>
-      <div class="cat-float" style="--delay: 0.6s; --accent: #6a9bcc;">🐱</div>
-      <div class="cat-float" style="--delay: 0.9s; --accent: #788c5d;">🐱</div>
-      <div class="cat-float" style="--delay: 1.2s; --accent: #8b7eb8;">🐱</div>
-      <div class="cat-float" style="--delay: 1.5s; --accent: #7ab5b0;">🐱</div>
-      <div class="cat-float" style="--delay: 1.8s; --accent: #c4a882;">🐱</div>
+      <div class="cat-float" style="--delay: 0s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/akira-icon.png?raw=true" alt="Akira" class="cat-icon"></div>
+      <div class="cat-float" style="--delay: 0.3s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/sasha-icon.png?raw=true" alt="Sasha" class="cat-icon"></div>
+      <div class="cat-float" style="--delay: 0.6s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/robin-icon.png?raw=true" alt="Robin" class="cat-icon"></div>
+      <div class="cat-float" style="--delay: 0.9s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/quinn-icon.png?raw=true" alt="Quinn" class="cat-icon"></div>
+      <div class="cat-float" style="--delay: 1.2s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/river-icon.png?raw=true" alt="River" class="cat-icon"></div>
+      <div class="cat-float" style="--delay: 1.5s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/sage-icon.png?raw=true" alt="Sage" class="cat-icon"></div>
+      <div class="cat-float" style="--delay: 1.8s;"><img src="https://github.com/code-katz/.github/blob/main/media/logos/toni-icon.png?raw=true" alt="Toni" class="cat-icon"></div>
     </div>
   </section>
 

style.css

@@ -180,11 +180,15 @@ a { color: var(--charcoal); }
 }
 
 .cat-float {
-  font-size: 2rem;
   animation: catBob 2.5s ease-in-out infinite;
   animation-delay: var(--delay);
-  filter: grayscale(0.3);
-  opacity: 0.7;
+}
+
+.cat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
 @keyframes catBob {
@@ -554,5 +558,5 @@ a { color: var(--charcoal); }
   }
 
   .hero-cats { gap: 0.75rem; }
-  .cat-float { font-size: 1.5rem; }
+  .cat-icon { width: 36px; height: 36px; }
 }