Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-05 15:54:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add Skills card

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-23 14:24:16 +05:00
parent 091633d2f5
commit abeb0da131
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 112 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
index.html
View file

@ -90,6 +90,7 @@
<div class="container min-h-screen px-2 py-6 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="section_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="flex flex-wrap gap-4 mx-auto sm:justify-center w-fit">
<div class="flex flex-col gap-4 w-fit">
<div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Tech enthusiast</p>
@ -98,6 +99,56 @@
<p class="text-xl font-light sm:text-2xl">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 w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-green-500">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Skills</p>
</div>
<div class="relative w-[344px] sm:w-[416px] p-[16px] flex flex-col gap-2 justify-center bg-green-500 bg-opacity-50 ">
<div>
<p class="text-xl font-bold sm:text-2xl">Front-end development</p>
<ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
<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-xl font-bold sm:text-2xl">Back-end development</p>
<ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
<li>Python</li>
<li>Node.js</li>
<li>FastAPI</li>
</ul>
</div>
<div>
<p class="text-xl font-bold sm:text-2xl">API</p>
<ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
<li>Postman/Hoppscotch</li>
<li>mitmproxy</li>
<li>HTTP Toolkit</li>
</ul>
</div>
<div>
<p class="text-xl font-bold sm:text-2xl">Collaboration</p>
<ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
<li>Git</li>
<li>Github</li>
</ul>
</div>
<div>
<p class="text-xl font-bold sm:text-2xl">Deployment</p>
<ul class="flex flex-wrap text-base font-light gap-x-2 sm:text-lg">
<li>Docker</li>
<li>Docker-compose</li>
<li>Vercel</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-4 w-fit">
<div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
@ -108,15 +159,15 @@
</div>
</div>
<div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-green-500">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-yellow-500">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Photographer</p>
</div>
<div class="relative w-[344px] sm:w-[416px] p-[16px] flex justify-center bg-green-500 bg-opacity-50">
<div class="relative w-[344px] sm:w-[416px] p-[16px] flex justify-center bg-yellow-500 bg-opacity-40">
<p class="text-xl font-light sm:text-2xl">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-[344px] sm:w-[416px] xl:-mt-[248px] 2xl:-mt-0">
<div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-orange-600">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Red Pandas admirer</p>
</div>
@ -124,7 +175,7 @@
<p class="text-xl font-light sm:text-2xl">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://t.me/red_panda_stickers"target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, I’ve 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 gap-4 w-fit">
<div class="flex flex-col gap-4 w-fit lg:-mt-[296px] 2xl:-mt-0">
<div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-pink">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Music</p>

52
static/tailwind.css
View file

@ -913,6 +913,15 @@ video {
gap: 2rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.overflow-hidden {
overflow: hidden;
}
@ -1013,10 +1022,24 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.bg-yellow-600 {
--tw-bg-opacity: 1;
background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-opacity-40 {
--tw-bg-opacity: 0.4;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
@ -1472,6 +1495,11 @@ body {
line-height: 1.75rem;
}
.sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.sm\:hover\:-translate-y-2:hover {
--tw-translate-y: -0.5rem;
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));
@ -1536,6 +1564,22 @@ body {
margin-top: -248px;
}
.xl\:-mt-\[232px\] {
margin-top: -232px;
}
.xl\:-mt-\[234px\] {
margin-top: -234px;
}
.xl\:-mt-\[252px\] {
margin-top: -252px;
}
.xl\:-mt-\[312px\] {
margin-top: -312px;
}
.xl\:max-h-\[40vh\] {
max-height: 40vh;
}
@ -1598,6 +1642,14 @@ body {
margin-top: 7rem;
}
.lg\:-mt-\[312px\] {
margin-top: -312px;
}
.lg\:-mt-\[296px\] {
margin-top: -296px;
}
.lg\:max-h-\[45vh\] {
max-height: 45vh;
}