From 3195cfd39fc80234d5ec247c44351a8e1c18d8b8 Mon Sep 17 00:00:00 2001
From: painterpuppets <painterpuppets@gmail.com>
Date: Thu, 9 May 2024 10:33:25 +0800
Subject: [PATCH] styling: change `absolute` position to `fixed`

---
 src/pages/index.tsx | 114 +++++++++++++++++++++++++++-----------------
 1 file changed, 69 insertions(+), 45 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f73dee4..ffbd64f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import clsx from "clsx";
 import PixelArrow from "./pixelarticons_arrow.svg";
@@ -22,6 +22,30 @@ import RainbowImage from "./rainbow.png";
 import PhoneImage from "./phone.png";
 import Head from "next/head";
 
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
+
 enum Page {
   Home,
   Nashville,
@@ -29,21 +53,21 @@ enum Page {
 }
 
 const HomeBackground: React.FC = () => (
-  <div className="z-[-1] top-0 left-0 w-[100vw] h-[100vh] absolute overflow-hidden">
-    <div className="z-[-1] absolute top-0 bottom-0 left-0 w-[50vw] bg-primary" />
-    <div className="z-[-1] absolute top-0 bottom-0 right-0 w-[50vw] bg-secondary" />
-    <div className="top-0 left-0 w-[100vw] h-[100vh] absolute">
+  <div className="z-[-1] top-0 left-0 w-[100vw] h-[100vh] fixed overflow-hidden">
+    <div className="z-[-1] fixed top-0 bottom-0 left-0 w-[50vw] bg-primary" />
+    <div className="z-[-1] fixed top-0 bottom-0 right-0 w-[50vw] bg-secondary" />
+    <div className="top-0 left-0 w-[100vw] h-[100vh] fixed">
       <div className="relative w-full h-full">
-        <Chocolate className="w-24 absolute top-1/2 left-1/2 transform translate-x-[46px] -translate-y-[307px]" />
-        <Chocolate className="w-14 absolute top-1/2 left-1/2 transform translate-x-[210px] -translate-y-[180px]" />
-        <Chocolate className="w-9 absolute top-1/2 left-1/2 transform translate-x-[190px] -translate-y-[140px]" />
+        <Chocolate className="w-24 fixed top-1/2 left-1/2 transform translate-x-[46px] -translate-y-[307px]" />
+        <Chocolate className="w-14 fixed top-1/2 left-1/2 transform translate-x-[210px] -translate-y-[180px]" />
+        <Chocolate className="w-9 fixed top-1/2 left-1/2 transform translate-x-[190px] -translate-y-[140px]" />
 
         <Image
           height={240}
           width={240}
           src={RainbowImage.src}
           alt="rainbow picture"
-          className="absolute top-1/2 left-1/2 transform -translate-x-[170px] -translate-y-[440px] rotate-[-16deg]"
+          className="fixed top-1/2 left-1/2 transform -translate-x-[170px] -translate-y-[440px] rotate-[-16deg]"
         />
 
         <Image
@@ -51,7 +75,7 @@ const HomeBackground: React.FC = () => (
           width={140}
           src={RainbowImage.src}
           alt="rainbow picture"
-          className="absolute top-1/2 left-1/2 transform translate-x-[90px] -translate-y-[220px] rotate-[170deg]"
+          className="fixed top-1/2 left-1/2 transform translate-x-[90px] -translate-y-[220px] rotate-[170deg]"
         />
 
         <Image
@@ -59,19 +83,19 @@ const HomeBackground: React.FC = () => (
           width={448}
           src={BtcImage.src}
           alt="btc picture"
-          className="absolute h-[550px] w-[448px] object-cover top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-[60%]"
+          className="fixed h-[550px] w-[448px] object-cover top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-[60%]"
         />
-        <RgbBadge className="w-20 absolute top-1/2 left-1/2 transform -translate-x-[175px] -translate-y-[256px] drop-shadow-[17px_19px_10px_#2A01014D]" />
-        <Shuriken className="w-40 text-[#FFEEDD] absolute top-1/2 left-1/2 transform -translate-x-[280px] -translate-y-60" />
-        <Shuriken className="w-8 text-[#FFEEDD] absolute top-1/2 left-1/2 transform -translate-x-44 translate-y-[120px]" />
-        <Shuriken className="w-16 text-[#FFEEDD] absolute top-1/2 left-1/2 transform -translate-x-[160px] translate-y-[132px]" />
+        <RgbBadge className="w-20 fixed top-1/2 left-1/2 transform -translate-x-[175px] -translate-y-[256px] drop-shadow-[17px_19px_10px_#2A01014D]" />
+        <Shuriken className="w-40 text-[#FFEEDD] fixed top-1/2 left-1/2 transform -translate-x-[280px] -translate-y-60" />
+        <Shuriken className="w-8 text-[#FFEEDD] fixed top-1/2 left-1/2 transform -translate-x-44 translate-y-[120px]" />
+        <Shuriken className="w-16 text-[#FFEEDD] fixed top-1/2 left-1/2 transform -translate-x-[160px] translate-y-[132px]" />
 
         <Image
           height={88}
           width={200}
           src={RgbppBadge.src}
           alt="rgb++ picture"
-          className="absolute top-1/2 left-1/2 transform translate-x-[60px] -translate-y-[236px]"
+          className="fixed top-1/2 left-1/2 transform translate-x-[60px] -translate-y-[236px]"
         />
 
         <Image
@@ -79,7 +103,7 @@ const HomeBackground: React.FC = () => (
           width={150}
           src={GreenGuy.src}
           alt="green guy picture"
-          className="absolute top-1/2 left-1/2 transform translate-x-14 translate-y-1"
+          className="fixed top-1/2 left-1/2 transform translate-x-14 translate-y-1"
         />
 
         <Image
@@ -87,7 +111,7 @@ const HomeBackground: React.FC = () => (
           width={55}
           src={PhoneImage.src}
           alt="mobile phone picture"
-          className="absolute top-1/2 left-1/2 transform -translate-x-[156px] translate-y-[20px]"
+          className="fixed top-1/2 left-1/2 transform -translate-x-[156px] translate-y-[20px]"
         />
 
         <Image
@@ -95,7 +119,7 @@ const HomeBackground: React.FC = () => (
           width={55}
           src={PhoneImage.src}
           alt="mobile phone picture"
-          className="absolute top-1/2 left-1/2 transform -translate-x-[202px] translate-y-[69px]"
+          className="fixed top-1/2 left-1/2 transform -translate-x-[202px] translate-y-[69px]"
         />
 
         <Image
@@ -103,7 +127,7 @@ const HomeBackground: React.FC = () => (
           width={107}
           src={PhoneImage.src}
           alt="mobile phone picture"
-          className="absolute top-1/2 left-1/2 transform -translate-x-[240px]"
+          className="fixed top-1/2 left-1/2 transform -translate-x-[240px]"
         />
       </div>
     </div>
@@ -114,7 +138,7 @@ const HomeBackground: React.FC = () => (
         width={300}
         src={BlueGuy.src}
         alt="blue guy"
-        className="absolute h-[24vh] w-[32vh] bottom-0 left-1/2 transform -translate-x-[100%]"
+        className="fixed h-[24vh] w-[32vh] bottom-0 left-1/2 transform -translate-x-[100%]"
       />
 
       <Image
@@ -122,7 +146,7 @@ const HomeBackground: React.FC = () => (
         width={300}
         src={RedGuy.src}
         alt="red guy"
-        className="absolute h-[24vh] w-[32vh] bottom-0 left-1/2"
+        className="fixed h-[24vh] w-[32vh] bottom-0 left-1/2"
       />
 
       <Image
@@ -130,7 +154,7 @@ const HomeBackground: React.FC = () => (
         width={300}
         src={DancingCyanGuy.src}
         alt="dancing cyan guy.gif"
-        className="absolute h-[40vh] w-[30vh] -bottom-[8vh] left-1/2 transform -translate-x-1/2"
+        className="fixed h-[40vh] w-[30vh] -bottom-[8vh] left-1/2 transform -translate-x-1/2"
       />
     </>
   </div>
@@ -140,12 +164,12 @@ const HomePage: React.FC = () => (
   <div className="h-screen w-screen relative">
     <HomeBackground />
     <div className="h-full w-full container mx-auto">
-      <div className="px-2 sm:px-4 lg:px-10 text-center w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-[100%]">
+      <div className="px-2 sm:px-4 lg:px-10 text-center w-full fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-[100%]">
         <span className="text-center font-deltarune text-7xl sm:text-8xl lg:text-9xl text-branding text-stroke drop-shadow-[6px_25px_12px_rgba(0,0,0,0.25)]">
           Friends of Bitcoin
         </span>
       </div>
-      <div className="px-2 sm:px-4 lg:px-10 w-full flex absolute bottom-[30vh] left-1/2 transform -translate-x-1/2">
+      <div className="px-2 sm:px-4 lg:px-10 w-full flex fixed bottom-[30vh] left-1/2 transform -translate-x-1/2">
         <a
           className="btn-pixel bg-[#A3FFCD] text-[#FF00A8]"
           href="https://lu.ma/0bwudqyt"
@@ -173,20 +197,20 @@ const NashvillePage: React.FC<{ onPageChange: Function }> = ({
 }) => (
   <div className="w-screen h-screen bg-primary">
     <div>
-      <Cactus className="w-60 absolute left-[200px] bottom-0" />
-      <Cactus className="w-32 absolute bottom-0 left-1/2 transform -translate-x-1/2" />
-      <Horseman className="w-56 absolute bottom-0 left-1/2 transform translate-x-[200px]" />
+      <Cactus className="w-60 fixed left-[200px] bottom-0" />
+      <Cactus className="w-32 fixed bottom-0 left-1/2 transform -translate-x-1/2" />
+      <Horseman className="w-56 fixed bottom-0 left-1/2 transform translate-x-[200px]" />
 
       <Image
         height={120}
         width={120}
         src={RainbowImage.src}
         alt="rainbow picture"
-        className="absolute top-[-58px] left-[365px] rotate-[90deg]"
+        className="fixed top-[-58px] left-[365px] rotate-[90deg]"
       />
-      <Shuriken className="w-[150px] text-[#FFEEDD] absolute top-8 right-12" />
-      <Shuriken className="w-[104px] text-[#FFEEDD] absolute top-0 left-[400px]" />
-      <Shuriken className="w-16 text-[#FFEEDD] right-[168px] absolute top-1/2 transform -translate-y-1/2" />
+      <Shuriken className="w-[150px] text-[#FFEEDD] fixed top-8 right-12" />
+      <Shuriken className="w-[104px] text-[#FFEEDD] fixed top-0 left-[400px]" />
+      <Shuriken className="w-16 text-[#FFEEDD] right-[168px] fixed top-1/2 transform -translate-y-1/2" />
 
       <div className="flex flex-col container mx-auto pt-8 items-start">
         <span className="font-deltarune text-branding text-stroke text-3xl">
@@ -202,14 +226,14 @@ const NashvillePage: React.FC<{ onPageChange: Function }> = ({
         height={400}
         src={NashvilleBtcImage.src}
         alt="btc picture"
-        className="absolute left-0 bottom-0"
+        className="fixed left-0 bottom-0"
       />
       <Image
         height={560}
         width={300}
         src={Cowboy.src}
         alt="cowboy.gif"
-        className="absolute bottom-[-100px] left-0"
+        className="fixed bottom-[-100px] left-0"
       />
     </div>
     <div className="ml-72 mr-[20vw] flex flex-col items-start gap-1">
@@ -264,7 +288,7 @@ const NashvillePage: React.FC<{ onPageChange: Function }> = ({
         </a>
       </div>
     </div>
-    <div className="px-10 w-full flex absolute top-1/2 left-1/2 transform -translate-x-1/2 translate-y-4">
+    <div className="px-10 w-full flex fixed top-1/2 left-1/2 transform -translate-x-1/2 translate-y-4">
       <button
         className="btn-pixel bg-[#A3FFCD] text-[#FF00A8] ml-auto"
         onClick={() => onPageChange(Page.Home)}
@@ -281,24 +305,24 @@ const BrusselsPage: React.FC<{ onPageChange: Function }> = ({
 }) => (
   <div className="w-screen h-screen bg-secondary">
     <>
-      <City className="w-96 absolute bottom-0 left-1/2 transform -translate-x-full" />
-      <City className="w-96 absolute bottom-0 left-1/2 transform translate-x-[5%] scale-x-[-1]" />
+      <City className="w-96 fixed bottom-0 left-1/2 transform -translate-x-full" />
+      <City className="w-96 fixed bottom-0 left-1/2 transform translate-x-[5%] scale-x-[-1]" />
 
-      <Chocolate className="w-24 rotate-[32deg] absolute top-16 left-[16vw]" />
+      <Chocolate className="w-24 rotate-[32deg] fixed top-16 left-[16vw]" />
 
       <Image
         height={500}
         width={400}
         src={BrusselsBtcImage.src}
         alt="btc picture"
-        className="absolute bottom-0 right-0"
+        className="fixed bottom-0 right-0"
       />
       <Image
         height={560}
         width={300}
         src={Brussels.src}
         alt="brussels.gif"
-        className="absolute bottom-[-60px] right-0"
+        className="fixed bottom-[-60px] right-0"
       />
     </>
     <div className="relative ml-[30vw] pt-10">
@@ -307,9 +331,9 @@ const BrusselsPage: React.FC<{ onPageChange: Function }> = ({
         width={180}
         src={RainbowImage.src}
         alt="rainbow picture"
-        className="absolute top-[-100px] left-[648px]"
+        className="fixed top-[-100px] left-[648px]"
       />
-      <Chocolate className="w-32 absolute top-4 left-[630px]" />
+      <Chocolate className="w-32 fixed top-4 left-[630px]" />
       <div className="flex flex-col items-start mb-10">
         <span className="font-deltarune text-branding text-stroke text-3xl mb-[-40px] ml-[340px]">
           Friends of Bitcoin
@@ -325,7 +349,7 @@ const BrusselsPage: React.FC<{ onPageChange: Function }> = ({
             Overview
           </div>
           <div className="font-arbutus">Half day event with a party 💫</div>
-          <Chocolate className="w-20 rotate-[135deg] absolute top-[-10px] right-[-100px]" />
+          <Chocolate className="w-20 rotate-[135deg] fixed top-[-10px] right-[-100px]" />
         </div>
         <div className="relative z-10 px-7 py-4 bg-black rounded-[44px] text-white">
           <div className="font-deltarune text-secondary text-lg mb-1">
@@ -350,7 +374,7 @@ const BrusselsPage: React.FC<{ onPageChange: Function }> = ({
             <p className="text-xs text-[#4CDFFF]">Agenda coming soon.</p>
           </div>
 
-          <Chocolate className="w-20 rotate-[-124deg] absolute top-[20px] right-[-44px]" />
+          <Chocolate className="w-20 rotate-[-124deg] fixed top-[20px] right-[-44px]" />
         </div>
         <div className="flex items-start gap-4">
           <div className="z-10 px-7 py-4 bg-black rounded-[44px] text-white">
@@ -380,7 +404,7 @@ const BrusselsPage: React.FC<{ onPageChange: Function }> = ({
       </div>
     </div>
 
-    <div className="px-10 w-full flex absolute top-1/2 left-1/2 transform -translate-x-1/2 translate-y-4">
+    <div className="px-10 w-full flex fixed top-1/2 left-1/2 transform -translate-x-1/2 translate-y-4">
       <button
         className="btn-pixel bg-[#FF00E5] text-[#00FFD1] "
         onClick={() => onPageChange(Page.Home)}