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>
+  );
+}

pages/index.js

@@ -1,17 +1,19 @@
 import Layout from '../components/Layout';
 import SocialLinks from '../components/SocialLinks';
+import AnimatedName from '../components/AnimatedName';
 
 export default function Home() {
   return (
     <Layout showNavLinks={false}>
       <section className="hero">
-        <div className="hero-content">
         <h1 className="hero-title">
-            Hey, I'm <span className="highlight">Jesse Egbosionu</span>
+          Hey, I'm <AnimatedName />
         </h1>
+        <div className="hero-main">
+          <div className="hero-content">
 
             <p className="hero-subtitle">
-            Software Engineer crafting scalable backend systems in Amsterdam
+              A software engineer architecting scalable backend systems in Amsterdam
             </p>
 
             <div className="hero-description">
@@ -34,6 +36,7 @@ export default function Home() {
               <span>Let's work together</span>
               <span className="arrow">→</span>
             </a>
+
           </div>
 
           <div className="hero-image-wrapper">
@@ -44,6 +47,7 @@ export default function Home() {
               className="hero-image"
             />
           </div>
+        </div>
       </section>
     </Layout>
   );

styles/globals.scss

@@ -105,7 +105,6 @@ strong {
     background: var(--color-accent);
     color: var(--color-primary);
     padding: 0.25rem 0.75rem;
-    border: 1px solid var(--color-primary);
     border-radius: var(--radius-sm);
   }
 }
@@ -150,32 +149,80 @@ strong {
 
 // HERO SECTION
 .hero {
-  display: grid;
-  grid-template-columns: 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--spacing-2xl);
-  align-items: center;
   width: 100%;
 }
 
+.hero-main {
+  display: flex;
+  gap: var(--spacing-2xl);
+  align-items: center;
+}
+
 .hero-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
 }
 
 .hero-title {
-  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-size: clamp(1.75rem, 5vw, 3.5rem);
   font-weight: 800;
   line-height: 1.2;
   color: var(--color-primary);
   animation: fadeInUp 0.6s ease forwards;
   opacity: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+
+  @media (max-width: 767px) {
+    font-size: clamp(1.5rem, 6vw, 2rem);
+    gap: 0.35rem;
+  }
 
   .highlight {
     background: var(--color-accent);
     color: var(--color-primary);
     padding: 0 0.5rem;
     border-bottom: 2px solid var(--color-primary);
+
+    @media (max-width: 767px) {
+      padding: 0 0.35rem;
+      border-bottom: 1px solid var(--color-primary);
+    }
+  }
+
+  .animated-name-wrapper {
+    display: inline-block;
+    min-width: 0;
+    text-align: left;
+
+    @media (max-width: 767px) {
+      text-align: left;
+    }
+  }
+
+  .animated-name {
+    display: inline-block;
+    transition: opacity 0.5s ease-in-out;
+    white-space: nowrap;
+
+    @media (max-width: 767px) {
+      font-size: 0.95em;
+    }
+
+    &.fade-out {
+      opacity: 0;
+    }
+
+    &.fade-in {
+      opacity: 1;
+    }
   }
 }
 
@@ -333,13 +380,19 @@ strong {
 }
 
 @keyframes heartbeat {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
   }
-  10%, 30% {
+
+  10%,
+  30% {
     transform: scale(1.1);
   }
-  20%, 40% {
+
+  20%,
+  40% {
     transform: scale(1);
   }
 }
@@ -547,10 +600,13 @@ strong {
 }
 
 @keyframes badgePulse {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transform: scale(1);
   }
+
   50% {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     transform: scale(1.05);
@@ -561,6 +617,7 @@ strong {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -625,12 +682,10 @@ strong {
   .skeleton-header,
   .skeleton-rate,
   .skeleton-badge {
-    background: linear-gradient(
-      90deg,
+    background: linear-gradient(90deg,
         var(--color-surface) 0%,
         var(--color-border) 50%,
-      var(--color-surface) 100%
-    );
+        var(--color-surface) 100%);
     background-size: 200% 100%;
     animation: shimmer 1.5s ease-in-out infinite;
     border-radius: var(--radius-sm);
@@ -657,6 +712,7 @@ strong {
   0% {
     background-position: -200% 0;
   }
+
   100% {
     background-position: 200% 0;
   }
@@ -725,16 +781,16 @@ strong {
     padding: 0 var(--spacing-xl);
   }
 
-  .hero {
-    grid-template-columns: 1.2fr 1fr;
+  .hero-main {
+    flex-direction: row;
   }
 
   .hero-content {
-    order: 1;
+    flex: 1.2;
   }
 
   .hero-image-wrapper {
-    order: 2;
+    flex: 1;
   }
 
   .rates-header {
@@ -758,16 +814,12 @@ strong {
     display: none;
   }
 
-  .hero {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-content {
-    order: 2;
+  .hero-main {
+    flex-direction: column-reverse;
   }
 
   .hero-image-wrapper {
-    order: 1;
+    width: 100%;
     margin-bottom: var(--spacing-lg);
   }