Fix styles

src/app/globals.css

@@ -15,6 +15,10 @@
 
 /* `Globe` components */
 .globe-container {
+  display: flex;
+  flex-direction: column;
+  height: 100lvh;
+
   & > div {
     position: absolute;
     top: 0;

src/lib/fx/noise.tsx

@@ -19,11 +19,14 @@ function Noise() {
         currentCanvas.width,
         currentCanvas.height
       );
-      const buffer = new Uint32Array(imageData.data.buffer);
-      for (let i = 0; i < buffer.length; i++) {
+      const data = imageData.data; // `Uint8ClampedArray`
+      for (let i = 0; i < data.length; i += 4) {
         const gray = 230 + Math.random() * 25; // Gray values closer to white
         const alpha = 0.25 * 255; // Adjust opacity
-        buffer[i] = ((alpha << 24) | (gray << 16) | (gray << 8) | gray) >>> 0;
+        data[i] = gray; // Red
+        data[i + 1] = gray; // Green
+        data[i + 2] = gray; // Blue
+        data[i + 3] = alpha; // Alpha
       }
       context.putImageData(imageData, 0, 0);
     }
@@ -38,7 +41,7 @@ function Noise() {
     <div
       id="noise"
       className={`will-change-transform mix-blend-multiply
-        absolute z-50 top-0 left-0 pointer-events-none
+        fixed z-50 top-0 left-0 pointer-events-none
         w-full h-lvh 
         transition-opacity duration-500 opacity-100`}
       style={{

src/lib/globes/globe.tsx

@@ -374,7 +374,14 @@ function Globe({ albums }: { albums: Array<Album> }) {
     navigator.userAgent.toLowerCase().includes('mac');
 
   return (
-    <section className="globe-container">
+    <section
+      className={`globe-container
+        py-64
+        md:px-24
+        lg:px-36
+        2xl:px-64
+        `}
+    >
       <GlobeGL
         ref={globeEl}
         width={width}
@@ -413,14 +420,8 @@ function Globe({ albums }: { albums: Array<Album> }) {
         customThreeObjectUpdate={customThreeObjectUpdate}
       />
 
-      <section
-        className={`
-          content-container text-3xl
-          my-36 m-12
-          md:mt-48 md:ml-36 md:m-24
-          2xl:ml-64`}
-      >
-        <h1 className="font-bold my-20 text-center md:text-left">
+      <section className={`content-container grow text-3xl`}>
+        <h1 className="font-bold mb-20 text-center md:text-left">
           Aaron Agarunov
         </h1>
 
@@ -452,15 +453,9 @@ function Globe({ albums }: { albums: Array<Album> }) {
         </ul>
       </section>
 
-      <footer
-        className={`
-          tracking-tight content
-          m-24
-          md:mr-36
-          2xl:mr-64`}
-      >
+      <footer className={`tracking-tight content`}>
         <div className="text-3xl text-center md:text-right">
-          <p className="m-0 p-0 mt-1">&copy; {new Date().getFullYear()}</p>
+          <p className="m-0 p-0">&copy; {new Date().getFullYear()}</p>
         </div>
       </footer>
     </section>

src/lib/nav.tsx

@@ -39,7 +39,7 @@ export const Nav: React.FC<{
               <Link
                 href="/about"
                 prefetch={false}
-                className="flex gap-1 items-center text-2xl sm:text-sm text-gray-400 hover:text-gray-500"
+                className="flex gap-1 items-center text-2xl sm:leading-5 sm:text-[15px] text-gray-400 hover:text-gray-500"
               >
                 <InfoIcon />
                 About
@@ -49,7 +49,7 @@ export const Nav: React.FC<{
               <Link
                 href="/about"
                 prefetch={false}
-                className="flex gap-1 items-center text-lg sm:text-sm text-gray-400 hover:text-gray-500"
+                className="flex gap-1 items-center text-2xl sm:leading-5 sm:text-[15px] text-gray-400 hover:text-gray-500"
               >
                 <SocialIcon />
                 Socials

tailwind.config.ts

@@ -14,6 +14,9 @@ const config: Config = {
     extend: {
       spacing: {
         '2.5': '0.875rem'
+      },
+      screens: {
+        '3xl': '2000px'
       }
     }
   },