feat: add about me section

index.html

@@ -47,12 +47,26 @@
             </div>
             <div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
                 <a class="w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#section_about">READ MORE</a>
-                <a class="w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#">LINKS</a>
+                <a class="w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#section_links">LINKS</a>
             </div>
         </div>
     </div>
-    <div class="h-screen" id="section_about">
+    <div class="container h-screen mx-auto text-white scroll-mt-32" 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 class="">Hi! I'm Kentai Radiquum 🐾, a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p>
+            <p class="">I’m also getting into photography and excited to share my progress 📸. I will be glad if you will check them out and leave a feedback! </p>
+            <p class="">One of my biggest loves is red pandas — I can’t get enough of them! I’ve been collecting red panda stickers and sharing them on the Red Panda Stickers Telegram channel. Plus, I’ve curated a collection of over 3000 red panda photos and videos, available at wahs.wah.su.</p>
+            <p class="">I'm really into self-hosting through my wah.su project, which helps me dive into server management and hosting platforms.</p>
+            <p class="">I listen a lot of various music, but mainly listen to EDM \ Happy Hardcore \ Tech \ Rock \ Alternative.<br/>By artist like: S3RL, Camellia, t+pazolite, BTMH, Saint Motel, and more...</p>
+            <p class="">Feel free to reach out anytime! I will be happy to chat.</p>
+        </div>
+    </div>
+    <div class="container h-screen mx-auto text-white scroll-mt-32" id="section_links">
+        <h1 class="mt-16 mb-12 text-6xl font-bold text-center">LINKS</h1>
+        <div class="flex flex-col gap-8 text-2xl font-light max-w-[1200px] mx-auto justify-center">
             
+        </div>
     </div>
     <script src="./static/script.js"></script>
 </body>

static/script.js

@@ -38,16 +38,16 @@ window.onscroll = () => {
   let scrollPosition = getScrollPosition()
   console.log(last_Y_pos, window.scrollY, scrollPosition, header_opacity)
 
-  if (scrollPosition < 20) {
+  if (scrollPosition < 1) {
     header.style.display = "none"
   } else {
     header.style.display = "block"
   }
 
 
-  if ((window.scrollY > last_Y_pos) && (scrollPosition > 40)) {
+  if ((window.scrollY > last_Y_pos) && (scrollPosition > 1)) {
     header_opacity += 0.1
-  } else if ((window.scrollY < last_Y_pos) && (scrollPosition < 40)) (
+  } else if ((window.scrollY < last_Y_pos) && (scrollPosition < 1)) (
     header_opacity -= 0.1
   )
   last_Y_pos = window.scrollY

static/tailwind.css

@@ -634,6 +634,16 @@ video {
   margin-bottom: 1rem;
 }
 
+.my-24 {
+  margin-top: 6rem;
+  margin-bottom: 6rem;
+}
+
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .mb-\[3\%\] {
   margin-bottom: 3%;
 }
@@ -646,6 +656,14 @@ video {
   margin-left: 2rem;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .flex {
   display: flex;
 }
@@ -714,6 +732,26 @@ video {
   max-width: 54.75%;
 }
 
+.max-w-\[1200px\] {
+  max-width: 1200px;
+}
+
+.scroll-mt-24 {
+  scroll-margin-top: 6rem;
+}
+
+.scroll-mt-1 {
+  scroll-margin-top: 0.25rem;
+}
+
+.scroll-mt-32 {
+  scroll-margin-top: 8rem;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -746,6 +784,10 @@ video {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -811,6 +853,10 @@ video {
   padding-right: 0.5rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -831,6 +877,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -839,6 +890,14 @@ video {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
 .text-bg-pink {
   --tw-text-opacity: 1;
   color: rgb(255 71 139 / var(--tw-text-opacity));