From abeb0da131edc7272e37bb0c3062e02d7fc2cd4f Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Mon, 23 Sep 2024 14:24:16 +0500
Subject: [PATCH] feat: add Skills card

---
 index.html          | 69 +++++++++++++++++++++++++++++++++++++++------
 static/tailwind.css | 52 ++++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 34b437c..9505f74 100644
--- a/index.html
+++ b/index.html
@@ -90,12 +90,63 @@
     <div class="container min-h-screen px-2 py-6 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="section_about">
         <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
         <div class="flex flex-wrap gap-4 mx-auto sm:justify-center w-fit">
-            <div class="flex flex-col w-[344px] sm:w-[416px]">
-                <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
-                    <p class="font-bold text-3xl sm:text-4xl p-[8px]">Tech enthusiast</p>
+            <div class="flex flex-col gap-4 w-fit">
+                <div class="flex flex-col w-[344px] sm:w-[416px]">
+                    <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
+                        <p class="font-bold text-3xl sm:text-4xl p-[8px]">Tech enthusiast</p>
+                    </div>
+                    <div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
+                        <p class="text-xl font-light sm:text-2xl">I'm a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p>
+                    </div>
                 </div>
-                <div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
-                    <p class="text-xl font-light sm:text-2xl">I'm a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p>
+                <div class="flex flex-col w-[344px] sm:w-[416px]">
+                    <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-green-500">
+                        <p class="font-bold text-3xl sm:text-4xl p-[8px]">Skills</p>
+                    </div>
+                    <div class="relative w-[344px] sm:w-[416px] p-[16px] flex flex-col gap-2 justify-center bg-green-500 bg-opacity-50 ">
+                        <div>
+                            <p class="text-xl font-bold sm:text-2xl">Front-end development</p>
+                            <ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
+                                <li>HTML</li>
+                                <li>CSS</li>
+                                <li>JS/TS</li>
+                                <li>Next.js</li>
+                                <li>Flask</li>
+                                <li>Django</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <p class="text-xl font-bold sm:text-2xl">Back-end development</p>
+                            <ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
+                                <li>Python</li>
+                                <li>Node.js</li>
+                                <li>FastAPI</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <p class="text-xl font-bold sm:text-2xl">API</p>
+                            <ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
+                                <li>Postman/Hoppscotch</li>
+                                <li>mitmproxy</li>
+                                <li>HTTP Toolkit</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <p class="text-xl font-bold sm:text-2xl">Collaboration</p>
+                            <ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
+                                <li>Git</li>
+                                <li>Github</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <p class="text-xl font-bold sm:text-2xl">Deployment</p>
+                            <ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
+                                <li>Docker</li>
+                                <li>Docker-compose</li>
+                                <li>Vercel</li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="flex flex-col gap-4 w-fit">
@@ -108,15 +159,15 @@
                     </div>
                 </div>
                 <div class="flex flex-col w-[344px] sm:w-[416px]">
-                    <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-green-500">
+                    <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-yellow-500">
                         <p class="font-bold text-3xl sm:text-4xl p-[8px]">Photographer</p>
                     </div>
-                    <div class="relative w-[344px] sm:w-[416px] p-[16px] flex justify-center bg-green-500 bg-opacity-50">
+                    <div class="relative w-[344px] sm:w-[416px] p-[16px] flex justify-center bg-yellow-500 bg-opacity-40">
                         <p class="text-xl font-light sm:text-2xl">I’m also getting into <a class="text-bg-pink hover:underline" href="https://wah.su/photos" target="_blank" referrerpolicy="origin">photography</a> and excited to share my progress.</p>
                     </div>
                 </div>
             </div>
-            <div class="flex flex-col w-[344px] sm:w-[416px] xl:-mt-[248px] 2xl:-mt-0">
+            <div class="flex flex-col w-[344px] sm:w-[416px]">
                 <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-orange-600">
                     <p class="font-bold text-3xl sm:text-4xl p-[8px]">Red Pandas admirer</p>
                 </div>
@@ -124,7 +175,7 @@
                     <p class="text-xl font-light sm:text-2xl">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 <a class="text-bg-pink hover:underline" href="https://t.me/red_panda_stickers"target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, I’ve curated a <a class="text-bg-pink hover:underline" href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and videos.</p>
                 </div>
             </div>
-            <div class="flex flex-col gap-4 w-fit">
+            <div class="flex flex-col gap-4 w-fit lg:-mt-[296px] 2xl:-mt-0">
                 <div class="flex flex-col w-[344px] sm:w-[416px]">
                     <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-pink">
                         <p class="font-bold text-3xl sm:text-4xl p-[8px]">Music</p>
diff --git a/static/tailwind.css b/static/tailwind.css
index 9934475..d996e90 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -913,6 +913,15 @@ video {
   gap: 2rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1013,10 +1022,24 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
 
+.bg-opacity-40 {
+  --tw-bg-opacity: 0.4;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1472,6 +1495,11 @@ body {
     line-height: 1.75rem;
   }
 
+  .sm\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .sm\:hover\:-translate-y-2:hover {
     --tw-translate-y: -0.5rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1536,6 +1564,22 @@ body {
     margin-top: -248px;
   }
 
+  .xl\:-mt-\[232px\] {
+    margin-top: -232px;
+  }
+
+  .xl\:-mt-\[234px\] {
+    margin-top: -234px;
+  }
+
+  .xl\:-mt-\[252px\] {
+    margin-top: -252px;
+  }
+
+  .xl\:-mt-\[312px\] {
+    margin-top: -312px;
+  }
+
   .xl\:max-h-\[40vh\] {
     max-height: 40vh;
   }
@@ -1598,6 +1642,14 @@ body {
     margin-top: 7rem;
   }
 
+  .lg\:-mt-\[312px\] {
+    margin-top: -312px;
+  }
+
+  .lg\:-mt-\[296px\] {
+    margin-top: -296px;
+  }
+
   .lg\:max-h-\[45vh\] {
     max-height: 45vh;
   }