76 lines
2 KiB
Vue
76 lines
2 KiB
Vue
<script setup lang="ts">
|
|
import NychTag from "@/components/design/NychTag.vue";
|
|
import LaurelDivider from "@/components/design/LaurelDivider.vue";
|
|
import type { ComponentProps } from "@/data/portfolio";
|
|
|
|
const palettes = [
|
|
{ key: "Frontend", accent: "var(--info)", severity: "info" as const },
|
|
{ key: "Backend", accent: "var(--success)", severity: "success" as const },
|
|
{ key: "Tools", accent: "var(--warn)", severity: "warn" as const },
|
|
];
|
|
const { portfolioData } = defineProps<ComponentProps>();
|
|
</script>
|
|
|
|
<template>
|
|
<section id="skills" class="port-section" style="scroll-margin-top: 48px">
|
|
<LaurelDivider style="margin-bottom: 3.5rem" />
|
|
<h2 class="port-title">Skills</h2>
|
|
<div class="port-skills-grid reveal">
|
|
<div v-for="palette in palettes" :key="palette.key" class="port-skills-card">
|
|
<div class="port-skills-accent" :style="{ background: palette.accent }" />
|
|
<div class="port-skills-body">
|
|
<div class="port-skills-label" :style="{ color: palette.accent }">{{ palette.key }}</div>
|
|
<div class="port-skills-tags">
|
|
<NychTag
|
|
v-for="tag in portfolioData?.skills[palette.key] ?? []"
|
|
:key="tag"
|
|
:severity="palette.severity"
|
|
rounded
|
|
>
|
|
{{ tag }}
|
|
</NychTag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.port-skills-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.port-skills-card {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.port-skills-accent {
|
|
height: 3px;
|
|
}
|
|
|
|
.port-skills-body {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.port-skills-label {
|
|
font-family: var(--font-serif);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.port-skills-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
</style>
|