radiquum.github.io/index.html

567 lines
No EOL
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kentai Radiquum</title>
<meta name="description"
content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and stickers telegram channel. I enjoy a variety of music genres, especially EDM, Tech, and Alternative. Feel free to reach out via instant messengers in the links section!">
<link href="./static/tailwind.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<meta property="og:type" content="website">
<meta property="og:title" content="Kentai Radiquum">
<meta property="og:url" content="https://radiquum.wah.su">
<meta property="og:image" content="https://radiquum.wah.su/static/opengraph.png">
<meta property="og:image:type" content="image/png">
<meta property="og:description"
content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and stickers telegram channel. I enjoy a variety of music genres, especially EDM, Tech, and Alternative. Feel free to reach out via instant messengers in the links section!">
<meta property="og:image:width" content="1203">
<meta property="og:image:height" content="627">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Kentai Radiquum">
<meta name="twitter:site" content="@radiquum">
<meta name="twitter:description"
content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and sti">
<meta name="twitter:image" content="https://radiquum.wah.su/static/opengraph.png">
</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"
id="header">
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
<a href="#landing">
<div class="flex items-center gap-4 px-4 py-2 sm:py-4">
<img src="./static/avatar_512.png" alt="" class=" rounded-lg w-[64px] lg:w-[64px] 2xl:w-[64px]" />
<h1 class="text-2xl font-semibold xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
</div>
</a>
<div class="flex gap-1 px-4 mb-2 sm:px-0 sm:gap-2">
<a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="#about">ABOUT ME</a>
<a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="#links">LINKS</a>
</div>
</div>
</header>
<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="flex flex-row flex-wrap items-center justify-center gap-8 md:min-h-[50vh] order-1">
<div>
<img src="./static/avatar_512.png" alt=""
class="rounded-3xl w-[256px] xl:max-w-[372px] 2xl:w-[512px]" />
<a href="https://x.com/sleepy_muzzle"
class="block mt-1 text-base text-center underline sm:text-right text-bg-pink hover:underline sm:no-underline"
target="_blank" referrerpolicy="origin">@sleepy_muzzle</a>
</div>
<div class="w-full p-4 text-white bg-bg-pink md:bg-transparent md:w-auto">
<h1 class="text-3xl font-semibold sm:text-4xl lg:text-6xl xl:text-7xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
<p class="text-xl font-light lg:text-4xl xl:text-4xl 2xl:text-5xl">He / Him <br class="md:hidden" />
<span class="hidden md:inline"></span> Red panda / Protogen
</p>
</div>
</div>
<div class="flex flex-row flex-wrap justify-center order-2 gap-2 p-4 text-2xl text-white md:gap-4">
<a href="https://furaffinity.net/user/radiquum"
class="underline text-bg-pink hover:underline sm:no-underline" target="_blank"
referrerpolicy="origin">Furry<span class="inline sm:hidden">.</span></a>
<span class="hidden sm:block">/</span>
<a href="https://github.com/radiquum" class="underline text-bg-pink hover:underline sm:no-underline"
target="_blank" referrerpolicy="origin">Coder<span class="inline sm:hidden">.</span></a>
<span class="hidden sm:block">/</span>
<a href="https://wah.su/photos" class="underline text-bg-pink hover:underline sm:no-underline"
target="_blank" referrerpolicy="origin">Photographer<span class="inline sm:hidden">.</span></a>
<span class="hidden sm:block">/</span>
<a href="https://wah.su" class="underline text-bg-pink hover:underline sm:no-underline" target="_blank"
referrerpolicy="origin">Self-Hosting Enthusiast<span class="inline sm:hidden">.</span></a>
</div>
<p
class="flex flex-col flex-wrap items-center justify-center order-4 gap-2 px-2 text-2xl text-white sm:flex-row md:order-3">
Now listening to: <a class="text-bg-pink hover:underline" href="https://last.fm/user/radiquum"
id="track-name" target="_blank" referrerpolicy="origin">LOADING . . .</a></p>
<div
class="flex flex-row flex-wrap items-center justify-center order-3 gap-8 py-4 -mt-4 text-white md:mt-auto md:order-4">
<img src="./static/arrow_downward.svg" alt="" class="hidden w-24 h-24 animate-bounce md:block" />
<p class="hidden text-4xl md:block">or</p>
<div class="flex flex-row items-center gap-2">
<a class="px-4 py-4 text-2xl underline text-bg-pink hover:underline sm:no-underline" href="#about">ABOUT
ME</a>
<span class="text-2xl">/</span>
<a class="px-4 py-4 text-2xl underline text-bg-pink hover:underline sm:no-underline"
href="#links">LINKS</a>
</div>
</div>
</div>
<!-- ABOUT ME SECTION -->
<div class="container px-2 py-4 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="about">
<h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<div class="flex flex-col gap-4">
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-bg-gray">
<p class="text-4xl font-bold">Tech enthusiast</p>
</div>
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-gray">
<p class="text-lg font-light">I'm a tech enthusiast with a passion for software
development. I love diving into code and exploring new software, though hardware fascinates
me too.</p>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-yellow-500">
<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">Im 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>
<div class="flex flex-col gap-4">
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-bg-gray">
<p class="text-4xl font-bold">Self-Hosting stuff</p>
</div>
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-gray">
<p class="text-lg font-light">I'm really into self-hosting through my <a
class="text-bg-pink hover:underline" href="https://home.wah.su" target="_blank"
referrerpolicy="origin">wah.su</a> project, which helps me dive into server management
and hosting platforms.</p>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-bg-pink">
<p class="text-4xl font-bold">Music</p>
</div>
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-pink">
<p class="text-lg font-light">I listen a lot of various music, but mainly listen to
EDM \ Happy Hardcore \ Tech \ Rock \ Alternative. By artist like: S3RL, Camellia,
t+pazolite, BTMH, Saint Motel, and more...</p>
</div>
</div>
</div>
<div class="flex flex-col gap-4 sm:-mt-[86px] lg:-mt-[60px] xl:-mt-0">
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-green-500">
<p class="text-4xl font-bold">Skills</p>
</div>
<div class="flex flex-col justify-center gap-2 px-8 py-4 bg-green-500 bg-opacity-50 ">
<div>
<p class="text-base font-bold">Front-end development</p>
<ul class="flex flex-wrap text-lg font-light gap-x-2">
<li>HTML</li>
<li>CSS</li>
<li>JS/TS</li>
<li>Next.js</li>
<li>Flask</li>
<li>Django</li>
</ul>
</div>
<div>
<p class="text-base font-bold">Back-end development</p>
<ul class="flex flex-wrap text-lg font-light gap-x-2">
<li>Python</li>
<li>Node.js</li>
<li>FastAPI</li>
</ul>
</div>
<div>
<p class="text-base font-bold">API</p>
<ul class="flex flex-wrap text-lg font-light gap-x-2">
<li>Postman/Hoppscotch</li>
<li>mitmproxy</li>
<li>HTTP Toolkit</li>
</ul>
</div>
<div>
<p class="text-base font-bold">Collaboration</p>
<ul class="flex flex-wrap text-lg font-light gap-x-2">
<li>Git</li>
<li>Github</li>
</ul>
</div>
<div>
<p class="text-base font-bold">Deployment</p>
<ul class="flex flex-wrap text-lg font-light gap-x-2">
<li>Docker</li>
<li>Docker-compose</li>
<li>Vercel</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-orange-600">
<p class="text-4xl font-bold">Red Pandas admirer</p>
</div>
<div class="flex justify-center px-8 py-4 bg-orange-600 bg-opacity-50">
<p class="text-lg font-light">One of my biggest loves is red pandas—I cant get
enough
of them! Ive been collecting red panda stickers and sharing them on the <a
class="text-bg-pink hover:underline" href="https://t.me/red_panda_stickers"
target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus,
Ive curated a <a class="text-bg-pink hover:underline" href="https://wahs.wah.su"
target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and
videos.</p>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-lg">
<div class="flex items-center justify-center w-full p-8 bg-bg-blue">
<p class="text-3xl font-bold sm:text-4xl">Contact</p>
</div>
<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="#links">links</a> section!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Links Section -->
<div class="container px-2 py-4 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="links">
<h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">LINKS</h1>
<div class="grid gap-4 grid-cols-fluid">
<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="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)]"
alt="" src="./static/assets/photo_building.png" data-section-image="photos"
data-slide="0" data-photo="photo_building" />
<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)]"
alt="" src="./static/assets/photo_dandelion.png" data-section-image="photos"
data-slide="1" data-photo="photo_dandelion" />
<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)]"
alt="" src="./static/assets/photo_flowers.png" data-section-image="photos"
data-slide="2" data-photo="photo_flowers" />
<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)]"
alt="" src="./static/assets/photo_plush.png" data-section-image="photos" data-slide="3"
data-photo="photo_plush" />
<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)]"
alt="" src="./static/assets/photo_tower.png" data-section-image="photos" data-slide="4"
data-photo="photo_tower" />
<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)]"
alt="" src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5"
data-photo="photo_trains" />
<p class="font-bold text-4xl p-[8px]">PHOTOS</p>
</div>
</div>
<a class="hover:border-bg-blue w-[170px] xs:flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">pixey.org</p>
<p class="text-base font-light ">See the photos like in instagram</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue w-[170px] xs:flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">instafops.net</p>
<p class="text-base font-light ">Photos that more furry related</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-black bg-white">
<img class="w-16 h-16" alt="" src="./static/assets/immich.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">wah.su/photos</p>
<p class="text-base font-light ">View gallery like in google photos</p>
</div>
</div>
</a>
</div>
</div>
<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="flex items-end justify-end w-full h-full bg-bg-blue">
<p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p>
</div>
</div>
<a class="hover:border-bg-blue w-full aspect-[2/1] border-transparent border-2 border-solid transition-[border-color] max-h-[182px] overflow-hidden rounded-lg"
href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-black bg-white">
<img class="object-contain w-16 h-16" alt=""
src="./static/assets/logos--mastodon-icon.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">Mastodon</p>
<p class="text-base font-light break-words">@radiquum@furry.engineer</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/Bluesky_Logo.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">Bluesky</p>
<p class="text-base font-light ">@radiquum.wah.su</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/logos--twitter.svg" />
<div class="flex flex-col justify-end gap-1">
<p class="text-2xl font-medium ">Twitter</p>
<p class="text-base font-light ">@radiquum</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">VKontakte</p>
<p class="text-base font-light ">radiquum</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://furaffinity.net/user/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/fur-affinity.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">Furaffinity</p>
<p class="text-base font-light ">radiquum</p>
</div>
</div>
</a>
</div>
</div>
<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="flex items-end justify-end w-full h-full bg-black">
<p class="font-bold text-4xl p-[8px]">PROJECTS</p>
</div>
</div>
<a class="hover:border-bg-blue w-full aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
<div class="relative flex items-end w-full h-full p-4">
<img class="absolute inset-0 object-cover -z-10" alt="" src="./static/assets/ANIX.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Anix</p>
<p class="text-base font-light">Unofficial web client for Anixart android app,
made in Next.JS</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/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 -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="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>
</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://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin">
<div
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-[170px] sm:w-[200px] object-cover"
alt="" src="./static/assets/WordGen.png" />
<div class="flex flex-col justify-end h-full gap-1">
<p class="text-2xl font-medium">WordGen</p>
<p class="text-base font-light">Random word generator inspired by @tsoding
</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/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin">
<div
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="text-2xl font-medium">furaffinity-dl</p>
<p class="text-base font-light">Modification of the original project to
add more functionality</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/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="text-2xl font-medium">Github</p>
<p class="text-base font-light">View my other repositories</p>
</div>
</div>
</a>
<a class="hover:border-bg-blue group w-full aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://home.wah.su" target="_blank" referrerpolicy="origin">
<div class="relative flex items-end w-full h-full px-2 py-4 overflow-hidden">
<img class="absolute filter brightness-50 group-hover:scale-150 transition-all scale-9 sm:scale-100 -right-[90px] -top-[80px] sm:-right-32 sm:-top-24 object-cover -z-10"
alt="" src="./static/assets/wah-su.svg" />
<div class="absolute inset-0 bg-black -z-20"></div>
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">wah.su</p>
<p class="text-base font-light">My Self-Hosting endeavor</p>
</div>
</div>
</a>
</div>
</div>
<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="flex items-end justify-end w-full h-full bg-bg-pink">
<p class="font-bold text-4xl p-[8px]">CONTACT</p>
</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/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/Telegram.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Telegram</p>
<p class="text-base font-light">@radiquum</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://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/matrix-favicon.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Matrix</p>
<p class="text-base font-light">@radiquum:wah.su
</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/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">VK</p>
<p class="text-base font-light">radiquum</p>
</div>
</div>
</a>
<a class="w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/discord-mark-blue.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Discord</p>
<p class="text-base font-light">radiquum</p>
</div>
</div>
</a>
</div>
<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>
</div>
<script src="./static/script.js"></script>
</body>
</html>