Compare commits
2 Commits
b9dc90df7d
...
f90f2bafa4
| Author | SHA1 | Date | |
|---|---|---|---|
|
f90f2bafa4 | ||
|
|
8375640c1e |
@@ -14,6 +14,8 @@
|
|||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:locale" content="fr_FR">
|
<meta property="og:locale" content="fr_FR">
|
||||||
<title>Killian - Développeur Full Stack</title>
|
<title>Killian - Développeur Full Stack</title>
|
||||||
|
<script defer src="https://umami.killiandalcin.fr/script.js"
|
||||||
|
data-website-id="bffa2341-3ab2-4c2c-96c9-f83ea7225a1b"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
BIN
src/assets/images/fiverr/discord_bot.jpg
Normal file
BIN
src/assets/images/fiverr/discord_bot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
BIN
src/assets/images/fiverr/minecraft_plugin.jpg
Normal file
BIN
src/assets/images/fiverr/minecraft_plugin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
src/assets/images/fiverr/telegram_bot.jpg
Normal file
BIN
src/assets/images/fiverr/telegram_bot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 904 KiB |
BIN
src/assets/images/fiverr/website.jpg
Normal file
BIN
src/assets/images/fiverr/website.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 958 KiB |
53
src/components/ContactMethod.vue
Normal file
53
src/components/ContactMethod.vue
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="contact-icon" :class="iconClass">
|
||||||
|
<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="iconPath" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
<div class="contact-title">{{ title }}</div>
|
||||||
|
<component :is="linkComponent" :href="href" :class="linkClass">
|
||||||
|
{{ text }}
|
||||||
|
</component>
|
||||||
|
<div class="contact-description">{{ description }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
type: 'email' | 'phone' | 'location'
|
||||||
|
title: string
|
||||||
|
text: string
|
||||||
|
description: string
|
||||||
|
href?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
const iconClass = computed(() => `contact-icon-${props.type}`)
|
||||||
|
|
||||||
|
const linkComponent = computed(() => props.href ? 'a' : 'div')
|
||||||
|
|
||||||
|
const linkClass = computed(() => props.href ? 'contact-link' : 'contact-text')
|
||||||
|
|
||||||
|
const iconPath = computed(() => {
|
||||||
|
switch (props.type) {
|
||||||
|
case 'email':
|
||||||
|
return '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'
|
||||||
|
case 'phone':
|
||||||
|
return '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'
|
||||||
|
case 'location':
|
||||||
|
return 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'
|
||||||
|
default:
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './styles/ContactMethod.css';
|
||||||
|
</style>
|
||||||
32
src/components/FiverrCta.vue
Normal file
32
src/components/FiverrCta.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<section class="cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content text-center">
|
||||||
|
<h2 class="cta-title">{{ title }}</h2>
|
||||||
|
<p class="cta-subtitle">{{ subtitle }}</p>
|
||||||
|
<a :href="ctaUrl" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
|
||||||
|
{{ ctaText }}
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
subtitle: string
|
||||||
|
ctaUrl: string
|
||||||
|
ctaText: string
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<Props>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './styles/FiverrCta.css';
|
||||||
|
</style>
|
||||||
50
src/components/FiverrHero.vue
Normal file
50
src/components/FiverrHero.vue
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<section class="fiverr-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-content text-center">
|
||||||
|
<h1 class="hero-title">{{ title }}</h1>
|
||||||
|
<p class="hero-subtitle">{{ subtitle }}</p>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div v-for="stat in stats" :key="stat.label" class="stat-item">
|
||||||
|
<div class="stat-number">{{ stat.number }}</div>
|
||||||
|
<div class="stat-label">{{ stat.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA Button -->
|
||||||
|
<div class="hero-cta">
|
||||||
|
<a :href="ctaUrl" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
|
||||||
|
{{ ctaText }}
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
interface Stat {
|
||||||
|
number: string | number
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
subtitle: string
|
||||||
|
stats: Stat[]
|
||||||
|
ctaUrl: string
|
||||||
|
ctaText: string
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<Props>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './styles/FiverrHero.css';
|
||||||
|
</style>
|
||||||
103
src/components/FiverrServiceCard.vue
Normal file
103
src/components/FiverrServiceCard.vue
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<article class="card group service-card">
|
||||||
|
<!-- Image -->
|
||||||
|
<div class="service-image">
|
||||||
|
<img :src="imageUrl" :alt="title" loading="lazy">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="card-body">
|
||||||
|
<!-- Price & Status -->
|
||||||
|
<div class="service-header">
|
||||||
|
<span class="badge badge-primary">{{ price }}</span>
|
||||||
|
<span :class="statusBadgeClass">{{ statusText }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<h3 class="service-title">{{ title }}</h3>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
<p class="service-description">{{ description }}</p>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<div class="features-list">
|
||||||
|
<div class="features-title">{{ featuresTitle }}</div>
|
||||||
|
<ul class="features-items">
|
||||||
|
<li v-for="(feature, index) in displayedFeatures" :key="index" 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" />
|
||||||
|
</svg>
|
||||||
|
{{ feature }}
|
||||||
|
</li>
|
||||||
|
<li v-if="hasMoreFeatures" class="more-features">
|
||||||
|
+{{ remainingFeaturesCount }} {{ moreFeaturesText }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action -->
|
||||||
|
<div class="service-actions">
|
||||||
|
<a v-if="isAvailable" :href="url" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm">
|
||||||
|
{{ orderText }}
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<button v-else class="btn btn-secondary btn-sm" disabled>
|
||||||
|
{{ learnMoreText }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
price: string
|
||||||
|
url: string
|
||||||
|
imageUrl: string
|
||||||
|
features: string[]
|
||||||
|
featuresTitle: string
|
||||||
|
orderText: string
|
||||||
|
learnMoreText: string
|
||||||
|
moreFeaturesText: string
|
||||||
|
comingSoonText: string
|
||||||
|
availableText: string
|
||||||
|
maxFeatures?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
maxFeatures: 5
|
||||||
|
})
|
||||||
|
|
||||||
|
const isAvailable = computed(() => props.url !== '#')
|
||||||
|
|
||||||
|
const displayedFeatures = computed(() =>
|
||||||
|
props.features.slice(0, props.maxFeatures)
|
||||||
|
)
|
||||||
|
|
||||||
|
const hasMoreFeatures = computed(() =>
|
||||||
|
props.features.length > props.maxFeatures
|
||||||
|
)
|
||||||
|
|
||||||
|
const remainingFeaturesCount = computed(() =>
|
||||||
|
props.features.length - props.maxFeatures
|
||||||
|
)
|
||||||
|
|
||||||
|
const statusText = computed(() =>
|
||||||
|
isAvailable.value ? props.availableText : props.comingSoonText
|
||||||
|
)
|
||||||
|
|
||||||
|
const statusBadgeClass = computed(() =>
|
||||||
|
isAvailable.value ? 'badge badge-success text-xs' : 'badge badge-warning text-xs'
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './styles/FiverrServiceCard.css';
|
||||||
|
</style>
|
||||||
@@ -24,65 +24,5 @@ const languages = [
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.language-switcher {
|
@import './styles/LanguageSwitcher.css';
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-switcher-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-xs);
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border-radius: var(--border-radius-lg);
|
|
||||||
padding: var(--space-xs);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-xs);
|
|
||||||
padding: var(--space-xs) var(--space-sm);
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: var(--border-radius-md);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-btn:hover {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-btn.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.flag {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-code {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile responsive */
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.lang-code {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-btn {
|
|
||||||
padding: var(--space-xs);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -36,32 +36,14 @@ const translatedCategory = computed(() => {
|
|||||||
<template>
|
<template>
|
||||||
<article class="card group">
|
<article class="card group">
|
||||||
<!-- Image -->
|
<!-- Image -->
|
||||||
<div class="relative overflow-hidden" style="aspect-ratio: 16/9;">
|
<div class="project-image">
|
||||||
<img :src="imageUrl" :alt="project.title"
|
<img :src="imageUrl" :alt="project.title" loading="lazy">
|
||||||
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" loading="lazy">
|
|
||||||
<!-- Overlay -->
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
||||||
<div class="absolute bottom-4 left-4 right-4">
|
|
||||||
<div v-if="project.buttons && project.buttons.length > 0" class="flex gap-2">
|
|
||||||
<a v-for="button in project.buttons" :key="button.title" :href="button.link" target="_blank"
|
|
||||||
rel="noopener noreferrer" class="btn btn-primary btn-sm" @click.stop>
|
|
||||||
{{ t(`projects.buttons.${button.title.toLowerCase().replace(/\s+/g, '')}`, button.title) }}
|
|
||||||
<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>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<!-- Category & Date -->
|
<!-- Category & Date -->
|
||||||
<div class="flex items-center justify-between mb-md">
|
<div class="project-meta">
|
||||||
<span v-if="project.category" class="badge badge-primary">
|
<span v-if="project.category" class="badge badge-primary">
|
||||||
{{ translatedCategory }}
|
{{ translatedCategory }}
|
||||||
</span>
|
</span>
|
||||||
@@ -71,17 +53,17 @@ const translatedCategory = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<h3 class="text-xl font-bold mb-md group-hover:text-primary transition-colors">
|
<h3 class="project-title">
|
||||||
{{ translatedTitle }}
|
{{ translatedTitle }}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<p class="text-secondary mb-lg line-clamp-3">
|
<p class="project-description">
|
||||||
{{ translatedDescription }}
|
{{ translatedDescription }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Technologies -->
|
<!-- Technologies -->
|
||||||
<div v-if="project.technologies && project.technologies.length > 0" class="flex flex-wrap gap-2 mb-lg">
|
<div v-if="project.technologies && project.technologies.length > 0" class="project-technologies">
|
||||||
<span v-for="tech in project.technologies.slice(0, 3)" :key="tech" class="badge badge-secondary text-xs">
|
<span v-for="tech in project.technologies.slice(0, 3)" :key="tech" class="badge badge-secondary text-xs">
|
||||||
{{ tech }}
|
{{ tech }}
|
||||||
</span>
|
</span>
|
||||||
@@ -91,7 +73,7 @@ const translatedCategory = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Action -->
|
<!-- Action -->
|
||||||
<div class="flex items-center justify-between">
|
<div class="project-actions">
|
||||||
<RouterLink :to="`/project/${project.id}`" class="btn btn-secondary btn-sm">
|
<RouterLink :to="`/project/${project.id}`" class="btn btn-secondary btn-sm">
|
||||||
{{ t('projects.buttons.viewProject') }}
|
{{ t('projects.buttons.viewProject') }}
|
||||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
@@ -104,155 +86,5 @@ const translatedCategory = computed(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Line clamp utility */
|
@import './styles/ProjectCard.css';
|
||||||
.line-clamp-3 {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom utilities */
|
|
||||||
.w-full {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-full {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.object-cover {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.absolute {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inset-0 {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-4 {
|
|
||||||
bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-4 {
|
|
||||||
left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-4 {
|
|
||||||
right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-xs {
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-sm {
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-xl {
|
|
||||||
font-size: var(--font-size-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-bold {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-medium {
|
|
||||||
font-weight: var(--font-weight-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-secondary {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-warning {
|
|
||||||
color: var(--color-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-hover\:text-primary {
|
|
||||||
transition: color var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group:hover .group-hover\:text-primary {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-colors {
|
|
||||||
transition: color var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-transform {
|
|
||||||
transition: transform var(--transition-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-opacity {
|
|
||||||
transition: opacity var(--transition-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration-300 {
|
|
||||||
transition-duration: 300ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-hover\:scale-110 {
|
|
||||||
transition: transform var(--transition-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group:hover .group-hover\:scale-110 {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.opacity-0 {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-hover\:opacity-100 {
|
|
||||||
transition: opacity var(--transition-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group:hover .group-hover\:opacity-100 {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow-hidden {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-1 {
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-2 {
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -99,38 +99,5 @@ const getLevelColor = (level: Technology['level']) => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tech-badge {
|
@import './styles/TechBadge.css';
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
padding: var(--space-sm) var(--space-md);
|
|
||||||
background: var(--bg-primary);
|
|
||||||
border: var(--border-width) solid var(--border-color);
|
|
||||||
border-radius: var(--border-radius-lg);
|
|
||||||
transition: all var(--transition-fast);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-badge:hover {
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-image {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-name {
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
font-weight: var(--font-weight-medium);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-level {
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
padding: var(--space-xs) var(--space-sm);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -23,46 +23,5 @@ const { isDark, toggleTheme } = useTheme()
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.theme-toggle {
|
@import './styles/ThemeToggle.css';
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--border-radius-lg);
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all var(--transition-fast);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--text-inverse);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
transition: all var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode styles */
|
|
||||||
:global(.dark) .theme-toggle {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.dark) .theme-toggle:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--text-inverse);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -12,7 +12,8 @@ const quickLinks = computed(() => [
|
|||||||
{ name: t('nav.home'), path: '/' },
|
{ name: t('nav.home'), path: '/' },
|
||||||
{ name: t('nav.projects'), path: '/projects' },
|
{ name: t('nav.projects'), path: '/projects' },
|
||||||
{ name: t('nav.about'), path: '/about' },
|
{ name: t('nav.about'), path: '/about' },
|
||||||
{ name: t('nav.contact'), path: '/contact' }
|
{ name: t('nav.contact'), path: '/contact' },
|
||||||
|
{ name: t('nav.fiverr'), path: '/fiverr' }
|
||||||
])
|
])
|
||||||
|
|
||||||
const services = computed(() => [
|
const services = computed(() => [
|
||||||
@@ -111,102 +112,5 @@ const services = computed(() => [
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Footer Base */
|
@import '../styles/AppFooter.css';
|
||||||
.footer {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
padding: var(--space-4xl) 0 var(--space-xl);
|
|
||||||
border-top: var(--border-width) solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer logo */
|
|
||||||
.footer-logo {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: var(--border-radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Brand */
|
|
||||||
.footer-brand {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Titles */
|
|
||||||
.footer-title {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Description */
|
|
||||||
.footer-description {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Copyright */
|
|
||||||
.footer-copyright {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Bottom */
|
|
||||||
.footer-bottom {
|
|
||||||
border-top: var(--border-width) solid var(--border-color);
|
|
||||||
padding-top: var(--space-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Social Links */
|
|
||||||
.social-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border: var(--border-width) solid var(--border-color);
|
|
||||||
border-radius: var(--border-radius-lg);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
transition: all var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--text-inverse);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
scale: 1.05;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Links */
|
|
||||||
.footer-link {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
transition: color var(--transition-fast);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-link:hover {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom utilities */
|
|
||||||
.space-y-sm>*+* {
|
|
||||||
margin-top: var(--space-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-w-md {
|
|
||||||
max-width: 28rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor-default {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.md\:col-span-2 {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:flex-row {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ const navigation = computed(() => [
|
|||||||
{ name: t('nav.projects'), path: '/projects' },
|
{ name: t('nav.projects'), path: '/projects' },
|
||||||
{ name: t('nav.about'), path: '/about' },
|
{ name: t('nav.about'), path: '/about' },
|
||||||
{ name: t('nav.contact'), path: '/contact' },
|
{ name: t('nav.contact'), path: '/contact' },
|
||||||
|
{ name: t('nav.fiverr'), path: '/fiverr' },
|
||||||
])
|
])
|
||||||
|
|
||||||
const toggleMenu = () => {
|
const toggleMenu = () => {
|
||||||
@@ -72,42 +73,5 @@ const toggleMenu = () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Header actions */
|
@import '../styles/AppHeader.css';
|
||||||
.header-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Logo styling */
|
|
||||||
.logo-image {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: var(--border-radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile responsive utilities */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.md\:flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation active state */
|
|
||||||
.nav-link.router-link-active {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link.router-link-active::after {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
100
src/components/styles/AppFooter.css
Normal file
100
src/components/styles/AppFooter.css
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
/* AppFooter Styles */
|
||||||
|
|
||||||
|
/* Footer Base */
|
||||||
|
.footer {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: var(--space-4xl) 0 var(--space-xl);
|
||||||
|
border-top: var(--border-width) solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer logo */
|
||||||
|
.footer-logo {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Brand */
|
||||||
|
.footer-brand {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Titles */
|
||||||
|
.footer-title {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Description */
|
||||||
|
.footer-description {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Copyright */
|
||||||
|
.footer-copyright {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Bottom */
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: var(--border-width) solid var(--border-color);
|
||||||
|
padding-top: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Social Links */
|
||||||
|
.social-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
scale: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Links */
|
||||||
|
.footer-link {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom utilities */
|
||||||
|
.space-y-sm > * + * {
|
||||||
|
margin-top: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-w-md {
|
||||||
|
max-width: 28rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-default {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.md\:col-span-2 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:flex-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
136
src/components/styles/AppHeader.css
Normal file
136
src/components/styles/AppHeader.css
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
/* AppHeader Styles */
|
||||||
|
|
||||||
|
/* Header container */
|
||||||
|
.header {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(var(--bg-primary-rgb), 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo */
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo styling */
|
||||||
|
.logo-image {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: var(--space-sm) 0;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active,
|
||||||
|
.nav-link.router-link-active {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active::after,
|
||||||
|
.nav-link.router-link-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80%;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header actions */
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile menu */
|
||||||
|
.mobile-menu {
|
||||||
|
display: none;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu .nav-link {
|
||||||
|
padding: var(--space-md);
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu .nav-link:hover {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile responsive utilities */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.md\:flex {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
80
src/components/styles/ContactMethod.css
Normal file
80
src/components/styles/ContactMethod.css
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
/* 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-icon-email {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon-phone {
|
||||||
|
background: var(--color-info);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon-location {
|
||||||
|
background: var(--color-secondary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link:hover {
|
||||||
|
color: var(--color-primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-text {
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-description {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-6 {
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-6 {
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
38
src/components/styles/FiverrCta.css
Normal file
38
src/components/styles/FiverrCta.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/* CTA Section */
|
||||||
|
.cta-section {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-section::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='%23e5e7eb' fill-opacity='0.3'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-title {
|
||||||
|
font-size: var(--font-size-4xl);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-subtitle {
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
line-height: var(--line-height-relaxed);
|
||||||
|
}
|
||||||
74
src/components/styles/FiverrHero.css
Normal file
74
src/components/styles/FiverrHero.css
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
/* Hero Section */
|
||||||
|
.fiverr-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiverr-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: var(--font-size-5xl);
|
||||||
|
font-weight: var(--font-weight-extrabold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
line-height: var(--line-height-tight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
max-width: 700px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
line-height: var(--line-height-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Grid */
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: var(--space-xl);
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
max-width: 500px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: var(--font-size-3xl);
|
||||||
|
font-weight: var(--font-weight-extrabold);
|
||||||
|
color: var(--color-primary);
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
margin-top: var(--space-xl);
|
||||||
|
}
|
||||||
95
src/components/styles/FiverrServiceCard.css
Normal file
95
src/components/styles/FiverrServiceCard.css
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
/* Service Card */
|
||||||
|
.service-card {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-image {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group:hover .service-image img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-title {
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group:hover .service-title {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-description {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-list {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-title {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-items {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
color: var(--color-success);
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-features {
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
63
src/components/styles/LanguageSwitcher.css
Normal file
63
src/components/styles/LanguageSwitcher.css
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
/* LanguageSwitcher Styles */
|
||||||
|
|
||||||
|
.language-switcher {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-switcher-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
padding: var(--space-xs);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-btn:hover {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-btn.active {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flag {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-code {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile responsive */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.lang-code {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-btn {
|
||||||
|
padding: var(--space-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
81
src/components/styles/ProjectCard.css
Normal file
81
src/components/styles/ProjectCard.css
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
/* Project Card Styles */
|
||||||
|
.project-image {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group:hover .project-image img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project overlay */
|
||||||
|
.project-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%, transparent 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group:hover .project-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-overlay-content {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project content */
|
||||||
|
.project-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group:hover .project-title {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-technologies {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
36
src/components/styles/TechBadge.css
Normal file
36
src/components/styles/TechBadge.css
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
/* TechBadge Styles */
|
||||||
|
|
||||||
|
.tech-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-badge:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-image {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
object-fit: contain;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-name {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-level {
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
}
|
||||||
44
src/components/styles/ThemeToggle.css
Normal file
44
src/components/styles/ThemeToggle.css
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
/* ThemeToggle Styles */
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode styles */
|
||||||
|
:global(.dark) .theme-toggle {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .theme-toggle:hover {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
export function useAssets() {
|
export function useAssets() {
|
||||||
// Pre-load all images using Vite's import.meta.glob
|
// Pre-load all images using Vite's import.meta.glob
|
||||||
const imageModules = import.meta.glob('../assets/images/*', { eager: true })
|
const imageModules = import.meta.glob('../assets/images/**/*', { eager: true })
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get image URL from assets folder
|
* Get image URL from assets folder
|
||||||
|
|||||||
@@ -11,6 +11,9 @@ export function useSiteConfig() {
|
|||||||
description: t('seo.home.description'),
|
description: t('seo.home.description'),
|
||||||
contact: {
|
contact: {
|
||||||
...baseSiteConfig.contact
|
...baseSiteConfig.contact
|
||||||
|
},
|
||||||
|
fiverr: {
|
||||||
|
...baseSiteConfig.fiverr
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,18 @@ export interface ContactInfo {
|
|||||||
location: string
|
location: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface FiverrService {
|
||||||
|
id: string
|
||||||
|
url: string
|
||||||
|
image: string
|
||||||
|
price: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FiverrConfig {
|
||||||
|
profileUrl: string
|
||||||
|
services: FiverrService[]
|
||||||
|
}
|
||||||
|
|
||||||
export interface SiteConfig {
|
export interface SiteConfig {
|
||||||
name: string
|
name: string
|
||||||
title: string
|
title: string
|
||||||
@@ -19,6 +31,7 @@ export interface SiteConfig {
|
|||||||
url: string
|
url: string
|
||||||
contact: ContactInfo
|
contact: ContactInfo
|
||||||
social: SocialLink[]
|
social: SocialLink[]
|
||||||
|
fiverr: FiverrConfig
|
||||||
}
|
}
|
||||||
|
|
||||||
export const siteConfig: SiteConfig = {
|
export const siteConfig: SiteConfig = {
|
||||||
@@ -58,5 +71,35 @@ export const siteConfig: SiteConfig = {
|
|||||||
url: 'mailto:contact@killiandalcin.fr',
|
url: 'mailto:contact@killiandalcin.fr',
|
||||||
icon: 'email'
|
icon: 'email'
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
fiverr: {
|
||||||
|
profileUrl: 'https://www.fiverr.com/users/mr_kayjaydee',
|
||||||
|
services: [
|
||||||
|
{
|
||||||
|
id: 'discord-bot',
|
||||||
|
url: 'https://www.fiverr.com/s/rEDa84j',
|
||||||
|
image: '@/assets/images/fiverr/discord_bot.jpg',
|
||||||
|
price: '$25'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'minecraft-plugin',
|
||||||
|
url: 'https://www.fiverr.com/s/xXVY20Q',
|
||||||
|
image: '@/assets/images/fiverr/minecraft_plugin.jpg',
|
||||||
|
price: '$50'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'telegram-bot',
|
||||||
|
url: '#',
|
||||||
|
image: '@/assets/images/fiverr/telegram_bot.jpg',
|
||||||
|
price: '$20'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'website-development',
|
||||||
|
url: '#',
|
||||||
|
image: '@/assets/images/fiverr/website.jpg',
|
||||||
|
price: '$50'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,8 @@ export default {
|
|||||||
home: 'Home',
|
home: 'Home',
|
||||||
projects: 'Projects',
|
projects: 'Projects',
|
||||||
about: 'About',
|
about: 'About',
|
||||||
contact: 'Contact'
|
contact: 'Contact',
|
||||||
|
fiverr: 'Fiverr Services'
|
||||||
},
|
},
|
||||||
|
|
||||||
// Home page
|
// Home page
|
||||||
@@ -120,6 +121,80 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Fiverr page
|
||||||
|
fiverr: {
|
||||||
|
title: 'Fiverr Services',
|
||||||
|
subtitle: 'Professional freelance services on Fiverr. Get custom solutions for your Discord server, Minecraft server, or web development needs.',
|
||||||
|
profileCta: 'Visit My Fiverr Profile',
|
||||||
|
stats: {
|
||||||
|
rating: 'Rating'
|
||||||
|
},
|
||||||
|
pricing: {
|
||||||
|
startingAt: 'Starting at'
|
||||||
|
},
|
||||||
|
services: {
|
||||||
|
title: 'Available Services',
|
||||||
|
subtitle: 'Choose from a variety of professional services tailored to your needs.',
|
||||||
|
features: 'Features',
|
||||||
|
orderNow: 'Order Now',
|
||||||
|
learnMore: 'Learn More',
|
||||||
|
moreFeatures: 'more features',
|
||||||
|
comingSoon: 'Coming Soon',
|
||||||
|
available: 'Available'
|
||||||
|
},
|
||||||
|
serviceData: {
|
||||||
|
'discord-bot': {
|
||||||
|
title: 'Custom Discord Bot Creation',
|
||||||
|
description: 'Supercharge Your Discord Server with a Powerful, Fully Custom Bot',
|
||||||
|
features: [
|
||||||
|
'Advanced moderation & utility (Tickets, Leveling)',
|
||||||
|
'Engaging features (Minigames, Giveaways, Trackers)',
|
||||||
|
'Powerful API integrations (PayPal, YouTube, Twitch, etc.)',
|
||||||
|
'Fully custom – no templates'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'minecraft-plugin': {
|
||||||
|
title: 'Minecraft Plugin Development',
|
||||||
|
description: 'Custom Minecraft plugins tailored for your server needs',
|
||||||
|
features: [
|
||||||
|
'Custom gameplay mechanics',
|
||||||
|
'Server management tools',
|
||||||
|
'Player engagement features',
|
||||||
|
'Performance optimized'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'telegram-bot': {
|
||||||
|
title: 'Telegram Bot Development',
|
||||||
|
description: 'Professional Telegram bots for automation and engagement',
|
||||||
|
features: [
|
||||||
|
'Automated messaging',
|
||||||
|
'User management',
|
||||||
|
'API integrations',
|
||||||
|
'Custom commands'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'website-development': {
|
||||||
|
title: 'Modern Website Development',
|
||||||
|
description: 'Beautiful, responsive websites built with latest technologies',
|
||||||
|
features: [
|
||||||
|
'Responsive design',
|
||||||
|
'Modern UI/UX',
|
||||||
|
'SEO optimized',
|
||||||
|
'Fast performance'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
testimonials: {
|
||||||
|
title: 'What Clients Say',
|
||||||
|
subtitle: 'Trusted by clients worldwide for quality and reliability.'
|
||||||
|
},
|
||||||
|
cta: {
|
||||||
|
title: 'Ready to Get Started?',
|
||||||
|
subtitle: 'Choose a service that fits your needs and let\'s bring your project to life.',
|
||||||
|
button: 'Browse All Services'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// Contact page
|
// Contact page
|
||||||
contact: {
|
contact: {
|
||||||
title: 'Contact Me',
|
title: 'Contact Me',
|
||||||
@@ -261,6 +336,10 @@ export default {
|
|||||||
contact: {
|
contact: {
|
||||||
title: 'Contact - Killian',
|
title: 'Contact - Killian',
|
||||||
description: 'Ready to discuss your next project? Let\'s create something amazing together.'
|
description: 'Ready to discuss your next project? Let\'s create something amazing together.'
|
||||||
|
},
|
||||||
|
fiverr: {
|
||||||
|
title: 'Fiverr Services - Killian',
|
||||||
|
description: 'Professional freelance services on Fiverr. Custom Discord bots, Minecraft plugins, and web development solutions.'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,8 @@ export default {
|
|||||||
home: 'Accueil',
|
home: 'Accueil',
|
||||||
projects: 'Projets',
|
projects: 'Projets',
|
||||||
about: 'À propos',
|
about: 'À propos',
|
||||||
contact: 'Contact'
|
contact: 'Contact',
|
||||||
|
fiverr: 'Services Fiverr'
|
||||||
},
|
},
|
||||||
|
|
||||||
// Home page
|
// Home page
|
||||||
@@ -120,6 +121,80 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Fiverr page
|
||||||
|
fiverr: {
|
||||||
|
title: 'Services Fiverr',
|
||||||
|
subtitle: 'Services de freelance professionnels sur Fiverr. Obtenez des solutions personnalisées pour votre serveur Discord, serveur Minecraft ou besoins de développement web.',
|
||||||
|
profileCta: 'Visiter Mon Profil Fiverr',
|
||||||
|
stats: {
|
||||||
|
rating: 'Évaluation'
|
||||||
|
},
|
||||||
|
pricing: {
|
||||||
|
startingAt: 'À partir de'
|
||||||
|
},
|
||||||
|
services: {
|
||||||
|
title: 'Services Disponibles',
|
||||||
|
subtitle: 'Choisissez parmi une variété de services professionnels adaptés à vos besoins.',
|
||||||
|
features: 'Fonctionnalités',
|
||||||
|
orderNow: 'Commander Maintenant',
|
||||||
|
learnMore: 'En Savoir Plus',
|
||||||
|
moreFeatures: 'fonctionnalités supplémentaires',
|
||||||
|
comingSoon: 'Bientôt Disponible',
|
||||||
|
available: 'Disponible'
|
||||||
|
},
|
||||||
|
serviceData: {
|
||||||
|
'discord-bot': {
|
||||||
|
title: 'Création de Bot Discord Personnalisé',
|
||||||
|
description: 'Boostez votre serveur Discord avec un bot puissant et entièrement personnalisé',
|
||||||
|
features: [
|
||||||
|
'Modération avancée et utilitaires (Tickets, Système de niveaux)',
|
||||||
|
'Fonctionnalités engageantes (Mini-jeux, Concours, Trackers)',
|
||||||
|
'Intégrations API puissantes (PayPal, YouTube, Twitch, etc.)',
|
||||||
|
'Entièrement personnalisé – pas de templates'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'minecraft-plugin': {
|
||||||
|
title: 'Développement de Plugin Minecraft',
|
||||||
|
description: 'Plugins Minecraft personnalisés adaptés aux besoins de votre serveur',
|
||||||
|
features: [
|
||||||
|
'Mécaniques de jeu personnalisées',
|
||||||
|
'Outils de gestion de serveur',
|
||||||
|
'Fonctionnalités d\'engagement des joueurs',
|
||||||
|
'Optimisé pour les performances'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'telegram-bot': {
|
||||||
|
title: 'Développement de Bot Telegram',
|
||||||
|
description: 'Bots Telegram professionnels pour l\'automatisation et l\'engagement',
|
||||||
|
features: [
|
||||||
|
'Messagerie automatisée',
|
||||||
|
'Gestion des utilisateurs',
|
||||||
|
'Intégrations API',
|
||||||
|
'Commandes personnalisées'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'website-development': {
|
||||||
|
title: 'Développement de Site Web Moderne',
|
||||||
|
description: 'Sites web beaux et réactifs construits avec les dernières technologies',
|
||||||
|
features: [
|
||||||
|
'Design responsive',
|
||||||
|
'UI/UX moderne',
|
||||||
|
'Optimisé pour le SEO',
|
||||||
|
'Performances rapides'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
testimonials: {
|
||||||
|
title: 'Ce que disent les clients',
|
||||||
|
subtitle: 'Fait confiance par des clients du monde entier pour la qualité et la fiabilité.'
|
||||||
|
},
|
||||||
|
cta: {
|
||||||
|
title: 'Prêt à commencer ?',
|
||||||
|
subtitle: 'Choisissez un service qui correspond à vos besoins et donnons vie à votre projet.',
|
||||||
|
button: 'Parcourir tous les services'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// Contact page
|
// Contact page
|
||||||
contact: {
|
contact: {
|
||||||
title: 'Me Contacter',
|
title: 'Me Contacter',
|
||||||
@@ -261,6 +336,10 @@ export default {
|
|||||||
contact: {
|
contact: {
|
||||||
title: 'Contact - Killian',
|
title: 'Contact - Killian',
|
||||||
description: 'Prêt à discuter de votre prochain projet ? Créons ensemble quelque chose d\'incroyable.'
|
description: 'Prêt à discuter de votre prochain projet ? Créons ensemble quelque chose d\'incroyable.'
|
||||||
|
},
|
||||||
|
fiverr: {
|
||||||
|
title: 'Services Fiverr - Killian',
|
||||||
|
description: 'Services de freelance professionnels sur Fiverr. Bots Discord personnalisés, plugins Minecraft et solutions de développement web.'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,6 +29,11 @@ const router = createRouter({
|
|||||||
path: '/contact',
|
path: '/contact',
|
||||||
name: 'contact',
|
name: 'contact',
|
||||||
component: () => import('../views/ContactPage.vue')
|
component: () => import('../views/ContactPage.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/fiverr',
|
||||||
|
name: 'fiverr',
|
||||||
|
component: () => import('../views/FiverrPage.vue')
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior(to, from, savedPosition) {
|
||||||
|
|||||||
@@ -109,8 +109,7 @@ const approachCards = computed(() => [
|
|||||||
<div v-for="category in techCategories" :key="category.key" class="card animate-fade-in-up">
|
<div v-for="category in techCategories" :key="category.key" class="card animate-fade-in-up">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="flex items-center mb-lg">
|
<div class="flex items-center mb-lg">
|
||||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md"
|
<div class="category-icon" :style="{ background: category.color, color: 'var(--text-inverse)' }">
|
||||||
:style="{ background: category.color, color: 'var(--text-inverse)' }">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="category.icon"></path>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -129,8 +128,7 @@ const approachCards = computed(() => [
|
|||||||
<div class="card animate-fade-in-up">
|
<div class="card animate-fade-in-up">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="flex items-center mb-lg">
|
<div class="flex items-center mb-lg">
|
||||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md"
|
<div class="category-icon" :style="{ background: 'var(--color-info)', color: 'var(--text-inverse)' }">
|
||||||
style="background: var(--color-primary); color: var(--text-inverse);">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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"
|
<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">
|
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">
|
||||||
@@ -149,7 +147,7 @@ const approachCards = computed(() => [
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Approach Section -->
|
<!-- Approach Section -->
|
||||||
<section class="section" style="background: var(--bg-secondary);">
|
<section class="approach-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="text-center mb-2xl">
|
<div class="text-center mb-2xl">
|
||||||
<h2 class="mb-lg">{{ t('about.approach.title') }}</h2>
|
<h2 class="mb-lg">{{ t('about.approach.title') }}</h2>
|
||||||
@@ -163,8 +161,7 @@ const approachCards = computed(() => [
|
|||||||
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="flex items-start">
|
<div class="flex items-start">
|
||||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md flex-shrink-0"
|
<div class="approach-icon" :style="{ background: card.color, color: 'var(--text-inverse)' }">
|
||||||
:style="{ background: card.color, color: 'var(--text-inverse)' }">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="card.icon"></path>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -212,46 +209,5 @@ const approachCards = computed(() => [
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Custom animations with delays */
|
@import './styles/AboutPage.css';
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import { useSeo } from '@/composables/useSeo'
|
import { useSeo } from '@/composables/useSeo'
|
||||||
import { useI18n } from '@/composables/useI18n'
|
import { useI18n } from '@/composables/useI18n'
|
||||||
import { useSiteConfig } from '@/composables/useSiteConfig'
|
import { useSiteConfig } from '@/composables/useSiteConfig'
|
||||||
|
import ContactMethod from '@/components/ContactMethod.vue'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const { siteConfig } = useSiteConfig()
|
const { siteConfig } = useSiteConfig()
|
||||||
@@ -55,60 +56,16 @@ useSeo({
|
|||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h2 class="text-2xl font-bold mb-lg">{{ t('contact.quickContact') }}</h2>
|
<h2 class="text-2xl font-bold mb-lg">{{ t('contact.quickContact') }}</h2>
|
||||||
<div class="space-y-md">
|
<div class="space-y-md">
|
||||||
<!-- Email -->
|
<ContactMethod type="email" :title="t('contact.methods.email')" :text="siteConfig.contact.email"
|
||||||
<div class="contact-method">
|
:description="t('contact.methods.responseTime')"
|
||||||
<div class="contact-icon" style="background: var(--color-primary); color: var(--text-inverse);">
|
:href="siteConfig.social.find(s => s.icon === 'email')?.url" />
|
||||||
<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 -->
|
<ContactMethod type="phone" :title="t('contact.methods.phone')" :text="siteConfig.contact.phone"
|
||||||
<div class="contact-method">
|
:description="t('contact.methods.availability')"
|
||||||
<div class="contact-icon" style="background: var(--color-info); color: var(--text-inverse);">
|
:href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`" />
|
||||||
<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 -->
|
<ContactMethod type="location" :title="t('contact.methods.location')"
|
||||||
<div class="contact-method">
|
:text="siteConfig.contact.location" :description="t('contact.methods.availability')" />
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,7 +110,7 @@ useSeo({
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- FAQ Section -->
|
<!-- FAQ Section -->
|
||||||
<section class="section" style="background: var(--bg-secondary);">
|
<section class="faq-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="text-center mb-2xl">
|
<div class="text-center mb-2xl">
|
||||||
<h2 class="mb-lg">{{ t('contact.faq.title') }}</h2>
|
<h2 class="mb-lg">{{ t('contact.faq.title') }}</h2>
|
||||||
@@ -165,8 +122,7 @@ useSeo({
|
|||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-xl">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-xl">
|
||||||
<div class="card text-center">
|
<div class="card text-center">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
<div class="faq-icon faq-icon-success">
|
||||||
style="background: var(--color-success); color: var(--text-inverse);">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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"
|
<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>
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
@@ -179,8 +135,7 @@ useSeo({
|
|||||||
|
|
||||||
<div class="card text-center">
|
<div class="card text-center">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
<div class="faq-icon faq-icon-primary">
|
||||||
style="background: var(--color-primary); color: var(--text-inverse);">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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"
|
<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">
|
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">
|
||||||
@@ -194,8 +149,7 @@ useSeo({
|
|||||||
|
|
||||||
<div class="card text-center">
|
<div class="card text-center">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
<div class="faq-icon faq-icon-secondary">
|
||||||
style="background: var(--color-secondary); color: var(--text-inverse);">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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"
|
<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">
|
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">
|
||||||
@@ -213,290 +167,5 @@ useSeo({
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Contact Page Styles */
|
@import './styles/ContactPage.css';
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
93
src/views/FiverrPage.vue
Normal file
93
src/views/FiverrPage.vue
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useI18n } from '@/composables/useI18n'
|
||||||
|
import { useSeo } from '@/composables/useSeo'
|
||||||
|
import { useSiteConfig } from '@/composables/useSiteConfig'
|
||||||
|
import { useAssets } from '@/composables/useAssets'
|
||||||
|
import FiverrHero from '@/components/FiverrHero.vue'
|
||||||
|
import FiverrServiceCard from '@/components/FiverrServiceCard.vue'
|
||||||
|
import FiverrCta from '@/components/FiverrCta.vue'
|
||||||
|
import en from '@/locales/en'
|
||||||
|
import fr from '@/locales/fr'
|
||||||
|
|
||||||
|
const { t, locale } = useI18n()
|
||||||
|
const { siteConfig } = useSiteConfig()
|
||||||
|
const { getImageUrl } = useAssets()
|
||||||
|
|
||||||
|
// SEO
|
||||||
|
useSeo({
|
||||||
|
title: t('fiverr.title'),
|
||||||
|
description: t('fiverr.subtitle')
|
||||||
|
})
|
||||||
|
|
||||||
|
const services = computed(() => siteConfig.value.fiverr.services)
|
||||||
|
const availableServices = computed(() => services.value.filter(s => s.url !== '#'))
|
||||||
|
|
||||||
|
// Get features from the current locale messages
|
||||||
|
const getServiceFeatures = (serviceId: string) => {
|
||||||
|
const messages = { en, fr }
|
||||||
|
const currentMessages = messages[locale.value as keyof typeof messages]
|
||||||
|
const serviceData = currentMessages?.fiverr?.serviceData?.[serviceId as keyof typeof currentMessages.fiverr.serviceData]
|
||||||
|
return serviceData?.features || []
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hero data
|
||||||
|
const heroStats = computed(() => [
|
||||||
|
{
|
||||||
|
number: availableServices.value.length,
|
||||||
|
label: t('fiverr.services.orderNow')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: '5⭐',
|
||||||
|
label: t('fiverr.stats.rating')
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// Service card data
|
||||||
|
const getServiceCardProps = (service: { id: string; price: string; url: string; image: string }) => ({
|
||||||
|
title: t(`fiverr.serviceData.${service.id}.title`),
|
||||||
|
description: t(`fiverr.serviceData.${service.id}.description`),
|
||||||
|
price: `${t('fiverr.pricing.startingAt')} ${service.price}`,
|
||||||
|
url: service.url,
|
||||||
|
imageUrl: getImageUrl(service.image),
|
||||||
|
features: getServiceFeatures(service.id),
|
||||||
|
featuresTitle: t('fiverr.services.features'),
|
||||||
|
orderText: t('fiverr.services.orderNow'),
|
||||||
|
learnMoreText: t('fiverr.services.learnMore'),
|
||||||
|
moreFeaturesText: t('fiverr.services.moreFeatures'),
|
||||||
|
comingSoonText: t('fiverr.services.comingSoon'),
|
||||||
|
availableText: t('fiverr.services.available')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="fiverr-page">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<FiverrHero :title="t('fiverr.title')" :subtitle="t('fiverr.subtitle')" :stats="heroStats"
|
||||||
|
:cta-url="siteConfig.fiverr.profileUrl" :cta-text="t('fiverr.profileCta')" />
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section class="services-grid-section">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Section Header -->
|
||||||
|
<div class="section-header text-center">
|
||||||
|
<h2 class="section-title">{{ t('fiverr.services.title') }}</h2>
|
||||||
|
<p class="section-subtitle">{{ t('fiverr.services.subtitle') }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<div class="services-grid">
|
||||||
|
<FiverrServiceCard v-for="service in services" :key="service.id" v-bind="getServiceCardProps(service)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<FiverrCta :title="t('fiverr.cta.title')" :subtitle="t('fiverr.cta.subtitle')"
|
||||||
|
:cta-url="siteConfig.fiverr.profileUrl" :cta-text="t('fiverr.cta.button')" />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './styles/FiverrPage.css';
|
||||||
|
</style>
|
||||||
@@ -21,22 +21,26 @@ const featuredProjects = computed(() => {
|
|||||||
// Services data
|
// Services data
|
||||||
const services = computed(() => [
|
const services = computed(() => [
|
||||||
{
|
{
|
||||||
icon: '💻',
|
icon: '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',
|
||||||
|
color: 'var(--color-primary)',
|
||||||
title: t('home.services.webDev.title'),
|
title: t('home.services.webDev.title'),
|
||||||
description: t('home.services.webDev.description')
|
description: t('home.services.webDev.description')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '📱',
|
icon: 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z',
|
||||||
|
color: 'var(--color-secondary)',
|
||||||
title: t('home.services.mobileApps.title'),
|
title: t('home.services.mobileApps.title'),
|
||||||
description: t('home.services.mobileApps.description')
|
description: t('home.services.mobileApps.description')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '🚀',
|
icon: 'M13 10V3L4 14h7v7l9-11h-7z',
|
||||||
|
color: 'var(--color-success)',
|
||||||
title: t('home.services.optimization.title'),
|
title: t('home.services.optimization.title'),
|
||||||
description: t('home.services.optimization.description')
|
description: t('home.services.optimization.description')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '🛠️',
|
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',
|
||||||
|
color: 'var(--color-warning)',
|
||||||
title: t('home.services.maintenance.title'),
|
title: t('home.services.maintenance.title'),
|
||||||
description: t('home.services.maintenance.description')
|
description: t('home.services.maintenance.description')
|
||||||
}
|
}
|
||||||
@@ -63,6 +67,14 @@ const services = computed(() => [
|
|||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
<RouterLink to="/fiverr" class="btn btn-secondary btn-lg">
|
||||||
|
{{ t('nav.fiverr') }}
|
||||||
|
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</RouterLink>
|
||||||
<RouterLink to="/contact" class="btn btn-secondary btn-lg">
|
<RouterLink to="/contact" class="btn btn-secondary btn-lg">
|
||||||
{{ t('home.cta.contactMe') }}
|
{{ t('home.cta.contactMe') }}
|
||||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
@@ -74,13 +86,6 @@ const services = computed(() => [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</section>
|
||||||
|
|
||||||
<!-- Featured Projects Section -->
|
<!-- Featured Projects Section -->
|
||||||
@@ -110,7 +115,7 @@ const services = computed(() => [
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Services Section -->
|
<!-- Services Section -->
|
||||||
<section class="section" style="background: var(--bg-secondary);">
|
<section class="services-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="text-center mb-2xl">
|
<div class="text-center mb-2xl">
|
||||||
<h2 class="mb-lg">{{ t('home.services.title') }}</h2>
|
<h2 class="mb-lg">{{ t('home.services.title') }}</h2>
|
||||||
@@ -119,17 +124,25 @@ const services = computed(() => [
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-xl">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
|
||||||
<div v-for="(service, index) in services" :key="service.title" class="card text-center animate-fade-in-up"
|
<div v-for="(service, index) in services" :key="index" class="card animate-fade-in-up"
|
||||||
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="text-4xl mb-lg">{{ service.icon }}</div>
|
<div class="flex items-start">
|
||||||
|
<div class="service-icon" :style="{ background: service.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="service.icon"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<h3 class="text-xl font-bold mb-md">{{ service.title }}</h3>
|
<h3 class="text-xl font-bold mb-md">{{ service.title }}</h3>
|
||||||
<p class="text-secondary">{{ service.description }}</p>
|
<p class="text-secondary">{{ service.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
@@ -165,98 +178,5 @@ const services = computed(() => [
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Custom animations with delays */
|
@import './styles/HomePage.css';
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
@@ -241,524 +241,5 @@ onMounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Project Detail Page Styles - Redesigned */
|
@import './styles/ProjectDetailPage.css';
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
@@ -170,285 +170,5 @@ const featuredProjects = computed(() => projects.filter(p => p.featured).length)
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Projects Page Styles */
|
@import './styles/ProjectsPage.css';
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
74
src/views/styles/AboutPage.css
Normal file
74
src/views/styles/AboutPage.css
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
/* AboutPage Styles */
|
||||||
|
|
||||||
|
/* Approach Section */
|
||||||
|
.approach-section {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Category Icons */
|
||||||
|
.category-icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: var(--space-md);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Approach Icons */
|
||||||
|
.approach-icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: var(--space-md);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
283
src/views/styles/ContactPage.css
Normal file
283
src/views/styles/ContactPage.css
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
/* ContactPage Styles */
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAQ Section */
|
||||||
|
.faq-section {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Spacing utilities */
|
||||||
|
.space-y-md > * + * {
|
||||||
|
margin-top: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-y-sm > * + * {
|
||||||
|
margin-top: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAQ Icons */
|
||||||
|
.faq-icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-icon-success {
|
||||||
|
background: var(--color-success);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-icon-primary {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-icon-secondary {
|
||||||
|
background: var(--color-secondary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
51
src/views/styles/FiverrPage.css
Normal file
51
src/views/styles/FiverrPage.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
/* Fiverr Page Main Styles */
|
||||||
|
.fiverr-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Grid Section */
|
||||||
|
.services-grid-section {
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
margin-bottom: var(--space-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--font-size-4xl);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: var(--line-height-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--font-size-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
120
src/views/styles/HomePage.css
Normal file
120
src/views/styles/HomePage.css
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
/* HomePage Styles */
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services-section {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Service Icons */
|
||||||
|
.service-icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: var(--space-md);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll Icon */
|
||||||
|
.scroll-icon {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
520
src/views/styles/ProjectDetailPage.css
Normal file
520
src/views/styles/ProjectDetailPage.css
Normal file
@@ -0,0 +1,520 @@
|
|||||||
|
/* ProjectDetailPage Styles */
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
283
src/views/styles/ProjectsPage.css
Normal file
283
src/views/styles/ProjectsPage.css
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
/* ProjectsPage Styles */
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user