RythonDev/src/components/skills/SkillsComponent.astro
2026-08-20 14:32:25 +10:00

86 lines
2.2 KiB
Text

---
import Card from "../global/Card.astro";
---
<div class="flex h-fit flex-col items-center justify-center pt-20">
<h1 class="mb-5 text-center text-5xl">Skills</h1>
<div
class="grid w-[90%] grid-cols-1 gap-x-10 gap-y-5 md:w-[600px] lg:w-2/3 lg:grid-cols-3"
>
<Card
shadowColor="rgb(4, 57, 57)"
className="bg-gradient-to-br from-[#101010] to-[#202020]"
>
<div
class="flex flex-col items-start justify-start gap-2 px-5 py-5 text-left"
>
<div>
<div class="text-xl font-bold">Frontend</div>
<div
class="flex flex-row flex-wrap items-center justify-start gap-x-1 text-sm"
>
<div>Typescript,</div>
<div>React,</div>
<div>TailwindCSS</div>
</div>
</div>
<div>
<div class="text-xl font-bold">Backend</div>
<div
class="flex flex-row flex-wrap items-center justify-start gap-x-1 text-sm"
>
<div>Node.js,</div>
<div>PHP,</div>
<div>C#,</div>
<div>Go,</div>
<div>Rust</div>
</div>
</div>
<div>
<div class="text-xl font-bold">Tools</div>
<div
class="flex flex-row flex-wrap items-center justify-start gap-x-1 text-sm"
>
<div>Git,</div>
<div>Docker,</div>
<div>Forgejo Actions</div>
</div>
</div>
</div>
</Card>
<Card
shadowColor="rgb(4, 57, 57)"
className="bg-gradient-to-br from-[#202020] to-[#101010] lg:col-span-2"
>
<div class="w-full px-5 py-5 lg:w-4/5">
<div class="mb-6">
<p class="mb-3">
I primarily work on websites on both the frontend and
the backend.
</p>
<p class="mb-3">
Other projects I work on include Python scripts, Discord
bots, and Streamer.bot C# scripts.
</p>
<p class="mb-3">
Full resume available upon requests via{" "}
<a
href="mailto:hello@rython.dev"
class="hover:text-accent underline">Email</a
>.
</p>
</div>
<div class="text-center lg:text-left">
<a
href="./RyanLee_SoftwareDeveloper_Resume.pdf"
target="_blank"
class="bg-primary text-secondary hover:bg-accent rounded-full px-5 py-2 font-semibold transition-colors duration-150"
>
View Resume
</a>
</div>
</div>
</Card>
</div>
</div>