BEtter, but still: the fonts are too simple and do not fit a website of a creative person. Please find more beautiful, more artistic, more creative fonts, also for the "normal" text sections. THe logo also needs way more love: let the S and O be cut of by the backslash a little bite!

index.html

@@ -44,10 +44,15 @@
         <!-- Logo -->
         <div class="absolute top-8 left-8 z-20 group">
             <a href="#">
-                <div class="relative w-16 h-16 border border-zinc-300 p-2 rounded-full group-hover:border-zinc-100 transition-all duration-300">
-                    <div class="flex items-center justify-center h-full">
-                        <span class="text-3xl font-light tracking-tighter">s/o</span>
-                    </div>
+                <div class="relative w-20 h-20 border border-zinc-300 rounded-full group-hover:border-zinc-100 transition-all duration-300">
+                    <svg viewBox="0 0 64 64" class="w-full h-full">
+                        <circle cx="32" cy="32" r="30" fill="none" stroke="currentColor" stroke-width="1.5" class="text-zinc-300 group-hover:text-zinc-100 transition-colors duration-300"/>
+                        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="EB Garamond" font-size="28" font-weight="500" fill="currentColor" class="text-zinc-300 group-hover:text-zinc-100 transition-colors duration-300">
+                            <tspan x="32" dy="0">S</tspan>
+                            <tspan fill="none" stroke="currentColor" stroke-width="1.5">/</tspan>
+                            <tspan x="32" dy="0" style="text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.3);">O</tspan>
+                        </text>
+                    </svg>
                 </div>
             </a>
         </div>

script.js

@@ -3,21 +3,30 @@ document.addEventListener('DOMContentLoaded', () => {
     // Animate the logo on hover
     const logo = document.querySelector('.group');
     logo.addEventListener('mouseenter', () => {
-        gsap.to(logo.querySelector('div'), {
+        gsap.to(logo.querySelector('svg'), {
             rotation: 360,
+            duration: 1.5,
+            ease: 'elastic.out(1, 0.5)'
+        });
+        gsap.to(logo.querySelector('circle'), {
+            strokeWidth: 2.5,
             duration: 0.5,
             ease: 'power2.out'
         });
     });
     logo.addEventListener('mouseleave', () => {
-        gsap.to(logo.querySelector('div'), {
+        gsap.to(logo.querySelector('svg'), {
             rotation: 0,
+            duration: 1,
+            ease: 'back.out(1.7)'
+        });
+        gsap.to(logo.querySelector('circle'), {
+            strokeWidth: 1.5,
             duration: 0.5,
             ease: 'power2.out'
         });
     });
-
-    // Smooth scrolling for anchor links
+// Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();

style.css

@@ -1,19 +1,31 @@
 
-@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 body {
-    font-family: 'Archivo', sans-serif;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 300;
+    line-height: 1.6;
+    letter-spacing: 0.5px;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: 'Playfair Display', serif;
-    font-weight: 400;
+    font-family: 'Cormorant Garamond', serif;
+    font-weight: 500;
     letter-spacing: -0.03em;
+    line-height: 1.3;
 }
 
 .hero-text h1 {
+    font-family: 'EB Garamond', serif;
     font-weight: 500;
-    letter-spacing: -0.05em;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+p {
+    font-family: 'EB Garamond', serif;
+    font-size: 1.1rem;
+    line-height: 1.8;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {