---
import Card from "../global/Card.astro";
import Socials from "../socials/Socials.astro";
import Greeting from "./Greeting.svelte";
import pfp_new from "../images/pfp_new.webp";
import { Image } from "astro:assets";
---

<div class="w-[90%] md:w-[600px] lg:w-1/2">
	<Card
		shadowColor="rgba(4, 57, 57, 0.5)"
		className="theme-dark-card animate-fadeIn bg-gradient-to-br from-[#101010] to-[#202020]"
	>
		<div id="intro" class="flex h-fit flex-col">
			<div class="w-full px-5 pt-10 pb-2 lg:px-10">
				<div class="flex h-20 flex-row">
					<div class="mr-1 flex w-20 items-center justify-center">
						<Image
							src={pfp_new}
							alt="Ryan"
							width="80"
							height="80"
							class="max-w-full rounded-full bg-[#505050]"
							loading="eager"
						/>
					</div>
					<div class="ml-2 flex flex-col items-start justify-center">
						<div
							id="name"
							class="animate-gradient text-2xl font-bold"
						>
							Ryan Lee
						</div>
						<div class="w-full text-xl">Full Stack Developer</div>
					</div>
				</div>
				<div id="uwu" class="hidden items-center justify-center">
					<img
						src="/images/RythonDev-UwU-compressed.webp"
						alt="RythonDev"
						width="400"
						height="131.8"
					/>
				</div>
				<div class="mt-5 mb-5 text-2xl font-bold">
					<Greeting client:load />!
				</div>
				<p class="text-left">
					I am a Malaysian computer science graduate working
					on various projects in Malaysia. I develop software
					for streamers and content creators, while also
					making tech tutorials in programming.
				</p>

				<div class="mt-8 flex flex-row items-center justify-center">
					<Socials />
				</div>
			</div>
		</div>
	</Card>
</div>

<style>
	#name {
		background: linear-gradient(
			90deg,
			#72ffff 0%,
			#20ffb8 55%,
			#0096ff 100%
		);

		background-size: 200%;

		background-clip: text;
		-webkit-background-clip: text;

		-webkit-text-fill-color: transparent;
	}
</style>