From 7c4d6120fb40e65d3f8134e6d723ba1f82dbd6bc Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 15 Sep 2024 23:04:07 +0500
Subject: [PATCH] feat: add hover animation for links

---
 index.html          | 125 ++++++++++++++++++++++++++------------------
 static/tailwind.css |  87 ++++++++++++++++++++++++++++++
 2 files changed, 161 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index 900ff51..dcd8d0d 100644
--- a/index.html
+++ b/index.html
@@ -87,13 +87,14 @@
             <!-- 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=""
+                    <img class="absolute inset-0 object-cover w-full h-full -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">
-                    <a href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                <div class="flex flex-wrap gap-4">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
                             <img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">pixey.org</p>
@@ -101,8 +102,9 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
                             <img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">instafops.net</p>
@@ -110,16 +112,17 @@
                             </div>
                         </div>
                     </a>
-                </div>
-                <a href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
-                    <div class="bg-white text-black w-[416px] h-[180px] p-2 flex justify-around items-center">
-                        <img class="w-20 h-20" alt="" src="./static/assets/immich.png" />
-                        <div class="flex flex-col gap-1">
-                            <p class="font-medium text-[24px] leading-[1]">wah.su/photos</p>
-                            <p class="font-light text-[14px] leading-[1]">View gallery like in google photos</p>
+                    <a class="hover:border-bg-blue w-[416px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
+                        <div class="flex items-center justify-around w-full h-full p-2 text-black bg-white -z-10">
+                            <img class="w-20 h-20" alt="" src="./static/assets/immich.png" />
+                            <div class="flex flex-col gap-1">
+                                <p class="font-medium text-[24px] leading-[1]">wah.su/photos</p>
+                                <p class="font-light text-[14px] leading-[1]">View gallery like in google photos</p>
+                            </div>
                         </div>
-                    </div>
-                </a>
+                    </a>
+                </div>
             </div>
             <!-- Social Media Links -->
             <div class="flex flex-col w-[416px] gap-4">
@@ -127,8 +130,9 @@
                     <p class="font-bold text-[40px] leading-[1] p-[8px]">SOCIAL MEDIA</p>
                 </div>
                 <div class="flex flex-wrap gap-4">
-                    <a href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--mastodon-icon.svg" />
                             <div class="flex flex-col justify-end gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Mastodon</p>
@@ -136,8 +140,9 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
                             <img class="w-16 mx-auto h-14" alt="" src="./static/assets/Bluesky_Logo.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Bluesky</p>
@@ -145,8 +150,9 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--twitter.svg" />
                             <div class="flex flex-col justify-end gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Twitter</p>
@@ -154,8 +160,9 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/VKLogo.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">VKontakte</p>
@@ -170,8 +177,9 @@
                 <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>
                 </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">
+                <a class="hover:border-bg-blue w-[416px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                    href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
+                    <div class="relative flex items-end w-full h-full 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" />
                         <div class="flex flex-col gap-1">
@@ -182,9 +190,10 @@
                     </div>
                 </a>
                 <div class="flex flex-wrap gap-4">
-                    <a href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        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">
+                            class="bg-[#0E1621] text-white w-full h-full 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">
@@ -194,9 +203,10 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        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">
+                            class="bg-[#F5F5F5] text-black w-full h-full 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">
@@ -206,9 +216,10 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://github.com/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        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">
+                            class="relative flex flex-col justify-around w-full h-full p-2 overflow-hidden text-white bg-black">
                             <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
@@ -216,8 +227,9 @@
                             </div>
                         </div>
                     </a>
-                    <a href="https://github.com/Radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                    <a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
+                        href="https://github.com/Radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-2 text-white bg-black">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/github-mark-white.png" />
                             <div class="flex flex-col justify-end gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Github</p>
@@ -235,8 +247,9 @@
                         <p class="font-bold text-[40px] leading-[1] p-[8px]">CONTACT</p>
                     </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-[81px] px-4 py-2 flex gap-2 items-center">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://t.me/radiquum" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
                                 <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>
@@ -244,8 +257,9 @@
                                 </div>
                             </div>
                         </a>
-                        <a href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
-                            <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
                                 <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>
@@ -253,8 +267,9 @@
                                 </div>
                             </div>
                         </a>
-                        <a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
-                            <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
                                 <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>
@@ -277,35 +292,43 @@
                         <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">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
                                 <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>
+                                    <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">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
                                 <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>
+                                    <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">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
                                 <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>
+                                    <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">
+                        <a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
+                            href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
+                            <div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
                                 <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>
+                                    <p class="font-light text-[14px] leading-[1]">Github profile of another furry
+                                        programmer</p>
                                 </div>
                             </div>
                         </a>
diff --git a/static/tailwind.css b/static/tailwind.css
index 597d4cc..dc5ffcd 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -669,10 +669,18 @@ video {
   margin-top: 4rem;
 }
 
+.box-border {
+  box-sizing: border-box;
+}
+
 .flex {
   display: flex;
 }
 
+.aspect-\[1\.11\] {
+  aspect-ratio: 1.11;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -717,6 +725,18 @@ video {
   height: 100vh;
 }
 
+.h-\[374\] {
+  height: 374;
+}
+
+.h-\[374px\] {
+  height: 374px;
+}
+
+.h-\[375px\] {
+  height: 375px;
+}
+
 .max-h-\[40vh\] {
   max-height: 40vh;
 }
@@ -786,6 +806,30 @@ video {
   width: 100%;
 }
 
+.w-\[420px\] {
+  width: 420px;
+}
+
+.w-\[424px\] {
+  width: 424px;
+}
+
+.w-\[412px\] {
+  width: 412px;
+}
+
+.w-\[432px\] {
+  width: 432px;
+}
+
+.w-\[418px\] {
+  width: 418px;
+}
+
+.w-\[422px\] {
+  width: 422px;
+}
+
 .max-w-\[1200px\] {
   max-width: 1200px;
 }
@@ -886,6 +930,10 @@ video {
   gap: 2rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -902,6 +950,14 @@ video {
   border-width: 4px;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
 .border-l-8 {
   border-left-width: 8px;
 }
@@ -919,6 +975,10 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-\[\#0E1621\] {
   --tw-bg-opacity: 1;
   background-color: rgb(14 22 33 / var(--tw-bg-opacity));
@@ -1141,6 +1201,18 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-\[border-width\] {
+  transition-property: border-width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-\[border-color\] {
+  transition-property: border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .\[filter\:darken\(10\%\)\] {
   filter: darken(10%);
 }
@@ -1211,6 +1283,21 @@ body {
   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));
 }
 
+.hover\:border-white:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.hover\:border-bg-gray:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(72 72 72 / var(--tw-border-opacity));
+}
+
+.hover\:border-bg-blue:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(41 143 245 / var(--tw-border-opacity));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }