You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.4 KiB
61 lines
1.4 KiB
<template>
|
|
<div class="project-card">
|
|
<NuxtLink :to="`${navigationItems.find((item: any) => item.finder === 'projects')?.path}/${project.id}`" class="project-link">
|
|
<div class="project-image">
|
|
<NuxtImg
|
|
:src="imageSrc"
|
|
:alt="project.title"
|
|
loading="lazy"
|
|
@error="handleImageError"
|
|
:placeholder="true"
|
|
placeholder-class="image-placeholder"
|
|
/>
|
|
</div>
|
|
<div class="project-content">
|
|
<h2>{{ project.title }}</h2>
|
|
<p>{{ project.description }}</p>
|
|
<div class="project-technologies">
|
|
<span v-for="tech in project.technologies" :key="tech" class="tech-tag">
|
|
{{ tech }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Project } from '~/types/project';
|
|
import { DEFAULT_IMAGES } from '~/config/paths';
|
|
import { navigationItems } from '~/config/navigation';
|
|
|
|
const props = defineProps<{ project: Project }>();
|
|
|
|
const imageSrc = ref(props.project.image);
|
|
|
|
const handleImageError = () => {
|
|
imageSrc.value = DEFAULT_IMAGES.PROJECT;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '~/assets/css/pages/project-detail.css';
|
|
|
|
.image-placeholder {
|
|
background-color: var(--surface-ground);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
</style>
|