mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-05-08 13:59:34 +05:00
feat: add Skills card
This commit is contained in:
parent
091633d2f5
commit
abeb0da131
GPG key ID:
858E8EE696525EED
2 changed files with 112 additions and 9 deletions
69
index.html
69
index.html
|
|
@ -90,12 +90,63 @@
|
|||
<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 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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
||||
<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="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
||||
<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 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">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue