<!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>
<link href="./static/tailwind.css" rel="stylesheet">
</head>
<body class="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"
id="header">
<div class="container flex items-center justify-between gap-1 mx-auto">
<a href="#section_landing">
<div class="flex items-center gap-4 px-4 py-4">
<img src="./static/avatar_512.png" alt="" class="w-[64px] lg:w-[64px] 2xl:w-[64px]" />
<h1 class="text-xl font-semibold lg:text-2xl xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
</div>
</a>
<div class="flex gap-2">
<a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_about">ABOUT ME</a>
<a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_links">LINKS</a>
</div>
</div>
</header>
<div class="h-screen" id="section_landing">
<div class="container mx-auto text-white h-full max-h-[60vh] relative">
<div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[45.25%] absolute top-0 right-0 -z-10"></div>
<div class="flex items-center justify-center gap-12 px-8 py-8">
<img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
<div>
<h1 class="text-2xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
<p class="text-2xl font-medium lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda /
Protogen</p>
</div>
</div>
</div>
<div class="container flex mx-auto text-white h-full max-h-[40vh]">
<div class="max-w-[54.75%] bg-bg-gray py-4 w-full h-full">
<div class="flex items-center justify-between gap-2 px-4">
<img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
<p class="text-3xl text-bg-pink">yaml</p>
</div>
<div class="bg-white w-full h-full max-h-[4px] my-4"></div>
<div class="px-4 text-2xl bio">
<p>BIO:</p>
<p class="ml-4"> Furry: <span class="text-bg-pink">true</span></p>
<p class="ml-4"> About: </p>
<p class="ml-8"> - Coder: <span class="text-bg-pink">"NEXT.js, Python"</span> </p>
<p class="ml-8"> - Photographer: <a class="text-bg-pink hover:underline"
href="https://wah.su/photos">"wah.su/photos"</a></p>
<p class="ml-8"> - Self-Hosting Enthusiast: <a class="text-bg-pink hover:underline"
href="https://home.wah.su">"wah.su"</a></p>
<p class="ml-4"> Listen: <a class="text-bg-pink hover:underline"
href="https://last.fm/user/radiquum" id="track-name">"LOADING . . ."</a></p>
</div>
</div>
<div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
href="#section_about">ABOUT ME</a>
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
href="#section_links">LINKS</a>
</div>
</div>
</div>
<div class="container h-screen mx-auto text-white scroll-mt-40" id="section_about">
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1>
<div class="flex flex-col gap-8 text-2xl font-light max-w-[1200px] mx-auto justify-center">
<p>Hi! I'm Kentai Radiquum 🐾, a tech enthusiast with a passion for software development. I love
diving into code and exploring new software, though hardware fascinates me too.</p>
<p>I’m also getting into photography and excited to share my progress 📸. I will be glad if you
will check them out and leave a feedback! </p>
<p>One of my biggest loves is red pandas — I can’t get enough of them! I’ve been collecting red
panda stickers and sharing them on the Red Panda Stickers Telegram channel. Plus, I’ve curated a
collection of over 3000 red panda photos and videos, available at wahs.wah.su.</p>
<p>I'm really into self-hosting through my wah.su project, which helps me dive into server
management and hosting platforms.</p>
<p>I listen a lot of various music, but mainly listen to EDM \ Happy Hardcore \ Tech \ Rock \
Alternative.<br />By artist like: S3RL, Camellia, t+pazolite, BTMH, Saint Motel, and more...</p>
<p>Feel free to reach out anytime! I will be happy to chat.</p>
</div>
</div>
<div class="flex flex-col items-center justify-center p-8 text-white scroll-mt-24" id="section_links">
<h1 class="mx-auto mb-12 text-6xl font-bold w-fit">LINKS</h1>
<div class="flex items-start justify-center gap-8">
<!-- 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="" 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">
<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>
<p class="font-light text-[14px] leading-[1]">See the photos like in instagram</p>
</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">
<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>
<p class="font-light text-[14px] leading-[1]">Photos that more furry related</p>
</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>
</div>
</div>
</a>
</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">
<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>
<p class="font-light text-[14px] leading-[1]">@radiquum@furry.engineer</p>
</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">
<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>
<p class="font-light text-[14px] leading-[1]">@radiquum.wah.su</p>
</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">
<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>
<p class="font-light text-[14px] leading-[1]">@radiquum</p>
</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">
<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>
<p class="font-light text-[14px] leading-[1]">radiquum</p>
</div>
</div>
</a>
</div>
</div>
<!-- Projects Links -->
<div class="flex flex-col w-[416px] gap-4">
<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>
</div>
<!-- Contact and Friends links Links -->
<div class="flex flex-col w-[416px] gap-8">
<!-- Contact Links -->
<div class="flex flex-col gap-4">
<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>
</div>
<!-- Friends Links -->
<div class="flex flex-col gap-4">
<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>
</div>
</div>
</div>
</div>
<script src="./static/script.js"></script>
</body>
</html>