convert to use directus

src/components/Skills.astro

@@ -1,22 +1,27 @@
 ---
 import Icon from './Icon.astro';
+
+import directus from "../../lib/directus"
+import { readSingleton } from "@directus/sdk";
+
+const skills = await directus.request(readSingleton("skills"));
 ---
 
 <section class="box skills">
 	<div class="stack gap-2 lg:gap-4">
 		<Icon icon="cloud" color="var(--accent-regular)" size="2.5rem" gradient />
-		<h2>AWS</h2>
-		<p>Certified DevOps Engineer and former AWS Cloud Engineer skilled in deploying, managing, and architecting a wide range of AWS services.</p>
+		<h2 set:html={skills.skill_1}/>
+		<p set:html={skills.skill_1_description}/>
 	</div>
 	<div class="stack gap-2 lg:gap-4">
 		<Icon icon="network" color="var(--accent-regular)" size="2.5rem" gradient />
-		<h2>Kubernetes</h2>
-		<p>My skills encompass Kubernetes administration and application development, validated by my CKA and CKAD certifications.</p>
+		<h2 set:html={skills.skill_2}/>
+		<p set:html={skills.skill_2_description}/>
 	</div>
 	<div class="stack gap-2 lg:gap-4">
 		<Icon icon="strategy" color="var(--accent-regular)" size="2.5rem" gradient />
-		<h2>GitOps</h2>
-		<p>Hands-on experience leveraging a variety of IaC tools such as CloudFormation, CDK, Helm, and ArgoCD to streamline infrastructure provisioning and management across multiple projects.</p>
+		<h2 set:html={skills.skill_3}/>
+		<p set:html={skills.skill_3_description}/>
 	</div>
 </section>