mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
feat: add Skills card
This commit is contained in:
parent
091633d2f5
commit
abeb0da131
2 changed files with 112 additions and 9 deletions
59
index.html
59
index.html
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue