98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { Badge, Card, CardHeader, CardTitle, CardContent, CardFooter } from '@nychthemeron/library'
|
|
|
|
import LaurelDivider from '@/components/design/LaurelDivider.vue'
|
|
import ImageSlot from '@/components/design/ImageSlot.vue'
|
|
|
|
import type { ComponentProps, Project } from '@/data/portfolio'
|
|
|
|
const ACCENT: Record<string, string> = {
|
|
primary: 'var(--primary)',
|
|
info: 'var(--info)',
|
|
success: 'var(--success)',
|
|
warn: 'var(--warn)',
|
|
}
|
|
|
|
const badgeVariant = (color: Project['color']) => (color === 'warn' ? 'warning' : color)
|
|
|
|
const { portfolioData } = defineProps<ComponentProps>()
|
|
</script>
|
|
|
|
<template>
|
|
<section id="work" class="port-section" style="scroll-margin-top: 68px">
|
|
<LaurelDivider style="margin-bottom: 3.5rem" />
|
|
<h2 class="port-title">Selected Work</h2>
|
|
<div class="port-grid reveal">
|
|
<Card
|
|
v-for="project in portfolioData?.projects"
|
|
:key="project.id"
|
|
class="port-work-card"
|
|
:style="{ borderTop: `3px solid ${ACCENT[project.color]}` }"
|
|
>
|
|
<CardHeader v-if="project.image" class="port-work-image">
|
|
<ImageSlot
|
|
:src="project.image"
|
|
:alt="project.title"
|
|
shape="rect"
|
|
style="width: 100%; height: 200px"
|
|
/>
|
|
</CardHeader>
|
|
<CardContent class="port-work-content">
|
|
<CardTitle class="port-work-title-row">
|
|
<span :style="{ color: ACCENT[project.color] }">{{ project.title }}</span>
|
|
<a
|
|
:href="project.link"
|
|
class="port-work-view"
|
|
:style="{ color: ACCENT[project.color] }"
|
|
>
|
|
View <i class="pi pi-external-link" style="font-size: 10px" />
|
|
</a>
|
|
</CardTitle>
|
|
{{ project.description }}
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Badge v-for="tag in project.tags" :key="tag" :variant="badgeVariant(project.color)">{{
|
|
tag
|
|
}}</Badge>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.port-work-image {
|
|
padding: 0;
|
|
}
|
|
|
|
.port-work-card {
|
|
height: 100%;
|
|
}
|
|
|
|
.port-work-card :deep([data-slot='card-header']) {
|
|
padding: 0;
|
|
}
|
|
|
|
.port-work-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.port-work-content {
|
|
flex-grow: 1;
|
|
}
|
|
.port-work-view {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.78rem;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
font-weight: 400;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
</style>
|