mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00: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
113
index.html
113
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,9 +112,9 @@
|
|||
</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">
|
||||
<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>
|
||||
|
|
@ -121,14 +123,16 @@
|
|||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Social Media Links -->
|
||||
<div class="flex flex-col w-[416px] gap-4">
|
||||
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-blue">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue