---
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>