From 3aadccd58eea3e7100e07cd8593186d912df869c Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 15 Sep 2024 22:31:40 +0500
Subject: [PATCH] refactor: update container size

---
 index.html          |  14 +-
 static/tailwind.css | 470 +++++++++++++-------------------------------
 tailwind.config.js  |  10 +
 3 files changed, 153 insertions(+), 341 deletions(-)

diff --git a/index.html b/index.html
index 48594d0..e71d658 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,8 @@
             </div>
         </div>
     </header>
-    <div class="h-screen" id="section_landing">
-        <div class="container mx-auto text-white h-full max-h-[60vh] relative">
+    <div class="container h-screen" id="section_landing">
+        <div class="text-white h-full max-h-[60vh] relative">
             <div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[45.25%] absolute top-0 right-0 -z-10"></div>
             <div class="flex items-center justify-center gap-12 px-8 py-8">
                 <img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
@@ -36,7 +36,7 @@
                 </div>
             </div>
         </div>
-        <div class="container flex mx-auto text-white h-full max-h-[40vh]">
+        <div class="flex text-white h-full max-h-[40vh]">
             <div class="max-w-[54.75%] bg-bg-gray py-4 w-full h-full">
                 <div class="flex items-center justify-between gap-2 px-4">
                     <img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
@@ -64,7 +64,7 @@
             </div>
         </div>
     </div>
-    <div class="container mx-auto text-white scroll-mt-40" id="section_about">
+    <div class="container py-10 text-white scroll-mt-10" id="section_about">
         <h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1>
         <div class="flex flex-col gap-8 text-2xl font-light max-w-[1200px] mx-auto justify-center">
             <p>Hi! I'm Kentai Radiquum 🐾, a tech enthusiast with a passion for software development. I love
@@ -81,9 +81,9 @@
             <p>Feel free to reach out anytime! I will be happy to chat.</p>
         </div>
     </div>
-    <div class="flex flex-col items-center justify-center p-8 mt-16 text-white scroll-mt-24" id="section_links">
-        <h1 class="mx-auto mb-12 text-6xl font-bold w-fit">LINKS</h1>
-        <div class="flex items-start justify-center gap-8">
+    <div class="container py-16 text-white scroll-mt-12" id="section_links">
+        <h1 class="mb-12 text-6xl font-bold text-center">LINKS</h1>
+        <div class="flex flex-wrap gap-8 w-fit">
             <!-- Photo Links -->
             <div class="flex flex-col w-[416px] gap-4">
                 <div class="relative w-[416px] h-[376px] flex justify-end items-end">
