RythonDev/src/components/skills/SkillsComponent.astro
2025-08-08 08:45:56 +10:00

146 lines
2.8 KiB
Text

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