From d06008f690ff8afa8610114ad8707a5fd9014695 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 15 Sep 2024 16:01:41 +0500
Subject: [PATCH] feat: add collection and friend section links

---
 index.html          | 79 +++++++++++++++++++++++++++++++++++----------
 static/tailwind.css | 16 +++++++++
 2 files changed, 78 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 3812fa5..60112ed 100644
--- a/index.html
+++ b/index.html
@@ -87,7 +87,8 @@
             <!-- Photo Links -->
             <div class="flex flex-col w-[416px] gap-4">
                 <div class="relative w-[416px] h-[376px] flex justify-end items-end">
-                    <img class="absolute inset-0 w-[416px] h-[376px] object-cover -z-10" alt="" src="./static/assets/photos_section_image.png"/>
+                    <img class="absolute inset-0 w-[416px] h-[376px] object-cover -z-10" alt=""
+                        src="./static/assets/photos_section_image.png" />
                     <p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
                 </div>
                 <div class="flex gap-4">
@@ -171,37 +172,47 @@
                 </div>
                 <a href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
                     <div class="relative w-[416px] h-[180px] flex items-end px-2 py-4">
-                        <img class="absolute [filter:darken(10%)] inset-0 w-[416px] h-[180px] object-cover -z-10" alt="" src="./static/assets/ANIX.png"/>
+                        <img class="absolute [filter:darken(10%)] inset-0 w-[416px] h-[180px] object-cover -z-10" alt=""
+                            src="./static/assets/ANIX.png" />
                         <div class="flex flex-col gap-1">
                             <p class="font-medium text-[24px] leading-[1]">Anix</p>
-                            <p class="font-light text-[14px] leading-[1]">Unofficial web client for Anixart android app, made in Next.JS</p>
+                            <p class="font-light text-[14px] leading-[1]">Unofficial web client for Anixart android app,
+                                made in Next.JS</p>
                         </div>
                     </div>
                 </a>
                 <div class="flex flex-wrap gap-4">
                     <a href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
-                        <div class="bg-[#0E1621] text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
-                            <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]" alt="" src="./static/assets/TG_Photos.png"/>
+                        <div
+                            class="bg-[#0E1621] text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
+                            <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]"
+                                alt="" src="./static/assets/TG_Photos.png" />
                             <div class="flex flex-col justify-end h-full gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">TG-Photos</p>
-                                <p class="font-light text-[14px] leading-[1]">Telegram bot to use telegram as a Google Photo alternative</p>
+                                <p class="font-light text-[14px] leading-[1]">Telegram bot to use telegram as a Google
+                                    Photo alternative</p>
                             </div>
                         </div>
                     </a>
                     <a href="https://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin">
-                        <div class="bg-[#F5F5F5] text-black w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
-                            <img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[200px] object-cover" alt="" src="./static/assets/WordGen.png"/>
+                        <div
+                            class="bg-[#F5F5F5] text-black w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
+                            <img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[200px] object-cover"
+                                alt="" src="./static/assets/WordGen.png" />
                             <div class="flex flex-col justify-end h-full gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">WordGen</p>
-                                <p class="font-light text-[14px] leading-[1]">Random word generator inspired by @tsoding</p>
+                                <p class="font-light text-[14px] leading-[1]">Random word generator inspired by @tsoding
+                                </p>
                             </div>
                         </div>
                     </a>
                     <a href="https://github.com/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin">
-                        <div class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
+                        <div
+                            class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
                             <div class="flex flex-col justify-end h-full gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">furaffinity-dl</p>
-                                <p class="font-light text-[14px] leading-[1]">Modification of the original project to add more functionality</p>
+                                <p class="font-light text-[14px] leading-[1]">Modification of the original project to
+                                    add more functionality</p>
                             </div>
                         </div>
                     </a>
@@ -217,7 +228,7 @@
                 </div>
             </div>
             <!-- Contact and Friends links Links -->