diff --git a/static/tailwind.css b/static/tailwind.css
index 7baa0e0..d8a3f31 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -556,6 +556,8 @@ video {
 
 .container {
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 @media (min-width: 640px) {
@@ -582,9 +584,9 @@ video {
   }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: 1760px) {
   .container {
-    max-width: 1536px;
+    max-width: 1760px;
   }
 }
 
@@ -604,6 +606,10 @@ video {
   inset: 0px;
 }
 
+.bottom-\[50\%\] {
+  bottom: 50%;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -612,28 +618,12 @@ video {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
-.bottom-\[50\%\] {
-  bottom: 50%;
-}
-
-.right-\[25\%\] {
-  right: 25%;
-}
-
-.right-\[20\%\] {
-  right: 20%;
-}
-
 .right-\[15\%\] {
   right: 15%;
 }
 
-.bottom-\[35\%\] {
-  bottom: 35%;
+.top-0 {
+  top: 0px;
 }
 
 .-z-10 {
@@ -654,24 +644,9 @@ video {
   margin-bottom: 1rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.mx-8 {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .mb-12 {
@@ -694,36 +669,32 @@ video {
   margin-top: 4rem;
 }
 
-.mt-20 {
-  margin-top: 5rem;
-}
-
-.mt-32 {
-  margin-top: 8rem;
-}
-
-.mt-14 {
-  margin-top: 3.5rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .flex {
   display: flex;
 }
 
-.aspect-\[342\/288\] {
-  aspect-ratio: 342/288;
+.h-10 {
+  height: 2.5rem;
 }
 
-.aspect-\[1\/1\] {
-  aspect-ratio: 1/1;
+.h-14 {
+  height: 3.5rem;
 }
 
-.aspect-\[167\/53\] {
-  aspect-ratio: 167/53;
+.h-20 {
+  height: 5rem;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[180px\] {
+  height: 180px;
+}
+
+.h-\[376px\] {
+  height: 376px;
 }
 
 .h-\[37px\] {
@@ -734,6 +705,10 @@ video {
   height: 75px;
 }
 
+.h-\[81px\] {
+  height: 81px;
+}
+
 .h-full {
   height: 100%;
 }
@@ -742,114 +717,6 @@ video {
   height: 100vh;
 }
 
-.h-\[288px\] {
-  height: 288px;
-}
-
-.h-\[139px\] {
-  height: 139px;
-}
-
-.h-\[142px\] {
-  height: 142px;
-}
-
-.h-\[146px\] {
-  height: 146px;
-}
-
-.h-\[150px\] {
-  height: 150px;
-}
-
-.h-\[296px\] {
-  height: 296px;
-}
-
-.h-\[304px\] {
-  height: 304px;
-}
-
-.h-24 {
-  height: 6rem;
-}
-
-.h-20 {
-  height: 5rem;
-}
-
-.h-16 {
-  height: 4rem;
-}
-
-.h-14 {
-  height: 3.5rem;
-}
-
-.h-\[180px\] {
-  height: 180px;
-}
-
-.h-\[416px\] {
-  height: 416px;
-}
-
-.h-\[376px\] {
-  height: 376px;
-}
-
-.h-\[115px\] {
-  height: 115px;
-}
-
-.h-\[125px\] {
-  height: 125px;
-}
-
-.h-\[100px\] {
-  height: 100px;
-}
-
-.h-\[55px\] {
-  height: 55px;
-}
-
-.h-\[67px\] {
-  height: 67px;
-}
-
-.h-\[70px\] {
-  height: 70px;
-}
-
-.h-\[80px\] {
-  height: 80px;
-}
-
-.h-\[70\] {
-  height: 70;
-}
-
-.h-\[90px\] {
-  height: 90px;
-}
-
-.h-10 {
-  height: 2.5rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.h-\[81px\] {
-  height: 81px;
-}
-
-.h-\[82px\] {
-  height: 82px;
-}
-
 .max-h-\[40vh\] {
   max-height: 40vh;
 }
@@ -862,6 +729,30 @@ video {
   max-height: 60vh;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-\[173px\] {
+  width: 173px;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
 .w-\[256px\] {
   width: 256px;
 }
@@ -878,109 +769,21 @@ video {
   width: 320px;
 }
 
-.w-\[64px\] {
-  width: 64px;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-\[342px\] {
-  width: 342px;
-}
-
-.w-\[167px\] {
-  width: 167px;
-}
-
-.w-\[170px\] {
-  width: 170px;
-}
-
-.w-\[350px\] {
-  width: 350px;
-}
-
-.w-\[356px\] {
-  width: 356px;
-}
-
-.w-24 {
-  width: 6rem;
-}
-
-.w-20 {
-  width: 5rem;
-}
-
-.w-\[180px\] {
-  width: 180px;
-}
-
-.w-\[190px\] {
-  width: 190px;
-}
-
-.w-\[200px\] {
-  width: 200px;
-}
-
-.w-\[210px\] {
-  width: 210px;
-}
-
-.w-\[220px\] {
-  width: 220px;
-}
-
-.w-\[2000px\] {
-  width: 2000px;
-}
-
-.w-16 {
-  width: 4rem;
-}
-
-.w-14 {
-  width: 3.5rem;
-}
-
-.w-\[386px\] {
-  width: 386px;
-}
-
-.w-\[390px\] {
-  width: 390px;
-}
-
-.w-\[400px\] {
-  width: 400px;
-}
-
 .w-\[416px\] {
   width: 416px;
 }
 
+.w-\[64px\] {
+  width: 64px;
+}
+
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.w-\[173px\] {
-  width: 173px;
-}
-
-.w-\[163px\] {
-  width: 163px;
-}
-
-.w-10 {
-  width: 2.5rem;
-}
-
-.w-12 {
-  width: 3rem;
+.w-full {
+  width: 100%;
 }
 
 .max-w-\[1200px\] {
@@ -999,24 +802,28 @@ video {
   max-width: 54.75%;
 }
 
-.flex-1 {
-  flex: 1 1 0%;
-}
-
-.scroll-mt-32 {
-  scroll-margin-top: 8rem;
-}
-
-.scroll-mt-20 {
-  scroll-margin-top: 5rem;
+.scroll-mt-24 {
+  scroll-margin-top: 6rem;
 }
 
 .scroll-mt-40 {
   scroll-margin-top: 10rem;
 }
 
-.scroll-mt-24 {
-  scroll-margin-top: 6rem;
+.scroll-mt-16 {
+  scroll-margin-top: 4rem;
+}
+
+.scroll-mt-12 {
+  scroll-margin-top: 3rem;
+}
+
+.scroll-mt-8 {
+  scroll-margin-top: 2rem;
+}
+
+.scroll-mt-10 {
+  scroll-margin-top: 2.5rem;
 }
 
 .flex-col {
@@ -1027,10 +834,6 @@ video {
   flex-wrap: wrap;
 }
 
-.items-start {
-  align-items: flex-start;
-}
-
 .items-end {
   align-items: flex-end;
 }
@@ -1108,6 +911,16 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.bg-\[\#0E1621\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 22 33 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#F5F5F5\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
 .bg-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(30 30 30 / var(--tw-bg-opacity));
@@ -1128,24 +941,14 @@ video {
   background-color: rgb(255 71 139 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#0E1621\] {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(14 22 33 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#F5F5F5\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .object-cover {
@@ -1153,24 +956,21 @@ video {
      object-fit: cover;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .p-\[8px\] {
   padding: 8px;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
-.p-4 {
-  padding: 1rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .px-4 {
@@ -1198,9 +998,19 @@ video {
   padding-bottom: 2rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 
 .pb-2 {
@@ -1211,6 +1021,14 @@ video {
   padding-right: 0.5rem;
 }
 
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1239,41 +1057,25 @@ video {
   line-height: 1;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.text-\[14px\] {
+  font-size: 14px;
 }
 
-.text-\[40px\] {
-  font-size: 40px;
-}
-
-.text-\[20px\] {
-  font-size: 20px;
-}
-
-.text-\[10px\] {
-  font-size: 10px;
-}
-
-.text-\[16px\] {
-  font-size: 16px;
+.text-\[18px\] {
+  font-size: 18px;
 }
 
 .text-\[24px\] {
   font-size: 24px;
 }
 
-.text-\[14px\] {
-  font-size: 14px;
+.text-\[40px\] {
+  font-size: 40px;
 }
 
-.text-\[12px\] {
-  font-size: 12px;
-}
-
-.text-\[18px\] {
-  font-size: 18px;
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
 .font-bold {
@@ -1301,16 +1103,16 @@ video {
   color: rgb(255 71 139 / var(--tw-text-opacity));
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .opacity-\[var\(--header-opacity\2c 0\)\] {
   opacity: var(--header-opacity,0);
 }
@@ -1453,7 +1255,7 @@ body {
   }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: 1760px) {
   .\32xl\:w-\[512px\] {
     width: 512px;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 810618c..633e4a3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,16 @@ module.exports = {
         'bg-black': '#1E1E1E',
         'bg-gray': '#484848'
       },
+      screens: {
+        // 'sm': '640px',
+        // 'md': '768px',
+        // 'lg': '1024px',
+        // 'xl': '1280px',
+        '2xl': '1760px',
+      },
+      container: {
+        center: true,
+      },
     },
   },
   plugins: [],