RexO77 · RexO77 · Aug 5, 2025
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,11 +1,13 @@
 /* --- Global Styles & Variables --- */
-/* --- Local Font Declarations --- */
+/* --- Optimized Font Declarations --- */
 @font-face {
     font-family: 'Satoshi';
     src: url('/fonts/Satoshi-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
+    font-preload: true;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
@@ -14,6 +16,40 @@
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
+    font-preload: true;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Font loading optimization */
+.fonts-loaded body {
+    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.fonts-loaded .hero-headline,
+.fonts-loaded .logo {
+    font-family: 'Unbounded', sans-serif;
+}
+
+/* Loading state management */
+body.loading {
+    opacity: 0.99;
+}
+
+body.loaded {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+}
+
+/* Prevent layout shifts during loading */
+.loading .hero-headline,
+.loading .post-item {
+    opacity: 0.8;
+}
+
+.loaded .hero-headline,
+.loaded .post-item {
+    opacity: 1;
+    transition: opacity 0.3s ease;
 }
 
 :root {
@@ -283,9 +319,16 @@ a {
     padding: 80px 0;
 }
 
+.hero-arrow {
+    margin-top: 20px;
+    text-align: center;
+}
+
+
+
 .hero-headline {
     font-family: 'Unbounded', sans-serif;
-    font-size: 5rem; /* Adjust as needed */
+    font-size: 4.2rem; /* Adjusted for 2-line layout */
     line-height: 1.1;
     text-transform: uppercase;
     margin: 0;
@@ -295,8 +338,8 @@ a {
 /* --- Interactive Elements (CSS Version) --- */
 .interactive-o {
     display: inline-block;
-    width: 1em;
-    height: 0.4em;
+    width: 1.5em;
+    height: 0.6em;
     background: linear-gradient(120deg, var(--accent-color-yellow), var(--accent-color-blue));
     border-radius: 50px;
     vertical-align: middle;
@@ -306,15 +349,15 @@ a {
 }
 
 .interactive-arrow {
-    display: inline-block;
-    width: 0.8em;
-    height: 0.8em;
-    background: linear-gradient(160deg, var(--accent-color-blue), #6DD5FA);
-    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
-    vertical-align: middle;
-    position: relative;
-    top: 0.1em;
-    margin-left: -0.2em;
+    display: inline-block !important;
+    width: 2.5em !important;
+    height: 2.5em !important;
+    background: linear-gradient(160deg, var(--accent-color-blue), #6DD5FA) !important;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
+    vertical-align: middle !important;
+    position: relative !important;
+    top: 0.1em !important;
+    margin-left: -0.2em !important;
 }
 
 /* --- Post List (For later) --- */

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -60,11 +60,21 @@
     function optimizeFontLoading() {
         if ('fonts' in document) {
             Promise.all([
-                document.fonts.load('400 1em Inter'),
-                document.fonts.load('700 1em Unbounded')
+                document.fonts.load('400 1em Satoshi'),
+                document.fonts.load('700 1em Unbounded'),
+                document.fonts.load('400 1em "Unbounded"'),
+                document.fonts.load('700 1em "Unbounded"')
             ]).then(() => {
                 document.documentElement.classList.add('fonts-loaded');
+            }).catch(() => {
+                // Fallback if font loading fails
+                document.documentElement.classList.add('fonts-loaded');
             });
+        } else {
+            // Fallback for browsers without Font Loading API
+            setTimeout(() => {
+                document.documentElement.classList.add('fonts-loaded');
+            }, 100);
         }
     }
 
@@ -88,8 +98,27 @@
         });
     }
 
-    // Performance: Add loading states
+    // Performance: Add loading states and prevent layout shifts
     function initLoadingStates() {
+        // Add loading class to body initially
+        document.body.classList.add('loading');
+
+        // Remove loading class after critical resources are loaded
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                document.body.classList.remove('loading');
+                document.body.classList.add('loaded');
+            }, 100);
+        });
+
+        // Fallback if load event doesn't fire
+        setTimeout(() => {
+            if (document.body.classList.contains('loading')) {
+                document.body.classList.remove('loading');
+                document.body.classList.add('loaded');
+            }
+        }, 3000);
+
         const elements = document.querySelectorAll('.hero-headline, .post-item');
         elements.forEach(element => {
             element.classList.add('loading');

diff --git a/hugo_stats.json b/hugo_stats.json
@@ -25,7 +25,6 @@
       "main",
       "meta",
       "nav",
-      "noscript",
       "ol",
       "p",
       "picture",
@@ -49,6 +48,7 @@
       "author-bio",
       "container",
       "content",
+      "hero-arrow",
       "hero-headline",
       "hero-section",
       "interactive-arrow",

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,27 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <!-- CRITICAL: Theme detection script - must be first to prevent FOUC -->
+    <script>
+        (function() {
+            try {
+                const theme = localStorage.getItem('theme') || 
+                             (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+                document.documentElement.setAttribute('data-theme', theme);
+            } catch (e) {
+                document.documentElement.setAttribute('data-theme', 'light');
+            }
+        })();
+    </script>
+
     <!-- SEO Meta Tags -->
     {{ partial "head-seo.html" . }}
 
-    <!-- Optimized & fingerprinted CSS with preload -->
+    <!-- Optimized CSS loading - simplified for better performance -->
     {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
-    <link rel="preload" href="{{ $style.RelPermalink }}" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="{{ $style.Data.Integrity }}">
-    <noscript><link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}"></noscript>
+    <link rel="preload" href="{{ $style.RelPermalink }}" as="style">
+    <link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
 
     <!-- Local fonts for better performance -->
     <link rel="preload" href="/fonts/Satoshi-Regular.otf" as="font" type="font/otf" crossorigin>
     <link rel="preload" href="/fonts/Unbounded-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
 
-    <!-- Immediate theme script to prevent FOUC -->
-    <script>
-        (function() {
-            const theme = localStorage.getItem('theme') || 
-                         (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-            document.documentElement.setAttribute('data-theme', theme);
-        })();
-    </script>
-
     <!-- Google Analytics -->
     {{ if .Site.Params.googleAnalytics }}
     <!-- Google tag (gtag.js) -->
@@ -56,16 +60,19 @@
         </main>
     </div>
 
+    <!-- Optimized Script Loading -->
     {{ $js := resources.Get "js/main.js" | resources.Minify | resources.Fingerprint }}
     <script src="{{ $js.RelPermalink }}" defer integrity="{{ $js.Data.Integrity }}"></script>
 
-    <!-- Analytics Test Script (remove in production) -->
-    {{ $analyticsTest := resources.Get "js/analytics-test.js" | resources.Minify }}
-    <script src="{{ $analyticsTest.RelPermalink }}" defer></script>
-
-    <!-- Vercel Analytics -->
+    <!-- Analytics Scripts - Loaded with low priority -->
     {{ if .Site.Params.vercelAnalytics }}
     <script defer src="/_vercel/insights/script.js"></script>
     {{ end }}
+
+    <!-- Development Analytics Test Script (remove in production) -->
+    {{ if hugo.IsServer }}
+    {{ $analyticsTest := resources.Get "js/analytics-test.js" | resources.Minify }}
+    <script src="{{ $analyticsTest.RelPermalink }}" defer></script>
+    {{ end }}
 </body>
 </html>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -2,8 +2,11 @@
 <div class="hero-section">
     <h1 class="hero-headline">
         THE ONLY BLOGS <span class="interactive-o"></span> YOU<br>
-        WOULD LOVE TO READ <span class="interactive-arrow"></span>
+        WOULD LOVE TO READ
     </h1>
+    <div class="hero-arrow">
+        <span class="interactive-arrow"></span>
+    </div>
 </div>
 
 <div class="post-list">