rotate

app/app.css

@@ -2,8 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
-html, body {
+html,
+body {
   background-color: #0a0a0a;
   color-scheme: dark;
   height: 100%;
-}
+}
+
+#avatar {
+  transition: transform 0.5s linear;
+}
+
+#avatar:hover {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/components/Top.tsx

@@ -1,20 +1,21 @@
 export default function Top() {
-    return (
+  return (
-        <div
+    <div
-        id="top"
+      id="top"
-        className="w-auto text-center flex items-center justify-center flex-col gap-4"
+      className="w-auto text-center flex items-center justify-center flex-col gap-4"
-      >
+    >
-        <img
+      <img
-          src="https://f.imnya.ng/profile/34b47ba35448cc74a659bcec443c3fbc.webp"
+        src="https://f.imnya.ng/profile/34b47ba35448cc74a659bcec443c3fbc.webp"
-          alt="imnyang"
+        alt="imnyang"
-          width={200}
+        width={200}
-          height={200}
+        height={200}
-          className="rounded-full"
+        id="avatar"
-        />
+        className="rounded-full"
-        <div>
+      />
-          <h1 className="text-2xl font-bold">암냥</h1>
+      <div>
-          <p className="text-sm text-neutral-400">@imnyang</p>
+        <h1 className="text-2xl font-bold">암냥</h1>
-        </div>
+        <p className="text-sm text-neutral-400">@imnyang</p>
       </div>
-    );
+    </div>
-}
+  );
+}