---
import Card from "../global/Card.astro";
import Line from "../global/NetworkLine.astro";
import Skill from "./Skill.astro";
---

<div class="h-fit w-full pt-20">
	<h1 class="text-center text-5xl">Skills</h1>
	<div class="flex flex-col items-center">
		<div class="w-[90%] pt-10 md:w-[600px] lg:w-1/2">
			<Skill
				className="view-fadeUp"
				title="Frontend Development"
				primaryColor="#19a7ce"
				tags={[
					{
						text: "HTML",
						bgColor: "var(--color-html)",
					},
					{
						text: "CSS",
						bgColor: "var(--color-blue-700)",
					},
					{
						text: "Javascript",
						bgColor: "var(--color-yellow-400)",
						textColor: "black",
					},
					{
						text: "Typescript",
						bgColor: "var(--color-typescript)",
					},
					{
						text: "Svelte",
						bgColor: "var(--color-svelte)",
					},
					{
						text: "React",
						bgColor: "var(--color-react)",
						textColor: "black",
					},
					{
						text: "Vue",
						bgColor: "var(--color-green-500)",
						textColor: "black",
					},
					{
						text: "WordPress",
						bgColor: "var(--color-wordpress)",
					},
					{
						text: "Astro",
						bgColor: "white",
						textColor: "black",
					},
					{
						text: "TailwindCSS",
						bgColor: "var(--color-tailwind)",
						textColor: "black",
					},
				]}
			/>
			<Line height="50px" />
			<Skill
				className="view-fadeUp"
				title="Backend Development"
				primaryColor="#474F7A"
				tags={[
					{
						text: "Python",
						bgColor: "var(--color-python)",
					},
					{
						text: "Typescript",
						bgColor: "var(--color-typescript)",
					},
					{
						text: "C#",
						bgColor: "var(--color-csharp)",
					},
					{
						text: "Kotlin",
						bgColor: "var(--color-kotlin)",
					},
					{
						text: "PHP",
						bgColor: "var(--color-php)",
					},
					{
						text: "PostgreSQL",
						bgColor: "var(--color-postgresql)",
					},
					{
						text: "MySQL",
						bgColor: "var(--color-mysql)",
					},
					{
						text: "MongoDB",
						bgColor: "var(--color-mongodb)",
					},
				]}
			/>
			<Line height="50px" />
			<Skill
				className="view-fadeUp"
				title="Data Science"
				primaryColor="#a1eebd"
				tags={[
					{
						text: "Python",
						bgColor: "var(--color-python)",
					},
					{
						text: "R",
						bgColor: "var(--color-cyan-500)",
					},
					{
						text: "OpenCV",
						bgColor: "var(--color-opencv)",
					},
					{
						text: "SAS",
						bgColor: "var(--color-blue-500)",
					},
					{
						text: "MySQL",
						bgColor: "var(--color-mysql)",
					},
					{
						text: "Pandas",
						bgColor: "var(--color-blue-800)",
					},
					{
						text: "Selenium",
						bgColor: "var(--color-green-700)",
					},
					{
						text: "BeautifulSoup4",
						bgColor: "white",
						textColor: "black",
					},
				]}
			/>
		</div>
	</div>
</div>