---
import SkillsComponent from "../components/skills/SkillsComponent.astro";
import MoreSkills from "../components/skills/MoreSkills.astro";
import Footer from "../components/global/FooterComponent.astro";
import PageLayout from "@/layouts/PageLayout.astro";
---

<PageLayout
	title="Skills"
	description="Learn what skills RythonDev has honed in the past few years"
	thumbnail="/images/profile/contact_photo.webp"
>
	<div id="skills" class="mt-10 pb-20">
		<SkillsComponent />
		<MoreSkills />
	</div>
	<Footer />
</PageLayout>

<style>
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		background-image: radial-gradient(
			rgba(255, 255, 255, 0.1) 1px,
			transparent 1px
		);
		background-position: 50% 50%;
		background-size: 1.1rem 1.1rem;
		padding-top: 2rem;
		padding-left: 2rem;
		padding-right: 2rem;
		padding-bottom: 0.5rem;
		border-radius: 1.25rem;
		overflow: hidden;
	}
</style>