mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-05-08 13:59:34 +05:00
feat: add hover animation for links
This commit is contained in:
parent
4f352eb88a
commit
7c4d6120fb
GPG key ID:
858E8EE696525EED
2 changed files with 161 additions and 51 deletions
125
index.html
125
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue