mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
refactor: update about me section
This commit is contained in:
parent
7c51081229
commit
d3b215ba0a
GPG key ID:
858E8EE696525EED
2 changed files with 153 additions and 188 deletions
74
index.html
74
index.html
|
|
@ -49,11 +49,11 @@
|
|||
<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>
|
||||
href="https://wah.su/photos" target="_blank" referrerpolicy="origin">"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>
|
||||
href="https://home.wah.su" target="_blank" referrerpolicy="origin">"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>
|
||||
href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"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%]">
|
||||
|
|
@ -64,21 +64,61 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container py-6 text-white scroll-mt-12" id="section_about">
|
||||
<div class="container h-screen py-6 text-white scroll-mt-12" 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 class="flex flex-wrap gap-8 w-fit">
|
||||
<div class="flex flex-col w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-gray">
|
||||
<p class="font-bold text-4xl p-[8px]">Tech enthusiast</p>
|
||||
</div>
|
||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
||||
<p class="text-2xl 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 gap-8 w-fit">
|
||||
<div class="flex flex-col w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-gray">
|
||||
<p class="font-bold text-4xl p-[8px]">Self-Hosting stuff</p>
|
||||
</div>
|
||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
||||
<p class="text-2xl 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 w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-green-500">
|
||||
<p class="font-bold text-4xl p-[8px]">Photographer</p>
|
||||
</div>
|
||||
<div class="relative w-[416px] p-[16px] flex justify-center bg-green-500 bg-opacity-50">
|
||||
<p class="text-2xl 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>
|
||||
<div class="flex flex-col w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-orange-600">
|
||||
<p class="font-bold text-4xl p-[8px]">Red Pandas admirer</p>
|
||||
</div>
|
||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-orange-600 bg-opacity-50">
|
||||
<p class="text-2xl font-light">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 <a class="text-bg-pink hover:underline" href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, I’ve curated a <a class="text-bg-pink hover:underline" href="https://home.wah.su" target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and videos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-8 w-fit">
|
||||
<div class="flex flex-col w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-pink">
|
||||
<p class="font-bold text-4xl p-[8px]">Music</p>
|
||||
</div>
|
||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-bg-pink bg-opacity-50">
|
||||
<p class="text-2xl 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 class="flex flex-col w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-blue">
|
||||
<p class="font-bold text-4xl p-[8px]">Contact</p>
|
||||
</div>
|
||||
<div class="relative w-[416px] p-[16px] flex justify-center bg-bg-blue bg-opacity-50">
|
||||
<p class="text-2xl 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container py-16 text-white scroll-mt-20" id="section_links">
|
||||
|
|
|
|||
|
|
@ -644,11 +644,6 @@ video {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
|
@ -669,18 +664,10 @@ 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;
|
||||
}
|
||||
|
|
@ -697,6 +684,10 @@ video {
|
|||
height: 100px;
|
||||
}
|
||||
|
||||
.h-\[120px\] {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.h-\[180px\] {
|
||||
height: 180px;
|
||||
}
|
||||
|
|
@ -725,22 +716,6 @@ video {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[374\] {
|
||||
height: 374;
|
||||
}
|
||||
|
||||
.h-\[374px\] {
|
||||
height: 374px;
|
||||
}
|
||||
|
||||
.h-\[375px\] {
|
||||
height: 375px;
|
||||
}
|
||||
|
||||
.h-\[77px\] {
|
||||
height: 77px;
|
||||
}
|
||||
|
||||
.max-h-\[40vh\] {
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
|
@ -753,6 +728,10 @@ video {
|
|||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.min-h-\[196px\] {
|
||||
min-height: 196px;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
|
@ -810,34 +789,6 @@ 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;
|
||||
}
|
||||
|
||||
.w-\[196px\] {
|
||||
width: 196px;
|
||||
}
|
||||
|
||||
.max-w-\[1200px\] {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
|
@ -846,38 +797,10 @@ video {
|
|||
max-width: 45%;
|
||||
}
|
||||
|
||||
.max-w-\[45\.25\%\] {
|
||||
max-width: 45.25%;
|
||||
}
|
||||
|
||||
.max-w-\[54\.75\%\] {
|
||||
max-width: 54.75%;
|
||||
}
|
||||
|
||||
.max-w-\[55\%\] {
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
.max-w-\[58\%\] {
|
||||
max-width: 58%;
|
||||
}
|
||||
|
||||
.max-w-\[47\%\] {
|
||||
max-width: 47%;
|
||||
}
|
||||
|
||||
.max-w-\[46\%\] {
|
||||
max-width: 46%;
|
||||
}
|
||||
|
||||
.max-w-\[46\.25\%\] {
|
||||
max-width: 46.25%;
|
||||
}
|
||||
|
||||
.max-w-\[52\.75\%\] {
|
||||
max-width: 52.75%;
|
||||
}
|
||||
|
||||
.max-w-\[53\.75\%\] {
|
||||
max-width: 53.75%;
|
||||
}
|
||||
|
|
@ -887,34 +810,10 @@ video {
|
|||
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));
|
||||
}
|
||||
|
||||
.scroll-mt-24 {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
.scroll-mt-40 {
|
||||
scroll-margin-top: 10rem;
|
||||
}
|
||||
|
||||
.scroll-mt-16 {
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
.scroll-mt-12 {
|
||||
scroll-margin-top: 3rem;
|
||||
}
|
||||
|
||||
.scroll-mt-8 {
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
.scroll-mt-10 {
|
||||
scroll-margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.scroll-mt-6 {
|
||||
scroll-margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.scroll-mt-20 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
|
@ -971,10 +870,6 @@ video {
|
|||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -987,18 +882,14 @@ video {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.border-l-8 {
|
||||
border-left-width: 8px;
|
||||
}
|
||||
|
|
@ -1060,6 +951,66 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-orange-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-yellow-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-orange-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(234 88 12 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-opacity-70 {
|
||||
--tw-bg-opacity: 0.7;
|
||||
}
|
||||
|
||||
.bg-opacity-20 {
|
||||
--tw-bg-opacity: 0.2;
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-opacity-5 {
|
||||
--tw-bg-opacity: 0.05;
|
||||
}
|
||||
|
||||
.bg-opacity-80 {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
|
@ -1073,6 +1024,10 @@ video {
|
|||
padding: 2rem;
|
||||
}
|
||||
|
||||
.p-\[16px\] {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.p-\[8px\] {
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -1092,6 +1047,11 @@ video {
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
|
@ -1102,31 +1062,16 @@ video {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -1135,14 +1080,6 @@ video {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-8 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-16 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1236,24 +1173,18 @@ video {
|
|||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
@ -1268,6 +1199,10 @@ video {
|
|||
filter: darken(10%);
|
||||
}
|
||||
|
||||
.\[filter\:lighen\(10\%\)\] {
|
||||
filter: lighen(10%);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
|
||||
|
|
@ -1334,16 +1269,6 @@ 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));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue