From b10e64909c91f4ee666420ed0cd19a57ad94fcc1 Mon Sep 17 00:00:00 2001
From: Mohit Raj <mohit@agrmohit.com>
Date: Fri, 30 Aug 2024 14:47:53 +0530
Subject: [PATCH] feat: spin github star once on hover

---
 assets/css/style.css      | 19 +++++++++++++++++++
 assets/js/script-stars.js |  4 +++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 6153fcc..5e5bbab 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -340,3 +340,22 @@ p:hover .emoji-wave {
     transform: rotate(0deg);
   }
 }
+
+.emoji-rotate {
+  display: inline-block;
+}
+
+span:hover .emoji-rotate {
+  animation-name: spin-animation;
+  animation-duration: 3s;
+  animation-iteration-count: 1;
+}
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/assets/js/script-stars.js b/assets/js/script-stars.js
index 63e1a8b..5cf3e66 100644
--- a/assets/js/script-stars.js
+++ b/assets/js/script-stars.js
@@ -15,7 +15,9 @@ async function GitHubStars() {
     }
 
     if (stars) {
-      h3.innerHTML = h3.innerHTML.trim().replace("<a", ` <span title="${stars} GitHub stars">(${stars}⭐)</span><a`);
+      h3.innerHTML = h3.innerHTML
+        .trim()
+        .replace("<a", ` <span title="${stars} GitHub stars">(${stars}<span class="emoji-rotate">⭐</span>)</span><a`);
     }
   }