kayjaydee
6b828aff67
- Corrected the name in various files including CLAUDE.md, README.md, and configuration files to reflect the updated branding. - Ensured consistency in the use of the new name throughout the project, enhancing brand identity.
251 lines
11 KiB
Vue
251 lines
11 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { t } = useI18n()
|
|
const { findById, projects } = useProjects()
|
|
|
|
const project = findById(route.params.id as string)
|
|
|
|
if (!project.value) {
|
|
throw createError({ status: 404, statusText: 'Project not found' })
|
|
}
|
|
|
|
const galleryRef = useTemplateRef('gallery')
|
|
|
|
const relatedProjects = computed(() => {
|
|
if (!project.value) return []
|
|
return projects.value
|
|
.filter((p) => p.id !== project.value!.id && p.category === project.value!.category)
|
|
.slice(0, 3)
|
|
})
|
|
|
|
useSeoMeta({
|
|
title: () => project.value?.title ?? '',
|
|
description: () => project.value?.description ?? '',
|
|
ogTitle: () => project.value?.title ?? '',
|
|
ogDescription: () => project.value?.description ?? '',
|
|
ogImage: 'https://killiandalcin.fr/og-image.png',
|
|
ogType: 'website',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="project">
|
|
<!-- Full-width hero image -->
|
|
<section class="relative overflow-hidden">
|
|
<!-- Hero image with overlay -->
|
|
<div class="relative h-[40vh] sm:h-[50vh] lg:h-[60vh]">
|
|
<NuxtImg
|
|
v-if="project.image"
|
|
:src="project.image"
|
|
:alt="project.title"
|
|
class="w-full h-full object-cover"
|
|
format="webp"
|
|
loading="eager"
|
|
/>
|
|
<!-- Gradient overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-white via-white/40 to-transparent dark:from-gray-950 dark:via-gray-950/40 dark:to-transparent" />
|
|
<div class="absolute inset-0 bg-gradient-to-r from-white/60 to-transparent dark:from-gray-950/60 dark:to-transparent" />
|
|
|
|
<!-- Back button (floating) -->
|
|
<div class="absolute top-6 left-4 sm:left-6 lg:left-8 z-20">
|
|
<UButton
|
|
variant="solid"
|
|
color="neutral"
|
|
icon="i-lucide-arrow-left"
|
|
to="/projects"
|
|
size="sm"
|
|
class="shadow-lg backdrop-blur-sm"
|
|
>
|
|
{{ t('projects.projectDetail.backToProjects') }}
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- Title overlay at bottom -->
|
|
<div class="absolute bottom-0 left-0 right-0 z-10 px-4 sm:px-6 lg:px-8 pb-10">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<UBadge v-if="project.category" variant="subtle" size="md">{{ project.category }}</UBadge>
|
|
<span v-if="project.date" class="text-sm text-gray-500 dark:text-gray-400 font-mono">{{ project.date }}</span>
|
|
</div>
|
|
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white max-w-3xl tracking-tight">{{ project.title }}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Content area -->
|
|
<section class="py-12 md:py-16 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-16">
|
|
<!-- Main Content -->
|
|
<div class="lg:col-span-2 space-y-14">
|
|
<!-- Description -->
|
|
<div>
|
|
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 leading-relaxed mb-8">{{ project.description }}</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-wrap gap-3">
|
|
<UButton
|
|
v-if="project.demoUrl"
|
|
:to="project.demoUrl"
|
|
target="_blank"
|
|
icon="i-lucide-external-link"
|
|
size="lg"
|
|
class="font-semibold"
|
|
>
|
|
{{ t('projects.projectDetail.viewDemo') }}
|
|
</UButton>
|
|
|
|
<UButton
|
|
v-if="project.githubUrl"
|
|
:to="project.githubUrl"
|
|
target="_blank"
|
|
variant="soft"
|
|
icon="i-lucide-github"
|
|
size="lg"
|
|
>
|
|
{{ t('projects.projectDetail.sourceCode') }}
|
|
</UButton>
|
|
|
|
<UButton
|
|
v-for="button in project.buttons"
|
|
:key="button.title"
|
|
:to="button.link"
|
|
target="_blank"
|
|
variant="outline"
|
|
icon="i-lucide-external-link"
|
|
size="lg"
|
|
>
|
|
{{ button.title }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About -->
|
|
<div class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/60 dark:bg-gray-900/40 backdrop-blur-sm p-7 sm:p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-3">
|
|
<div class="w-1 h-6 rounded-full bg-brand-500" />
|
|
{{ t('projects.projectDetail.aboutProject') }}
|
|
</h2>
|
|
<p class="text-gray-500 dark:text-gray-400 leading-relaxed text-lg">
|
|
{{ project.longDescription || project.description }}
|
|
</p>
|
|
|
|
<!-- Features -->
|
|
<div v-if="project.features" class="mt-8">
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-5">{{ t('projects.projectDetail.keyFeatures') }}</h3>
|
|
<ul class="space-y-3">
|
|
<li v-for="feature in project.features" :key="feature" class="flex items-start gap-3 group">
|
|
<div class="w-6 h-6 rounded-lg bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-brand-500/20 transition-colors">
|
|
<UIcon name="i-lucide-check" class="text-brand-500 w-3.5 h-3.5" />
|
|
</div>
|
|
<span class="text-gray-600 dark:text-gray-300">{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technologies -->
|
|
<div v-if="project.technologies.length" class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/60 dark:bg-gray-900/40 backdrop-blur-sm p-7 sm:p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-3">
|
|
<div class="w-1 h-6 rounded-full bg-brand-500" />
|
|
{{ t('projects.projectDetail.technologiesUsed') }}
|
|
</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
<TechBadge v-for="tech in project.technologies" :key="tech" :tech="tech" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gallery Thumbnails -->
|
|
<div v-if="project.gallery?.length" class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/60 dark:bg-gray-900/40 backdrop-blur-sm p-7 sm:p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-3">
|
|
<div class="w-1 h-6 rounded-full bg-brand-500" />
|
|
{{ t('projects.projectDetail.gallery') }}
|
|
</h2>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
<button
|
|
v-for="(image, index) in project.gallery"
|
|
:key="index"
|
|
class="relative rounded-xl overflow-hidden group cursor-pointer border border-gray-200/80 dark:border-gray-800/50 aspect-video"
|
|
@click="galleryRef?.openGallery(index)"
|
|
>
|
|
<NuxtImg
|
|
:src="image"
|
|
:alt="`${project.title} - Image ${index + 1}`"
|
|
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
loading="lazy"
|
|
format="webp"
|
|
/>
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-center justify-center">
|
|
<UIcon name="i-lucide-zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xl" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sticky top-24 space-y-6">
|
|
<!-- Project Info Card -->
|
|
<div class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/60 dark:bg-gray-900/40 backdrop-blur-sm p-6">
|
|
<h3 class="font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-2">
|
|
<UIcon name="i-lucide-info" class="text-brand-500 w-4 h-4" />
|
|
{{ t('projects.projectDetail.projectInfo') }}
|
|
</h3>
|
|
|
|
<div class="space-y-4 text-sm">
|
|
<div v-if="project.date" class="flex justify-between items-center py-3 border-b border-gray-200/60 dark:border-gray-800/40">
|
|
<span class="text-gray-500 dark:text-gray-400">{{ t('projects.projectDetail.date') }}</span>
|
|
<span class="font-semibold text-gray-900 dark:text-white font-mono text-xs">{{ project.date }}</span>
|
|
</div>
|
|
<div v-if="project.category" class="flex justify-between items-center py-3">
|
|
<span class="text-gray-500 dark:text-gray-400">{{ t('projects.projectDetail.category') }}</span>
|
|
<UBadge variant="subtle" size="xs">{{ project.category }}</UBadge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Related Projects -->
|
|
<div v-if="relatedProjects.length > 0" class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/60 dark:bg-gray-900/40 backdrop-blur-sm p-6">
|
|
<h3 class="font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-2">
|
|
<UIcon name="i-lucide-layers" class="text-brand-500 w-4 h-4" />
|
|
{{ t('projects.projectDetail.relatedProjects') }}
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<NuxtLink
|
|
v-for="related in relatedProjects"
|
|
:key="related.id"
|
|
:to="`/project/${related.id}`"
|
|
class="flex gap-3 p-3 rounded-xl border border-transparent hover:border-brand-500/20 hover:bg-brand-500/5 transition-all duration-200 group"
|
|
>
|
|
<NuxtImg
|
|
v-if="related.image"
|
|
:src="related.image"
|
|
:alt="related.title"
|
|
width="60"
|
|
height="45"
|
|
class="rounded-lg object-cover shrink-0"
|
|
loading="lazy"
|
|
/>
|
|
<div class="min-w-0">
|
|
<p class="font-semibold text-sm text-gray-900 dark:text-white truncate group-hover:text-brand-500 transition-colors">{{ related.title }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mt-1">{{ related.description }}</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Modal -->
|
|
<ProjectGallery
|
|
v-if="project.gallery?.length"
|
|
ref="gallery"
|
|
:gallery="project.gallery"
|
|
:project-title="project.title"
|
|
/>
|
|
</div>
|
|
</template>
|