Merge pull request #339 from Gothsec/update

Improve Custom LogoWall and add self-hosted font with preload

Author: Gothsec

public/fonts/montserrat-latin-ext-wght-normal.woff2

@@ -18,28 +18,26 @@ const technologies = [
 ---
 
 <div class="relative overflow-x-hidden py-8">
-  <div
-    class="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[var(--background)] to-transparent z-20"
-  >
-  </div>
-  <div
-    class="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[var(--background)] to-transparent z-20"
-  >
-  </div>
+  <div class="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[var(--background)] to-transparent z-20"></div>
+  <div class="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[var(--background)] to-transparent z-20"></div>
 
-  <div class="flex animate-scroll hover:animate-paused gap-12 md:gap-20 w-max">
+  <div class="flex animate-scroll w-max will-change-transform">
     {
-      [...technologies, ...technologies, ...technologies].map((tech) => (
-        <div class="flex items-center gap-2 group transition-all duration-300">
+      [...technologies, ...technologies].map((tech, index) => (
+        <div 
+          class="flex items-center gap-2 pr-12 md:pr-20 group transition-all duration-300"
+          aria-hidden={index >= technologies.length ? "true" : "false"}
+        >
           <img
             src={`/svg/${tech}.svg`}
             alt={tech}
             class="h-7 w-auto object-contain transition-transform group-hover:scale-110 opacity-60"
             width="30"
             height="30"
-            loading="lazy"
+            loading={index < technologies.length ? "eager" : "lazy"}
+            decoding="async"
           />
-          <span class="text-lg font-medium text-[var(--white-icon)]">
+          <span class="text-lg font-medium text-[var(--white-icon)] whitespace-nowrap">
             {tech.charAt(0).toUpperCase() + tech.slice(1)}
           </span>
         </div>
@@ -50,11 +48,11 @@ const technologies = [
 
 <style is:global>
   @keyframes scroll {
-    from {
-      transform: translateX(0);
+    0% {
+      transform: translate3d(0, 0, 0);
     }
-    to {
-      transform: translateX(-50%);
+    100% {
+      transform: translate3d(-50%, 0, 0);
     }
   }
   .animate-scroll {
@@ -66,4 +64,4 @@ const technologies = [
       animation-duration: 50s;
     }
   }
-</style>
+</style>

public/fonts/montserrat-latin-wght-normal.woff2

@@ -1,6 +1,4 @@
 ---
-import '@fontsource-variable/montserrat';
-
 interface Props {
   title: string;
 }
@@ -15,9 +13,21 @@ const { title } = Astro.props;
     <meta name="description" content="Software Developer" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
+
+    <link
+      rel="preload"
+      href="/fonts/montserrat-latin-wght-normal.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
     <meta property="og:title" content="Oscar Hernandez" />
     <meta property="og:description" content="Software Developer" />
-    <meta property="og:image" content="https://oscarhernandez.vercel.app/og.image.png" />
+    <meta
+      property="og:image"
+      content="https://oscarhernandez.vercel.app/og.image.png"
+    />
     <meta property="og:url" content="https://oscarhernandez.vercel.app" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Oscar Hernandez Portfolio" />
@@ -30,6 +40,14 @@ const { title } = Astro.props;
 </html>
 
 <style is:global>
+  @font-face {
+    font-family: "Montserrat Variable";
+    src: url("/fonts/montserrat-latin-wght-normal.woff2")
+      format("woff2-variations");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
 
   :root {
     --background: #101010;