chore: more UI fixes

components/AnimatedName.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+const names = ['👨🏿‍💼 Jesse Egbosionu', '👨🏿‍💻 jesseinit', '😎 jessewithit'];
+
+export default function AnimatedName() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsAnimating(true);
+
+      setTimeout(() => {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % names.length);
+        setIsAnimating(false);
+      }, 500); // Half of animation duration for smooth transition
+    }, 3000); // Change name every 3 seconds
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <span className="animated-name-wrapper">
+      <span className={`highlight animated-name ${isAnimating ? 'fade-out' : 'fade-in'}`}>
+        {names[currentIndex]}
+      </span>
+    </span>
+  );
+}