68 lines
1.4 KiB
Plaintext
68 lines
1.4 KiB
Plaintext
---
|
|
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 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 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 set:html={skills.skill_3}/>
|
|
<p set:html={skills.skill_3_description}/>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.box {
|
|
border: 1px solid var(--gray-800);
|
|
border-radius: 0.75rem;
|
|
padding: 1.5rem;
|
|
background-color: var(--gray-999_40);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.skills {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.skills h2 {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.skills p {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.box {
|
|
border-radius: 1.5rem;
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
.skills {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 5rem;
|
|
}
|
|
|
|
.skills h2 {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
}
|
|
</style>
|