chore(initial): ajout de la structure de base du projet avec Vite et Vue 3
- Création des fichiers de configuration pour ESLint, Prettier, et Tailwind CSS - Ajout de la configuration de l'éditeur avec .editorconfig - Mise en place de la structure de répertoires pour les composants, les pages, et les données - Intégration de la gestion des langues avec vue-i18n - Ajout de la configuration de Vite et des dépendances nécessaires - Création des fichiers de localisation pour l'anglais et le français - Ajout de la structure de base pour le portfolio avec des exemples de projets - Mise en place des composants de base pour l'interface utilisateur
This commit is contained in:
Mr¤KayJayDee
257
src/views/AboutPage.vue
Normal file
257
src/views/AboutPage.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useI18n } from '@/composables/useI18n'
|
||||
import TechBadge from '@/components/TechBadge.vue'
|
||||
import { techStack } from '@/data/techstack'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// SEO
|
||||
useSeo({
|
||||
title: t('seo.about.title'),
|
||||
description: t('seo.about.description')
|
||||
})
|
||||
|
||||
const techCategories = computed(() => [
|
||||
{
|
||||
key: 'programming',
|
||||
title: t('about.skills.programming'),
|
||||
icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
|
||||
color: 'var(--color-primary)'
|
||||
},
|
||||
{
|
||||
key: 'front',
|
||||
title: t('about.skills.frontend'),
|
||||
icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01',
|
||||
color: 'var(--color-secondary)'
|
||||
},
|
||||
{
|
||||
key: 'database',
|
||||
title: t('about.skills.backend'),
|
||||
icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4',
|
||||
color: 'var(--color-success)'
|
||||
},
|
||||
{
|
||||
key: 'devtools',
|
||||
title: t('about.skills.tools'),
|
||||
icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
|
||||
color: 'var(--color-warning)'
|
||||
}
|
||||
])
|
||||
|
||||
const approachCards = computed(() => [
|
||||
{
|
||||
title: t('about.approach.performance.title'),
|
||||
description: t('about.approach.performance.description'),
|
||||
icon: 'M13 10V3L4 14h7v7l9-11h-7z',
|
||||
color: 'var(--color-primary)'
|
||||
},
|
||||
{
|
||||
title: t('about.approach.architecture.title'),
|
||||
description: t('about.approach.architecture.description'),
|
||||
icon: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4',
|
||||
color: 'var(--color-secondary)'
|
||||
},
|
||||
{
|
||||
title: t('about.approach.quality.title'),
|
||||
description: t('about.approach.quality.description'),
|
||||
icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
|
||||
color: 'var(--color-success)'
|
||||
},
|
||||
{
|
||||
title: t('about.approach.collaboration.title'),
|
||||
description: t('about.approach.collaboration.description'),
|
||||
icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
|
||||
color: 'var(--color-warning)'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content animate-fade-in-up">
|
||||
<h1 class="hero-title">
|
||||
{{ t('about.title') }}
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
{{ t('about.subtitle') }}
|
||||
</p>
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="space-y-lg text-xl text-secondary">
|
||||
<p>
|
||||
{{ t('about.intro.content') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ t('about.experience.content') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('about.skills.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto">
|
||||
{{ t('about.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tech Categories Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-xl mb-2xl">
|
||||
<div v-for="category in techCategories" :key="category.key" class="card animate-fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center mb-lg">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md"
|
||||
:style="{ background: category.color, color: 'var(--text-inverse)' }">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="category.icon"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold">{{ category.title }}</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-sm">
|
||||
<TechBadge v-for="tech in techStack[category.key as keyof typeof techStack]" :key="tech.name"
|
||||
:tech="tech" :show-level="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Operating Systems -->
|
||||
<div class="card animate-fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center mb-lg">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md"
|
||||
style="background: var(--color-primary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold">{{ t('about.skills.systems') }}</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-sm">
|
||||
<TechBadge v-for="tech in techStack.operating_systems" :key="tech.name" :tech="tech"
|
||||
:show-level="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Approach Section -->
|
||||
<section class="section" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('about.approach.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto">
|
||||
{{ t('about.approach.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
|
||||
<div v-for="(card, index) in approachCards" :key="index" class="card animate-fade-in-up"
|
||||
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
||||
<div class="card-body">
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md flex-shrink-0"
|
||||
:style="{ background: card.color, color: 'var(--text-inverse)' }">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="card.icon"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ card.title }}</h3>
|
||||
<p class="text-secondary">{{ card.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2 class="mb-lg">{{ t('about.cta.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto mb-2xl">
|
||||
{{ t('about.cta.description') }}
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-md justify-center">
|
||||
<RouterLink to="/contact" class="btn btn-primary btn-lg">
|
||||
{{ t('about.cta.button') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
<RouterLink to="/projects" class="btn btn-secondary btn-lg">
|
||||
{{ t('home.cta.viewProjects') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6">
|
||||
</path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom animations with delays */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Spacing utilities */
|
||||
.space-y-lg>*+* {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
502
src/views/ContactPage.vue
Normal file
502
src/views/ContactPage.vue
Normal file
@@ -0,0 +1,502 @@
|
||||
<script setup lang="ts">
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useI18n } from '@/composables/useI18n'
|
||||
import { useSiteConfig } from '@/composables/useSiteConfig'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { siteConfig } = useSiteConfig()
|
||||
|
||||
// SEO
|
||||
useSeo({
|
||||
title: t('seo.contact.title'),
|
||||
description: t('seo.contact.description'),
|
||||
ogTitle: t('seo.contact.title'),
|
||||
ogDescription: t('seo.contact.description')
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="contact-page">
|
||||
<!-- Hero Section -->
|
||||
<section class="contact-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content text-center">
|
||||
<h1 class="hero-title">{{ t('contact.title') }}</h1>
|
||||
<p class="hero-subtitle">
|
||||
{{ t('contact.subtitle') }}
|
||||
</p>
|
||||
|
||||
<!-- Contact Stats -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">24-48h</div>
|
||||
<div class="stat-label">{{ t('contact.stats.responseTime') }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">100%</div>
|
||||
<div class="stat-label">{{ t('contact.stats.satisfaction') }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">Remote</div>
|
||||
<div class="stat-label">{{ t('contact.stats.collaboration') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Info Section -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2xl max-w-4xl mx-auto">
|
||||
<!-- Contact Methods -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="text-2xl font-bold mb-lg">{{ t('contact.quickContact') }}</h2>
|
||||
<div class="space-y-md">
|
||||
<!-- Email -->
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" style="background: var(--color-primary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ t('contact.methods.email') }}</div>
|
||||
<a :href="siteConfig.social.find(s => s.icon === 'email')?.url" class="contact-link">
|
||||
{{ siteConfig.contact.email }}
|
||||
</a>
|
||||
<div class="contact-description">{{ t('contact.methods.responseTime') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" style="background: var(--color-info); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ t('contact.methods.phone') }}</div>
|
||||
<a :href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`" class="contact-link">
|
||||
{{ siteConfig.contact.phone }}
|
||||
</a>
|
||||
<div class="contact-description">{{ t('contact.methods.availability') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" style="background: var(--color-secondary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ t('contact.methods.location') }}</div>
|
||||
<div class="contact-text">{{ siteConfig.contact.location }}</div>
|
||||
<div class="contact-description">{{ t('contact.methods.availability') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="text-2xl font-bold mb-lg">{{ t('contact.findMeOn') }}</h2>
|
||||
<div class="space-y-sm">
|
||||
<a v-for="social in siteConfig.social.filter(s => s.icon !== 'email')" :key="social.name"
|
||||
:href="social.url" target="_blank" rel="noopener noreferrer" class="social-link">
|
||||
<div class="social-icon">
|
||||
<!-- GitHub Icon -->
|
||||
<svg v-if="social.icon === 'github'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.237 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
|
||||
<!-- LinkedIn Icon -->
|
||||
<svg v-else-if="social.icon === 'linkedin'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||
</svg>
|
||||
|
||||
<!-- Discord Icon -->
|
||||
<svg v-else-if="social.icon === 'discord'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0190 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9460 2.4189-2.1568 2.4189Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="social-name">{{ social.name }}</span>
|
||||
<svg class="social-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="section" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('contact.faq.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto">
|
||||
{{ t('contact.faq.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-xl">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
||||
style="background: var(--color-success); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ t('contact.faq.responseTime.title') }}</h3>
|
||||
<p class="text-secondary">{{ t('contact.faq.responseTime.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
||||
style="background: var(--color-primary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ t('contact.faq.projectTypes.title') }}</h3>
|
||||
<p class="text-secondary">{{ t('contact.faq.projectTypes.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
||||
style="background: var(--color-secondary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ t('contact.faq.collaboration.title') }}</h3>
|
||||
<p class="text-secondary">{{ t('contact.faq.collaboration.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Contact Page Styles */
|
||||
.contact-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.contact-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
max-width: 500px;
|
||||
margin: var(--space-2xl) auto 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Contact Methods */
|
||||
.contact-method {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-method:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
group: true;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-icon {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.social-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-name {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.social-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-arrow {
|
||||
color: var(--text-inverse);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.space-y-sm>*+* {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.space-y-md>*+* {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.gap-xl {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.gap-2xl {
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mb-lg {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.mb-md {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.mb-2xl {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Removed hardcoded colors - using CSS variables instead */
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
</style>
|
||||
262
src/views/HomePage.vue
Normal file
262
src/views/HomePage.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useI18n } from '@/composables/useI18n'
|
||||
import { projects } from '@/data/projects'
|
||||
import ProjectCard from '@/components/ProjectCard.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// SEO
|
||||
useSeo({
|
||||
title: t('seo.home.title'),
|
||||
description: t('seo.home.description')
|
||||
})
|
||||
|
||||
// Featured projects
|
||||
const featuredProjects = computed(() => {
|
||||
return projects.filter(project => project.featured).slice(0, 3)
|
||||
})
|
||||
|
||||
// Services data
|
||||
const services = computed(() => [
|
||||
{
|
||||
icon: '💻',
|
||||
title: t('home.services.webDev.title'),
|
||||
description: t('home.services.webDev.description')
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: t('home.services.mobileApps.title'),
|
||||
description: t('home.services.mobileApps.description')
|
||||
},
|
||||
{
|
||||
icon: '🚀',
|
||||
title: t('home.services.optimization.title'),
|
||||
description: t('home.services.optimization.description')
|
||||
},
|
||||
{
|
||||
icon: '🛠️',
|
||||
title: t('home.services.maintenance.title'),
|
||||
description: t('home.services.maintenance.description')
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content animate-fade-in-up">
|
||||
<h1 class="hero-title">
|
||||
{{ t('home.title') }}
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
{{ t('home.subtitle') }}
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-md justify-center">
|
||||
<RouterLink to="/projects" class="btn btn-primary btn-lg">
|
||||
{{ t('home.cta.viewProjects') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6">
|
||||
</path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
<RouterLink to="/contact" class="btn btn-secondary btn-lg">
|
||||
{{ t('home.cta.contactMe') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
|
||||
</path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Projects Section -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('home.featuredProjects.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto">
|
||||
{{ t('home.featuredProjects.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-xl mb-2xl">
|
||||
<ProjectCard v-for="project in featuredProjects" :key="project.id" :project="project"
|
||||
class="animate-fade-in-up" />
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<RouterLink to="/projects" class="btn btn-secondary">
|
||||
{{ t('home.featuredProjects.viewAll') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="section" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('home.services.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto">
|
||||
{{ t('home.services.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-xl">
|
||||
<div v-for="(service, index) in services" :key="service.title" class="card text-center animate-fade-in-up"
|
||||
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
||||
<div class="card-body">
|
||||
<div class="text-4xl mb-lg">{{ service.icon }}</div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ service.title }}</h3>
|
||||
<p class="text-secondary">{{ service.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2 class="mb-lg">{{ t('home.cta2.title') }}</h2>
|
||||
<p class="text-xl text-secondary max-w-2xl mx-auto mb-2xl">
|
||||
{{ t('home.cta2.subtitle') }}
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-md justify-center">
|
||||
<RouterLink to="/contact" class="btn btn-primary btn-lg">
|
||||
{{ t('home.cta2.startProject') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
|
||||
</path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
<RouterLink to="/about" class="btn btn-secondary btn-lg">
|
||||
{{ t('home.cta2.learnMore') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom animations with delays */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.lg\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bottom-8 {
|
||||
bottom: 2rem;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
43% {
|
||||
transform: translate3d(-50%, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(-50%, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-50%, -4px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
764
src/views/ProjectDetailPage.vue
Normal file
764
src/views/ProjectDetailPage.vue
Normal file
@@ -0,0 +1,764 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useAssets } from '@/composables/useAssets'
|
||||
import { projects } from '@/data/projects'
|
||||
import TechBadge from '@/components/TechBadge.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { getImageUrl } = useAssets()
|
||||
|
||||
// Find project by ID
|
||||
const project = computed(() => {
|
||||
const id = route.params.id as string
|
||||
return projects.find(p => p.id === id)
|
||||
})
|
||||
|
||||
// Related projects
|
||||
const relatedProjects = computed(() => {
|
||||
if (!project.value) return []
|
||||
|
||||
return projects
|
||||
.filter(p => p.id !== project.value?.id && p.category === project.value?.category)
|
||||
.slice(0, 3)
|
||||
})
|
||||
|
||||
// SEO
|
||||
const seoTitle = computed(() => project.value ? `${project.value.title} - Killian` : 'Projet - Killian')
|
||||
const seoDescription = computed(() => project.value?.description || 'Découvrez ce projet en détail')
|
||||
|
||||
useSeo({
|
||||
title: seoTitle.value,
|
||||
description: seoDescription.value
|
||||
})
|
||||
|
||||
// Navigation
|
||||
const goBack = () => {
|
||||
router.push('/projects')
|
||||
}
|
||||
|
||||
const shareProject = () => {
|
||||
if (navigator.share && project.value) {
|
||||
navigator.share({
|
||||
title: project.value.title,
|
||||
text: project.value.description,
|
||||
url: window.location.href
|
||||
})
|
||||
} else {
|
||||
// Fallback: copy to clipboard
|
||||
navigator.clipboard.writeText(window.location.href)
|
||||
}
|
||||
}
|
||||
|
||||
// Check if project exists
|
||||
onMounted(() => {
|
||||
if (!project.value) {
|
||||
router.push('/projects')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-if="project" class="project-detail-page">
|
||||
<!-- Hero Section - Redesigned -->
|
||||
<section class="project-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<!-- Navigation -->
|
||||
<nav class="breadcrumb">
|
||||
<button @click="goBack" class="breadcrumb-link">
|
||||
<svg class="breadcrumb-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
Retour aux projets
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="hero-grid">
|
||||
<!-- Project Image -->
|
||||
<div class="project-image-container">
|
||||
<img v-if="project.image" :src="getImageUrl(project.image)" :alt="project.title" class="project-image">
|
||||
<div class="image-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- Project Info -->
|
||||
<div class="project-info">
|
||||
<div class="project-meta">
|
||||
<span v-if="project.category" class="project-category">{{ project.category }}</span>
|
||||
<span v-if="project.date" class="project-date">{{ project.date }}</span>
|
||||
</div>
|
||||
|
||||
<h1 class="project-title">{{ project.title }}</h1>
|
||||
<p class="project-description">{{ project.description }}</p>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="project-actions">
|
||||
<a v-if="project.demoUrl" :href="project.demoUrl" target="_blank" rel="noopener noreferrer"
|
||||
class="btn btn-primary">
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
Voir la démo
|
||||
</a>
|
||||
|
||||
<a v-if="project.githubUrl" :href="project.githubUrl" target="_blank" rel="noopener noreferrer"
|
||||
class="btn btn-secondary">
|
||||
<svg class="btn-icon" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
Code source
|
||||
</a>
|
||||
|
||||
<!-- Buttons from project data -->
|
||||
<a v-for="button in project.buttons" :key="button.title" :href="button.link" target="_blank"
|
||||
rel="noopener noreferrer" class="btn btn-outline">
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
{{ button.title }}
|
||||
</a>
|
||||
|
||||
<button @click="shareProject" class="btn btn-ghost">
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z">
|
||||
</path>
|
||||
</svg>
|
||||
Partager
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="project-content">
|
||||
<div class="container">
|
||||
<div class="content-grid">
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Project Details -->
|
||||
<div class="content-section">
|
||||
<h2 class="section-title">À propos du projet</h2>
|
||||
<div class="section-content">
|
||||
<p class="project-long-description">
|
||||
{{ project.longDescription || project.description }}
|
||||
</p>
|
||||
|
||||
<!-- Features -->
|
||||
<div v-if="project.features" class="features-list">
|
||||
<h3 class="features-title">Fonctionnalités principales</h3>
|
||||
<ul class="features">
|
||||
<li v-for="feature in project.features" :key="feature" class="feature-item">
|
||||
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
{{ feature }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technologies -->
|
||||
<div v-if="project.technologies" class="content-section">
|
||||
<h2 class="section-title">Technologies utilisées</h2>
|
||||
<div class="section-content">
|
||||
<div class="tech-grid">
|
||||
<TechBadge v-for="tech in project.technologies" :key="tech" :tech="tech" class="tech-item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gallery -->
|
||||
<div v-if="project.gallery" class="content-section">
|
||||
<h2 class="section-title">Galerie</h2>
|
||||
<div class="section-content">
|
||||
<div class="gallery-grid">
|
||||
<div v-for="(image, index) in project.gallery" :key="index" class="gallery-item">
|
||||
<img :src="getImageUrl(image)" :alt="`${project.title} - Image ${index + 1}`" class="gallery-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<!-- Project Info Card -->
|
||||
<div class="info-card">
|
||||
<h3 class="info-title">Informations du projet</h3>
|
||||
<div class="info-list">
|
||||
<div v-if="project.date" class="info-item">
|
||||
<span class="info-label">Date</span>
|
||||
<span class="info-value">{{ project.date }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="project.category" class="info-item">
|
||||
<span class="info-label">Catégorie</span>
|
||||
<span class="info-value">{{ project.category }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="project.status" class="info-item">
|
||||
<span class="info-label">Statut</span>
|
||||
<span class="info-value">{{ project.status }}</span>
|
||||
</div>
|
||||
|
||||
<!-- <div v-if="project.duration" class="info-item">
|
||||
<span class="info-label">Durée</span>
|
||||
<span class="info-value">{{ project.duration }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Projects -->
|
||||
<div v-if="relatedProjects.length > 0" class="related-projects">
|
||||
<h3 class="related-title">Projets similaires</h3>
|
||||
<div class="related-list">
|
||||
<router-link v-for="relatedProject in relatedProjects" :key="relatedProject.id"
|
||||
:to="`/projects/${relatedProject.id}`" class="related-item">
|
||||
<img v-if="relatedProject.image" :src="getImageUrl(relatedProject.image)" :alt="relatedProject.title"
|
||||
class="related-image">
|
||||
<div class="related-content">
|
||||
<h4 class="related-project-title">{{ relatedProject.title }}</h4>
|
||||
<p class="related-project-description">{{ relatedProject.description }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Project Detail Page Styles - Redesigned */
|
||||
.project-detail-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section - New Layout */
|
||||
.project-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-2xl) 0 var(--space-4xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-fast);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.breadcrumb-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Hero Grid Layout */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 1fr;
|
||||
gap: var(--space-3xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Project Image Container */
|
||||
.project-image-container {
|
||||
position: relative;
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, rgba(37, 99, 235, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.project-image-container:hover .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Project Info */
|
||||
.project-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-category {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.project-date {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl));
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
margin-bottom: var(--space-lg);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: var(--line-height-relaxed);
|
||||
margin-bottom: var(--space-2xl);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.project-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Styles de boutons supprimés - utilisent maintenant les styles globaux */
|
||||
|
||||
/* Content Section */
|
||||
.project-content {
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: var(--space-4xl);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-bottom: var(--space-4xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xl);
|
||||
padding-bottom: var(--space-md);
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.project-long-description {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.features-list {
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
font-size: var(--font-size-base);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
transform: translateX(4px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-success);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Technologies */
|
||||
.tech-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: all var(--transition-fast);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Info Card */
|
||||
.info-card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: var(--space-xl);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Related Projects */
|
||||
.related-projects {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: var(--space-xl);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.related-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.related-item {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: var(--border-width) solid transparent;
|
||||
}
|
||||
|
||||
.related-item:hover {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.related-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.related-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.related-project-title {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.related-project-description {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: var(--space-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.project-image-container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project-hero {
|
||||
padding: var(--space-xl) 0 var(--space-2xl);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.project-actions .btn,
|
||||
.project-actions .btn-outline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.related-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.related-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-meta {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.project-category,
|
||||
.project-date {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.features {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
454
src/views/ProjectsPage.vue
Normal file
454
src/views/ProjectsPage.vue
Normal file
@@ -0,0 +1,454 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useI18n } from '@/composables/useI18n'
|
||||
import { projects } from '@/data/projects'
|
||||
import ProjectCard from '@/components/ProjectCard.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// SEO
|
||||
useSeo({
|
||||
title: t('seo.projects.title'),
|
||||
description: t('seo.projects.description')
|
||||
})
|
||||
|
||||
// Filters and search
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('all')
|
||||
const sortBy = ref('date')
|
||||
|
||||
// Get unique categories
|
||||
const categories = computed(() => {
|
||||
const cats = ['all', ...new Set(projects.map(p => p.category).filter(Boolean))]
|
||||
return cats
|
||||
})
|
||||
|
||||
// Filtered and sorted projects
|
||||
const filteredProjects = computed(() => {
|
||||
let filtered = projects
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
filtered = filtered.filter(project =>
|
||||
project.title.toLowerCase().includes(query) ||
|
||||
project.description.toLowerCase().includes(query) ||
|
||||
project.technologies?.some(tech => tech.toLowerCase().includes(query))
|
||||
)
|
||||
}
|
||||
|
||||
// Filter by category
|
||||
if (selectedCategory.value !== 'all') {
|
||||
filtered = filtered.filter(project => project.category === selectedCategory.value)
|
||||
}
|
||||
|
||||
// Sort projects
|
||||
if (sortBy.value === 'date') {
|
||||
filtered = filtered.sort((a, b) => {
|
||||
const dateA = parseInt(a.date || '0')
|
||||
const dateB = parseInt(b.date || '0')
|
||||
return dateB - dateA // Most recent first
|
||||
})
|
||||
} else if (sortBy.value === 'name') {
|
||||
filtered = filtered.sort((a, b) => a.title.localeCompare(b.title))
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
// Stats
|
||||
const totalProjects = computed(() => projects.length)
|
||||
const featuredProjects = computed(() => projects.filter(p => p.featured).length)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="projects-page">
|
||||
<!-- Hero Section -->
|
||||
<section class="projects-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content text-center">
|
||||
<h1 class="hero-title">{{ t('projects.title') }}</h1>
|
||||
<p class="hero-subtitle">
|
||||
{{ t('projects.subtitle') }}
|
||||
</p>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ totalProjects }}</div>
|
||||
<div class="stat-label">{{ t('nav.projects') }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ featuredProjects }}</div>
|
||||
<div class="stat-label">{{ t('home.featuredProjects.title') }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ categories.length - 1 }}</div>
|
||||
<div class="stat-label">{{ t('projects.categories.all') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Filters Section -->
|
||||
<section class="filters-section">
|
||||
<div class="container">
|
||||
<div class="filters-container">
|
||||
<!-- Search -->
|
||||
<div class="search-container">
|
||||
<div class="search-input-wrapper">
|
||||
<svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input v-model="searchQuery" type="text" :placeholder="t('common.search') + '...'" class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Filter -->
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">{{ t('common.filter') }}</label>
|
||||
<select v-model="selectedCategory" class="filter-select">
|
||||
<option value="all">{{ t('projects.categories.all') }}</option>
|
||||
<option v-for="category in categories.slice(1)" :key="category" :value="category">
|
||||
{{ t(`projects.categories.${category?.replace(/\s+/g, '').toLowerCase()}`) || category }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Sort -->
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">{{ t('common.sort') }}</label>
|
||||
<select v-model="sortBy" class="filter-select">
|
||||
<option value="date">Date</option>
|
||||
<option value="name">{{ t('nav.projects') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<section class="projects-grid-section">
|
||||
<div class="container">
|
||||
<!-- Results Info -->
|
||||
<div class="results-info">
|
||||
<p class="results-text">
|
||||
{{ filteredProjects.length }} {{ t('nav.projects').toLowerCase() }}{{ filteredProjects.length > 1 ? 's' : ''
|
||||
}} {{ t('common.search').toLowerCase() }}{{ filteredProjects.length > 1 ? 's' : '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<div v-if="filteredProjects.length > 0" class="projects-grid">
|
||||
<ProjectCard v-for="project in filteredProjects" :key="project.id" :project="project"
|
||||
class="project-card-item" />
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
<div v-else class="no-results">
|
||||
<div class="no-results-content">
|
||||
<svg class="no-results-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.291-1.1-5.5-2.709">
|
||||
</path>
|
||||
</svg>
|
||||
<h3 class="no-results-title">{{ t('projects.noResults.title') }}</h3>
|
||||
<p class="no-results-description">
|
||||
{{ t('projects.noResults.description') }}
|
||||
</p>
|
||||
<button @click="searchQuery = ''; selectedCategory = 'all'" class="btn btn-primary">
|
||||
{{ t('common.reset') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Projects Page Styles */
|
||||
.projects-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.projects-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.projects-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(var(--font-size-4xl), 4vw, var(--font-size-5xl));
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
margin-bottom: var(--space-lg);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-2xl);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-xl);
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* Filters Section */
|
||||
.filters-section {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-xl) 0;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-lg);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: var(--space-md);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: var(--space-md) var(--space-md) var(--space-md) 48px;
|
||||
font-size: var(--font-size-base);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: var(--space-md);
|
||||
font-size: var(--font-size-base);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
/* Projects Grid Section */
|
||||
.projects-grid-section {
|
||||
padding: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
.results-info {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.results-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.project-card-item {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* No Results */
|
||||
.no-results {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.no-results-content {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 0 auto var(--space-lg);
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.no-results-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.filters-section {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user