-            <div class="flex flex-col w-[416px] gap-8">
+            <div class="flex flex-col w-[416px] gap-4">
                 <!-- Contact Links -->
                 <div class="flex flex-col gap-4">
                     <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-pink">
@@ -225,7 +236,7 @@
                     </div>
                     <div class="flex flex-wrap gap-4">
                         <a href="https://t.me/radiquum" target="_blank" referrerpolicy="origin">
-                            <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center">
+                            <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center">
                                 <img class="w-10 h-10" alt="" src="./static/assets/Telegram.png" />
                                 <div class="flex flex-col gap-1">
                                     <p class="font-medium text-[24px] leading-[1]">Telegram</p>
@@ -234,7 +245,7 @@
                             </div>
                         </a>
                         <a href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
-                            <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center">
+                            <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center">
                                 <img class="w-10 h-10" alt="" src="./static/assets/matrix-favicon.svg" />
                                 <div class="flex flex-col gap-1">
                                     <p class="font-medium text-[24px] leading-[1]">Matrix</p>
@@ -243,7 +254,7 @@
                             </div>
                         </a>
                         <a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
-                            <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center">
+                            <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center">
                                 <img class="w-10 h-10" alt="" src="./static/assets/VKLogo.png" />
                                 <div class="flex flex-col gap-1">
                                     <p class="font-medium text-[24px] leading-[1]">VK</p>
@@ -251,7 +262,7 @@
                                 </div>
                             </div>
                         </a>
-                        <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center">
+                        <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center">
                             <img class="w-10" alt="" src="./static/assets/discord-mark-blue.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Discord</p>
@@ -263,7 +274,41 @@
                 <!-- Friends Links -->
                 <div class="flex flex-col gap-4">
                     <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
-                        <p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
+                        <p class="font-bold text-[40px] leading-[1] p-[8px] text-right">COLLECTIONS & FRIENDS</p>
+                    </div>
+                    <div class="flex flex-wrap gap-4">
+                        <a href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
+                            <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end">
+                                <div class="flex flex-col gap-1">
+                                    <p class="font-medium text-[18px] leading-[1]">Red Pandas Stickers</p>
+                                    <p class="font-light text-[14px] leading-[1]">Telegram channel with red panda sticker packs</p>
+                                </div>
+                            </div>
+                        </a>
+                        <a href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
+                            <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end">
+                                <div class="flex flex-col gap-1">
+                                    <p class="font-medium text-[18px] leading-[1]">Red Panda Images</p>
+                                    <p class="font-light text-[14px] leading-[1]">Collection with 3000+ Photos and Videos of a red pandas</p>
+                                </div>
+                            </div>
+                        </a>
+                        <a href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
+                            <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end">
+                                <div class="flex flex-col gap-1">
+                                    <p class="font-medium text-[18px] leading-[1]">blep stash</p>
+                                    <p class="font-light text-[14px] leading-[1]">VK Group of a photographer. City and Trains photography</p>
+                                </div>
+                            </div>
+                        </a>
+                        <a href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
+                            <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end">
+                                <div class="flex flex-col gap-1">
+                                    <p class="font-medium text-[18px] leading-[1]">itc1205</p>
+                                    <p class="font-light text-[14px] leading-[1]">Github profile of another furry programmer</p>
+                                </div>
+                            </div>
+                        </a>
                     </div>
                 </div>
             </div>
diff --git a/static/tailwind.css b/static/tailwind.css
index df0a575..7b78d04 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -838,6 +838,14 @@ video {
   height: 2rem;
 }
 
+.h-\[81px\] {
+  height: 81px;
+}
+
+.h-\[82px\] {
+  height: 82px;
+}
+
 .max-h-\[40vh\] {
   max-height: 40vh;
 }
@@ -1203,6 +1211,10 @@ video {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1256,6 +1268,10 @@ video {
   font-size: 12px;
 }
 
+.text-\[18px\] {
+  font-size: 18px;
+}
+
 .font-bold {
   font-weight: 700;
 }