mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-05-08 13:59:34 +05:00
refactor: move collections & friends back to 4th column
This commit is contained in:
parent
6be363d8a3
commit
acb8dd1425
GPG key ID:
858E8EE696525EED
2 changed files with 98 additions and 196 deletions
148
index.html
148
index.html
|
|
@ -34,7 +34,8 @@
|
|||
</head>
|
||||
|
||||
<body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black">
|
||||
<header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink rounded-b-lg"
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink rounded-b-lg"
|
||||
id="header">
|
||||
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
|
||||
<a href="#landing">
|
||||
|
|
@ -53,7 +54,8 @@
|
|||
<div class="absolute w-full h-full bg-bg-pink -z-10 max-w-[50vw] right-0 top-0 max-h-[50vh] hidden md:block"></div>
|
||||
<div class="absolute w-full h-full bg-bg-gray -z-10 left-0 bottom-0 max-h-[50vh] hidden md:block">
|
||||
</div>
|
||||
<div class="container flex flex-col min-h-screen gap-2 py-8 mx-auto my-4 overflow-hidden rounded-lg sm:mt-0 bg-bg-gray md:bg-transparent md:rounded-none" id="landing">
|
||||
<div class="container flex flex-col min-h-screen gap-2 py-8 mx-auto my-4 overflow-hidden rounded-lg sm:mt-0 bg-bg-gray md:bg-transparent md:rounded-none"
|
||||
id="landing">
|
||||
|
||||
<div class="flex flex-row flex-wrap items-center justify-center gap-8 md:min-h-[50vh] order-1">
|
||||
<div>
|
||||
|
|
@ -126,9 +128,9 @@
|
|||
<p class="text-4xl font-bold">Photographer</p>
|
||||
</div>
|
||||
<div class="flex justify-center px-8 py-4 bg-yellow-500 bg-opacity-40">
|
||||
<p class="text-lg font-light">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>
|
||||
<p class="text-lg font-light">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>
|
||||
|
|
@ -229,7 +231,7 @@
|
|||
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-blue">
|
||||
<p class="text-lg font-light">Feel free to reach out anytime! Ways to contact me via
|
||||
instant messengers are available in <a class="text-bg-pink hover:underline"
|
||||
href="#section_links">links</a> section!</p>
|
||||
href="#links">links</a> section!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -244,7 +246,8 @@
|
|||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<div class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-square">
|
||||
<div
|
||||
class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-square">
|
||||
<div class="relative flex items-end justify-end w-full h-full overflow-hidden"
|
||||
id="photos-image">
|
||||
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
|
||||
|
|
@ -303,7 +306,8 @@
|
|||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<div class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div
|
||||
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div class="flex items-end justify-end w-full h-full bg-bg-blue">
|
||||
<p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p>
|
||||
</div>
|
||||
|
|
@ -367,7 +371,8 @@
|
|||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<div class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div
|
||||
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div class="flex items-end justify-end w-full h-full bg-black">
|
||||
<p class="font-bold text-4xl p-[8px]">PROJECTS</p>
|
||||
</div>
|
||||
|
|
@ -386,10 +391,10 @@
|
|||
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
|
||||
<div
|
||||
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]"
|
||||
class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden -z-20">
|
||||
<img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px] -z-10"
|
||||
alt="" src="./static/assets/TG_Photos.png" />
|
||||
<div class="z-10 flex flex-col justify-end h-full gap-1">
|
||||
<div class="flex flex-col justify-end h-full gap-1">
|
||||
<p class="text-2xl font-medium">TG-Photos</p>
|
||||
<p class="text-base font-light">Telegram bot to use telegram as a Google
|
||||
Photo alternative</p>
|
||||
|
|
@ -447,7 +452,8 @@
|
|||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<div class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div
|
||||
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div class="flex items-end justify-end w-full h-full bg-bg-pink">
|
||||
<p class="font-bold text-4xl p-[8px]">CONTACT</p>
|
||||
</div>
|
||||
|
|
@ -496,72 +502,64 @@
|
|||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid w-full gap-1 mt-4 grid-cols-fluid">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div class="flex items-end justify-end w-full h-full bg-orange-400">
|
||||
<p class="font-bold text-4xl p-[8px]">COLLECTIONS & FRIENDS</p>
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
|
||||
<div class="flex items-end justify-end w-full h-full bg-orange-400">
|
||||
<p class="font-bold text-4xl p-[8px] text-right">COLLECTIONS & FRIENDS</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Red Pandas Stickers</p>
|
||||
<p class="text-base font-light">Telegram channel with red panda
|
||||
sticker packs</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Red Panda Images</p>
|
||||
<p class="text-base font-light">3000+ Photos and Videos of a red pandas</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">blep stash</p>
|
||||
<p class="text-base font-light">VK Group of a photographer.
|
||||
City and
|
||||
Trains photography</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">itc1205</p>
|
||||
<p class="text-base font-light">Github profile of another furry
|
||||
programmer</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Red Pandas Stickers</p>
|
||||
<p class="text-base font-light">Telegram channel with red panda
|
||||
sticker packs</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Red Panda Images</p>
|
||||
<p class="text-base font-light">Collection with 3000+ Photos
|
||||
and
|
||||
Videos of a red pandas</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">blep stash</p>
|
||||
<p class="text-base font-light">VK Group of a photographer.
|
||||
City and
|
||||
Trains photography</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">itc1205</p>
|
||||
<p class="text-base font-light">Github profile of another furry
|
||||
programmer</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="./static/script.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue