feat: improved performance of globe

Author: rubenbupe

package.json

@@ -3,7 +3,7 @@
 	"type": "module",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "astro dev",
+		"dev": "astro dev --port 3000 --host",
 		"clean": "rm -rf dist",
 		"start": "astro dev",
 		"build": "npm run clean && astro check && astro build",
@@ -38,4 +38,4 @@
 	"devDependencies": {
 		"@tailwindcss/typography": "^0.5.14"
 	}
-}
+}

src/components/Globe.tsx

@@ -32,10 +32,14 @@ export function Globe() {
       markers: [ { location: [37.7595, -122.4367], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [40.7128, -74.006], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [52.520008, 13.404954], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [51.507351, -0.127758], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [35.689487, 139.691711], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [22.396427, 114.109497], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [30.047503, 31.233702], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [-33.86882, 151.20929], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [-9.746956, -44.261249], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, ],
       onRender: (state) => {
         state.phi = phi;
-        phi += 0.0005;
+       // phi += 0.0001;
       }
     });
 
+		// The animation is heavy, so we stop it after first render
+		setTimeout(() => {
+			globe.toggle(false);
+		})
     return () => {
       globe.destroy();
     };

src/sections/Hero.astro

@@ -15,7 +15,7 @@ import Anchor from "../components/Anchor.astro";
             Rubén Buzón
         </h1>
         <p
-            class="text-4xl font-bold tracking-tight sm:text-5xl md:text-7xl pb-1 mt-3 bg-gradient-to-b from-50% to-100% from-white/50 to-gray-400/50 text-transparent bg-clip-text [text-shadow:_0_1px_5px_rgb(0_0_0_/_20%)]"
+            class="text-4xl font-bold tracking-tight sm:text-5xl md:text-7xl pb-3 mt-3 bg-gradient-to-b from-50% to-100% from-white/50 to-gray-400/50 text-transparent bg-clip-text [text-shadow:_0_1px_5px_rgb(0_0_0_/_20%)]"
         >
             Full-Stack Engineer
         </p>

src/sections/Jobs.astro

@@ -33,7 +33,7 @@ import Separator from "../components/Separator.astro";
         <div
             class="absolute aspect-square w-[100%] -bottom-0 transform translate-y-1/2"
         >
-            <Globe client:only />
+            <Globe client:visible />
         </div>
     </div>
     <Section id="jobs" class="relative py-24 min-h-[90vh] flex flex-col">