kayjaydee/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update portfolio branding to "Killian' DAL-CIN" across all documentation and components

Browse Source 
- Corrected the name in various files including CLAUDE.md, README.md, and configuration files to reflect the updated branding.
- Ensured consistency in the use of the new name throughout the project, enhancing brand identity.
This commit is contained in:
MrKayJayDee
2026-04-08 19:54:46 +02:00
parent 355df8dbbe
commit 6b828aff67
45 changed files with 750 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ContactForm.vue
+42 -15
View File
@@ -14,10 +14,10 @@ const schema = z.object({
type Schema = z.output<typeof schema>
const state = reactive<Partial<Schema>>({
name: undefined,
email: undefined,
message: undefined,
const state = reactive({
name: '',
email: '',
message: '',
})
async function onSubmit(event: FormSubmitEvent<Schema>) {
@@ -29,10 +29,9 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
color: 'success',
icon: 'i-lucide-check',
})
// Reset form
state.name = undefined
state.email = undefined
state.message = undefined
state.name = ''
state.email = ''
state.message = ''
} catch {
toast.add({
title: t('contact.form.error'),
@@ -46,21 +45,49 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
</script>
<template>
<UForm :schema="schema" :state="state" class="flex flex-col gap-4" @submit="onSubmit">
<UForm :schema="schema" :state="state" class="space-y-5" @submit="onSubmit">
<UFormField :label="t('contact.form.name')" name="name">
<UInput v-model="state.name" :placeholder="t('contact.form.name')" class="w-full" />
<UInput
v-model="state.name"
:placeholder="t('contact.form.name')"
icon="i-lucide-user"
size="lg"
class="w-full"
/>
</UFormField>
<UFormField :label="t('contact.form.email')" name="email">
<UInput v-model="state.email" type="email" :placeholder="t('contact.form.email')" class="w-full" />
<UInput
v-model="state.email"
type="email"
:placeholder="t('contact.form.email')"
icon="i-lucide-mail"
size="lg"
class="w-full"
/>
</UFormField>
<UFormField :label="t('contact.form.message')" name="message">
<UTextarea v-model="state.message" :rows="5" :placeholder="t('contact.form.message')" class="w-full" />
<UTextarea
v-model="state.message"
:rows="6"
:placeholder="t('contact.form.message')"
size="lg"
class="w-full"
/>
</UFormField>
<UButton type="submit" :loading="loading" size="lg" class="self-start">
{{ t('contact.form.submit') }}
</UButton>
<button
type="submit"
:disabled="loading"
class="inline-flex items-center justify-center gap-2 w-full px-6 py-3.5 rounded-xl bg-brand-500 hover:bg-brand-600 disabled:opacity-60 disabled:cursor-not-allowed text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40"
>
<UIcon v-if="loading" name="i-lucide-loader-2" class="w-4 h-4 animate-spin" />
<template v-if="loading">{{ t('contact.form.sending') }}</template>
<template v-else>
{{ t('contact.form.submit') }}
<UIcon name="i-lucide-send" class="w-4 h-4" />
</template>
</button>
</UForm>
</template>
app/components/ProjectCard.vue
+22 -20
View File
@@ -17,7 +17,7 @@ const translatedCategory = computed(() => {
<template>
<article
class="group relative rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-all duration-300 hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 hover:-translate-y-1"
class="group relative rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm overflow-hidden transition-all duration-300 hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1.5"
itemscope
itemtype="https://schema.org/CreativeWork"
>
@@ -30,21 +30,26 @@ const translatedCategory = computed(() => {
format="webp"
width="400"
height="300"
class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"
class="w-full h-52 object-cover transition-transform duration-500 group-hover:scale-105"
itemprop="image"
/>
<!-- Overlay on hover -->
<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" />
<!-- Gradient overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-5">
<span class="text-white text-sm font-semibold flex items-center gap-1.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
{{ t('projects.buttons.viewProject') }}
<UIcon name="i-lucide-arrow-right" class="w-4 h-4" />
</span>
</div>
</NuxtLink>
<!-- Content -->
<div class="p-5 flex flex-col gap-3">
<div class="p-5 sm:p-6 flex flex-col gap-3">
<!-- Category & Date -->
<div class="flex items-center justify-between">
<UBadge v-if="project.category" color="primary" variant="subtle" itemprop="genre">
{{ translatedCategory }}
</UBadge>
<time v-if="project.date" class="text-xs text-gray-400 dark:text-gray-500 font-medium" :datetime="project.date" itemprop="dateCreated">
<time v-if="project.date" class="text-xs text-gray-400 dark:text-gray-500 font-mono" :datetime="project.date" itemprop="dateCreated">
{{ project.date }}
</time>
</div>
@@ -60,29 +65,26 @@ const translatedCategory = computed(() => {
</p>
<!-- Technologies -->
<div v-if="project.technologies?.length" class="flex flex-wrap gap-1.5 pt-1" itemprop="keywords">
<div v-if="project.technologies?.length" class="flex flex-wrap gap-1.5 pt-2" itemprop="keywords">
<span
v-for="tech in project.technologies.slice(0, 3)"
:key="tech"
class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 font-medium"
class="text-[11px] px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800/80 text-gray-600 dark:text-gray-400 font-medium border border-gray-200/50 dark:border-gray-700/30"
>
{{ tech }}
</span>
<span v-if="project.technologies.length > 3" class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-500 font-medium">
<span v-if="project.technologies.length > 3" class="text-[11px] px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800/80 text-gray-500 dark:text-gray-500 font-medium border border-gray-200/50 dark:border-gray-700/30">
+{{ project.technologies.length - 3 }}
</span>
</div>
<!-- Action link -->
<NuxtLink
:to="`/project/${project.id}`"
class="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 transition-colors mt-1 group/link"
:aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
itemprop="url"
>
{{ t('projects.buttons.viewProject') }}
<UIcon name="i-lucide-arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-0.5" />
</NuxtLink>
</div>
<!-- Hidden SEO link -->
<NuxtLink
:to="`/project/${project.id}`"
class="absolute inset-0 z-10"
:aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
itemprop="url"
/>
</article>
</template>
app/components/ProjectGallery.vue
+1 -1
View File
@@ -39,7 +39,7 @@ defineExpose({ openGallery })
<template>
<UModal v-model:open="isOpen" fullscreen>
<template #content>
<div class="flex flex-col items-center justify-center h-full p-4 gap-4">
<div class="flex flex-col items-center justify-center h-full p-4 gap-4" @click.self="isOpen = false">
<div class="flex items-center justify-between w-full max-w-4xl">
<h3 class="text-lg font-semibold">{{ projectTitle }}</h3>
<UButton
app/components/layout/AppFooter.vue
+42 -39
View File
@@ -18,70 +18,73 @@ const quickLinks = computed(() => [
</script>
<template>
<footer class="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-8">
<!-- Branding & Tagline -->
<div class="space-y-4">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2.5">
<NuxtImg
src="/images/logo.webp"
alt="Killian Dalcin"
width="36"
height="36"
loading="lazy"
class="rounded-lg"
/>
<span class="text-lg font-bold text-gray-900 dark:text-white">Killian Dalcin</span>
<footer class="border-t border-gray-200/80 dark:border-gray-800/50 bg-gray-50/80 dark:bg-gray-950/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8">
<!-- Brand column -->
<div class="sm:col-span-2 lg:col-span-1 space-y-5">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2.5 group">
<NuxtImg src="/images/logo.webp" alt="Killian' DAL-CIN" width="36" height="36" loading="lazy"
class="rounded-lg transition-transform duration-300 group-hover:scale-110" />
<span class="text-lg font-bold text-gray-900 dark:text-white">Killian' DAL-CIN</span>
</NuxtLink>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xs">
Full Stack Developer &amp; Hytale Plugin Developer. Building modern web experiences and game plugins.
</p>
</div>
<!-- Quick Links -->
<!-- Navigation links -->
<div>
<h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
<h3 class="font-mono text-xs text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-5">
Navigation
</h3>
<nav class="flex flex-col gap-2.5">
<NuxtLink
v-for="link in quickLinks"
:key="link.key"
:to="localePath(link.path)"
class="text-sm text-gray-500 dark:text-gray-400 hover:text-brand-500 dark:hover:text-brand-400 transition-colors"
>
<nav class="flex flex-col gap-3">
<NuxtLink v-for="link in quickLinks" :key="link.key" :to="localePath(link.path)"
class="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-500 dark:hover:text-brand-400 transition-colors duration-200">
{{ t(`nav.${link.key}`) }}
</NuxtLink>
</nav>
</div>
<!-- Social Links -->
<!-- Services links -->
<div>
<h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
Social
<h3 class="font-mono text-xs text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-5">
Services
</h3>
<div class="flex items-center gap-3">
<a
v-for="link in socialLinks"
:key="link.name"
:href="link.url"
target="_blank"
rel="noopener noreferrer"
<nav class="flex flex-col gap-3">
<span class="text-sm text-gray-600 dark:text-gray-400">Web Development</span>
<span class="text-sm text-gray-600 dark:text-gray-400">Hytale Plugins</span>
<span class="text-sm text-gray-600 dark:text-gray-400">Consulting</span>
<span class="text-sm text-gray-600 dark:text-gray-400">Maintenance</span>
</nav>
</div>
<!-- Connect -->
<div>
<h3 class="font-mono text-xs text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-5">
Connect
</h3>
<div class="flex items-center gap-2">
<a v-for="link in socialLinks" :key="link.name" :href="link.url" target="_blank" rel="noopener noreferrer"
:aria-label="t(link.ariaKey)"
class="w-10 h-10 inline-flex items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-brand-500/10 dark:hover:bg-brand-500/10 transition-all duration-200 group"
>
<UIcon :name="link.icon" class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-brand-500 dark:group-hover:text-brand-400 transition-colors" />
class="w-10 h-10 inline-flex items-center justify-center rounded-xl border border-gray-200/80 dark:border-gray-800/50 bg-white/60 dark:bg-gray-900/40 hover:border-brand-500/40 hover:bg-brand-500/10 dark:hover:bg-brand-500/10 transition-all duration-300 group">
<UIcon :name="link.icon"
class="w-4.5 h-4.5 text-gray-500 dark:text-gray-400 group-hover:text-brand-500 dark:group-hover:text-brand-400 transition-colors" />
</a>
</div>
</div>
</div>
<!-- Bottom bar -->
<div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-800">
<p class="text-sm text-gray-400 dark:text-gray-500 text-center">
<div
class="mt-14 pt-8 border-t border-gray-200/60 dark:border-gray-800/40 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm text-gray-400 dark:text-gray-500 font-mono">
{{ t('footer.copyright') }}
</p>
<div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-600">
<span class="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse" />
<span>Built with Nuxt</span>
</div>
</div>
</div>
</footer>
app/components/layout/AppHeader.vue
+21 -73
View File
@@ -27,40 +27,26 @@ function isActive(path: string): boolean {
</script>
<template>
<header class="sticky top-0 z-50 backdrop-blur-xl bg-white/80 dark:bg-gray-950/80 border-b border-gray-200/50 dark:border-gray-800/50">
<header
class="sticky top-0 z-50 backdrop-blur-xl bg-white/80 dark:bg-gray-950/80 border-b border-gray-200/50 dark:border-gray-800/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<NuxtLink
:to="localePath('/')"
:aria-label="t('a11y.logoLabel')"
class="flex items-center gap-2.5 shrink-0"
>
<NuxtImg
src="/images/logo.webp"
alt="Killian Dalcin"
width="36"
height="36"
loading="eager"
class="rounded-lg"
/>
<span class="text-base font-semibold tracking-tight text-gray-900 dark:text-white">Killian</span>
<NuxtLink :to="localePath('/')" :aria-label="t('a11y.logoLabel')" class="flex items-center gap-2.5 shrink-0">
<NuxtImg src="/images/logo.webp" alt="Killian' DAL-CIN" width="36" height="36" loading="eager"
class="rounded-lg" />
<span class="text-base font-semibold tracking-tight text-gray-900 dark:text-white">Killian'</span>
</NuxtLink>
<!-- Desktop nav -->
<nav class="hidden md:flex items-center gap-1" aria-label="Main navigation">
<NuxtLink
v-for="link in navLinks"
:key="link.key"
:to="localePath(link.path)"
<NuxtLink v-for="link in navLinks" :key="link.key" :to="localePath(link.path)"
:aria-current="isActive(link.path) ? 'page' : undefined"
class="px-3 py-2 text-sm font-medium rounded-lg transition-colors"
:class="[
class="px-3 py-2 text-sm font-medium rounded-lg transition-colors" :class="[
isActive(link.path)
? 'text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-950/40'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800/60'
]"
>
]">
{{ t(`nav.${link.key}`) }}
</NuxtLink>
</nav>
@@ -68,36 +54,19 @@ function isActive(path: string): boolean {
<!-- Right actions -->
<div class="flex items-center gap-1">
<!-- Language toggle -->
<UButton
variant="ghost"
color="neutral"
size="sm"
:aria-label="t('a11y.langToggle')"
@click="toggleLocale"
>
<UButton variant="ghost" color="neutral" size="sm" :aria-label="t('a11y.langToggle')" @click="toggleLocale">
{{ locale === 'fr' ? 'EN' : 'FR' }}
</UButton>
<!-- Theme toggle -->
<UButton
variant="ghost"
color="neutral"
size="sm"
<UButton variant="ghost" color="neutral" size="sm"
:icon="colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
:aria-label="colorMode.value === 'dark' ? t('a11y.themeDark') : t('a11y.themeLight')"
@click="toggleTheme"
/>
@click="toggleTheme" />
<!-- Mobile hamburger -->
<UButton
variant="ghost"
color="neutral"
size="sm"
icon="i-lucide-menu"
class="md:hidden"
:aria-label="t('a11y.openMenu')"
@click="mobileOpen = true"
/>
<UButton variant="ghost" color="neutral" size="sm" icon="i-lucide-menu" class="md:hidden"
:aria-label="t('a11y.openMenu')" @click="mobileOpen = true" />
</div>
</div>
</div>
@@ -106,32 +75,20 @@ function isActive(path: string): boolean {
<USlideover v-model:open="mobileOpen" side="left" class="md:hidden">
<template #header>
<div class="flex items-center gap-2.5">
<NuxtImg
src="/images/logo.webp"
alt="Killian Dalcin"
width="32"
height="32"
class="rounded-lg"
/>
<NuxtImg src="/images/logo.webp" alt="Killian' DAL-CIN" width="32" height="32" class="rounded-lg" />
<span class="text-base font-semibold text-gray-900 dark:text-white">Killian</span>
</div>
</template>
<template #body>
<nav class="flex flex-col gap-1" aria-label="Mobile navigation">
<NuxtLink
v-for="link in navLinks"
:key="link.key"
:to="localePath(link.path)"
<NuxtLink v-for="link in navLinks" :key="link.key" :to="localePath(link.path)"
:aria-current="isActive(link.path) ? 'page' : undefined"
class="px-4 py-3 text-base font-medium rounded-lg transition-colors"
:class="[
class="px-4 py-3 text-base font-medium rounded-lg transition-colors" :class="[
isActive(link.path)
? 'text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-950/40'
: 'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800/60'
]"
@click="mobileOpen = false"
>
]" @click="mobileOpen = false">
{{ t(`nav.${link.key}`) }}
</NuxtLink>
</nav>
@@ -139,21 +96,12 @@ function isActive(path: string): boolean {
<template #footer>
<div class="flex items-center gap-2">
<UButton
variant="ghost"
color="neutral"
:aria-label="t('a11y.langToggle')"
@click="toggleLocale"
>
<UButton variant="ghost" color="neutral" :aria-label="t('a11y.langToggle')" @click="toggleLocale">
{{ locale === 'fr' ? 'EN' : 'FR' }}
</UButton>
<UButton
variant="ghost"
color="neutral"
:icon="colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
<UButton variant="ghost" color="neutral" :icon="colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
:aria-label="colorMode.value === 'dark' ? t('a11y.themeDark') : t('a11y.themeLight')"
@click="toggleTheme"
/>
@click="toggleTheme" />
</div>
</template>
</USlideover>
app/components/sections/CTASection.vue
+49 -13
View File
@@ -1,26 +1,62 @@
<script setup lang="ts">
const { t } = useI18n()
const localePath = useLocalePath()
interface Props {
title?: string
subtitle?: string
primaryText?: string
primaryTo?: string
secondaryText?: string
secondaryTo?: string
external?: boolean
}
const props = withDefaults(defineProps<Props>(), {
title: '',
subtitle: '',
primaryText: '',
primaryTo: '/contact',
secondaryText: '',
secondaryTo: '/about',
external: false,
})
const resolvedTitle = computed(() => props.title || t('home.cta2.title'))
const resolvedSubtitle = computed(() => props.subtitle || t('home.cta2.subtitle'))
const resolvedPrimaryText = computed(() => props.primaryText || t('home.cta2.startProject'))
const resolvedSecondaryText = computed(() => props.secondaryText || t('home.cta2.learnMore'))
</script>
<template>
<section class="py-20 md:py-28 px-4">
<section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 via-brand-500 to-emerald-500 px-8 py-16 sm:px-16 sm:py-20 text-center">
<!-- Decorative shapes -->
<div class="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-2xl" aria-hidden="true" />
<div class="absolute bottom-0 right-0 w-96 h-96 bg-black/10 rounded-full translate-x-1/3 translate-y-1/3 blur-2xl" aria-hidden="true" />
<div class="relative overflow-hidden rounded-3xl px-8 py-20 sm:px-16 sm:py-24 text-center border border-gray-200/60 dark:border-gray-800/40 bg-gray-50 dark:bg-gray-900">
<!-- Subtle dot pattern -->
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" aria-hidden="true"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 24px 24px;" />
<!-- Brand glow -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-brand-500/8 dark:bg-brand-500/15 rounded-full blur-3xl pointer-events-none" aria-hidden="true" />
<div class="relative z-10">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">{{ t('home.cta2.title') }}</h2>
<p class="text-lg text-white/80 mb-10 max-w-2xl mx-auto">{{ t('home.cta2.subtitle') }}</p>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-5 tracking-tight">{{ resolvedTitle }}</h2>
<p class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">{{ resolvedSubtitle }}</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<UButton :to="localePath('/contact')" size="xl" color="white" class="font-semibold">
{{ t('home.cta2.startProject') }}
</UButton>
<UButton :to="localePath('/about')" size="xl" variant="outline" color="white" class="font-semibold">
{{ t('home.cta2.learnMore') }}
</UButton>
<NuxtLink
:to="external ? props.primaryTo : localePath(props.primaryTo)"
:target="external ? '_blank' : undefined"
:rel="external ? 'noopener noreferrer' : undefined"
class="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40"
>
{{ resolvedPrimaryText }}
<UIcon :name="external ? 'i-lucide-external-link' : 'i-lucide-arrow-right'" class="w-4 h-4" />
</NuxtLink>
<NuxtLink
:to="localePath(props.secondaryTo)"
class="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-brand-500/50 hover:text-brand-500 font-semibold text-sm transition-all duration-200"
>
{{ resolvedSecondaryText }}
</NuxtLink>
</div>
</div>
</div>
app/components/sections/FAQSection.vue
+6 -6
View File
@@ -20,15 +20,15 @@ const items = computed(() =>
</script>
<template>
<section class="py-20 md:py-28 px-4">
<section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-14">
<span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">FAQ</span>
<h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ title }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-3">{{ subtitle }}</p>
<div class="text-center mb-16">
<span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// faq</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ title }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-4 leading-relaxed">{{ subtitle }}</p>
</div>
<div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-2">
<div class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm p-3 sm:p-4 shadow-sm">
<UAccordion :items="items" type="single" collapsible />
</div>
</div>
app/components/sections/FeaturedProjectsSection.vue
+16 -12
View File
@@ -4,27 +4,31 @@ const { featuredProjects } = useProjects()
</script>
<template>
<section class="py-20 md:py-28 px-4">
<section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Section header -->
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-14">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
<div>
<span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Portfolio</span>
<h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('home.featuredProjects.title') }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl">{{ t('home.featuredProjects.subtitle') }}</p>
<span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// portfolio</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('home.featuredProjects.title') }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl leading-relaxed">{{ t('home.featuredProjects.subtitle') }}</p>
</div>
<UButton to="/projects" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto">
<UButton to="/projects" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto group">
{{ t('home.cta.viewProjects') }}
</UButton>
</div>
<!-- Projects grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
<ProjectCard
v-for="project in featuredProjects"
<!-- Bento grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6 auto-rows-fr">
<div
v-for="(project, index) in featuredProjects"
:key="project.id"
:project="project"
/>
:class="[
index === 0 ? 'md:col-span-2 md:row-span-1' : '',
]"
>
<ProjectCard :project="project" :class="{ 'h-full': true }" />
</div>
</div>
</div>
</section>
app/components/sections/HeroSection.vue
+46 -19
View File
@@ -7,18 +7,22 @@ const localePath = useLocalePath()
<section class="relative min-h-[80vh] flex items-center overflow-hidden bg-white dark:bg-gray-950">
<!-- Dot grid background pattern -->
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" aria-hidden="true">
<div class="absolute inset-0" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 32px 32px;" />
<div class="absolute inset-0"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 32px 32px;" />
</div>
<!-- Gradient glow -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl pointer-events-none" aria-hidden="true" />
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl pointer-events-none"
aria-hidden="true" />
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-16 md:py-24">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<!-- Left: Content -->
<div class="space-y-8">
<!-- Status badge -->
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 dark:bg-brand-500/15 border border-brand-500/20">
<div
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 dark:bg-brand-500/15 border border-brand-500/20">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75" />
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500" />
@@ -28,8 +32,11 @@ const localePath = useLocalePath()
<div class="space-y-4">
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1]">
<span class="text-gray-900 dark:text-white">{{ t('home.title').split(' ').slice(0, -2).join(' ') }} </span>
<span class="bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent">{{ t('home.title').split(' ').slice(-2).join(' ') }}</span>
<span class="text-gray-900 dark:text-white">{{ t('home.title').split(' ').slice(0, -2).join(' ') }}
</span>
<span
class="bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent">{{
t('home.title').split(' ').slice(-2).join(' ') }}</span>
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-xl leading-relaxed">
{{ t('home.subtitle') }}
@@ -38,15 +45,27 @@ const localePath = useLocalePath()
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row gap-3">
<UButton :to="localePath('/projects')" size="xl" icon="i-lucide-arrow-right" trailing class="font-semibold">
<NuxtLink
:to="localePath('/projects')"
class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40"
>
{{ t('home.cta.viewProjects') }}
</UButton>
<UButton :to="localePath('/fiverr')" size="xl" variant="outline" icon="i-lucide-dollar-sign" trailing class="font-semibold">
<UIcon name="i-lucide-arrow-right" class="w-4 h-4" />
</NuxtLink>
<NuxtLink
:to="localePath('/fiverr')"
class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-brand-500/50 hover:text-brand-500 font-semibold text-sm transition-all duration-200"
>
{{ t('nav.fiverr') }}
</UButton>
<UButton :to="localePath('/contact')" size="xl" variant="ghost" icon="i-lucide-message-circle" trailing class="font-semibold">
<UIcon name="i-lucide-external-link" class="w-4 h-4" />
</NuxtLink>
<NuxtLink
:to="localePath('/contact')"
class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl text-gray-600 dark:text-gray-400 hover:text-brand-500 font-semibold text-sm transition-all duration-200"
>
{{ t('home.cta.contactMe') }}
</UButton>
<UIcon name="i-lucide-message-circle" class="w-4 h-4" />
</NuxtLink>
</div>
</div>
@@ -54,9 +73,11 @@ const localePath = useLocalePath()
<div class="hidden lg:block" aria-hidden="true">
<div class="relative">
<!-- Terminal window -->
<div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 shadow-2xl shadow-brand-500/5 overflow-hidden">
<div
class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 shadow-2xl shadow-brand-500/5 overflow-hidden">
<!-- Title bar -->
<div class="flex items-center gap-2 px-4 py-3 bg-gray-100 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700/50">
<div
class="flex items-center gap-2 px-4 py-3 bg-gray-100 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700/50">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-400/80" />
<div class="w-3 h-3 rounded-full bg-yellow-400/80" />
@@ -75,11 +96,13 @@ const localePath = useLocalePath()
</div>
<div class="pl-6">
<span class="text-purple-500 dark:text-purple-400">name</span><span class="text-gray-500">: </span>
<span class="text-amber-600 dark:text-amber-400">'Killian Dalcin'</span><span class="text-gray-500">,</span>
<span class="text-amber-600 dark:text-amber-400">'Killian\' DAL-CIN'</span><span
class="text-gray-500">,</span>
</div>
<div class="pl-6">
<span class="text-purple-500 dark:text-purple-400">role</span><span class="text-gray-500">: </span>
<span class="text-amber-600 dark:text-amber-400">'Full Stack Dev'</span><span class="text-gray-500">,</span>
<span class="text-amber-600 dark:text-amber-400">'Full Stack Dev'</span><span
class="text-gray-500">,</span>
</div>
<div class="pl-6">
<span class="text-purple-500 dark:text-purple-400">skills</span><span class="text-gray-500">: [</span>
@@ -91,7 +114,8 @@ const localePath = useLocalePath()
</div>
<div class="pl-10">
<span class="text-amber-600 dark:text-amber-400">'Java'</span><span class="text-gray-500">, </span>
<span class="text-amber-600 dark:text-amber-400">'Hytale Plugins'</span><span class="text-gray-500">,</span>
<span class="text-amber-600 dark:text-amber-400">'Hytale Plugins'</span><span
class="text-gray-500">,</span>
</div>
<div class="pl-10">
<span class="text-amber-600 dark:text-amber-400">'Docker'</span><span class="text-gray-500">, </span>
@@ -101,7 +125,8 @@ const localePath = useLocalePath()
<span class="text-gray-500">],</span>
</div>
<div class="pl-6">
<span class="text-purple-500 dark:text-purple-400">available</span><span class="text-gray-500">: </span>
<span class="text-purple-500 dark:text-purple-400">available</span><span class="text-gray-500">:
</span>
<span class="text-brand-500">true</span>
</div>
<div>
@@ -116,11 +141,13 @@ const localePath = useLocalePath()
</div>
<!-- Floating decoration cards -->
<div class="absolute -top-4 -right-4 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
<div
class="absolute -top-4 -right-4 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-brand-500" />
<span class="text-gray-700 dark:text-gray-300">50+ projects</span>
</div>
<div class="absolute -bottom-3 -left-3 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
<div
class="absolute -bottom-3 -left-3 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
<UIcon name="i-lucide-star" class="text-yellow-400 w-3.5 h-3.5" />
<span class="text-gray-700 dark:text-gray-300">5.0 rating</span>
</div>
app/components/sections/ServicesSection.vue
+23 -14
View File
@@ -26,27 +26,36 @@ const services = computed(() => [
</script>
<template>
<section class="py-20 md:py-28 px-4 bg-gray-50 dark:bg-gray-900/50 rounded-3xl mx-2 md:mx-0">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Services</span>
<h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('home.services.title') }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">{{ t('home.services.subtitle') }}</p>
<section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
<!-- Subtle background gradient -->
<div class="absolute inset-0 bg-gray-50/80 dark:bg-gray-900/40" aria-hidden="true" />
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-500/5 dark:bg-brand-500/8 rounded-full blur-3xl -translate-y-1/2 translate-x-1/4 pointer-events-none" aria-hidden="true" />
<div class="relative z-10 max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// services</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('home.services.title') }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl mx-auto leading-relaxed">{{ t('home.services.subtitle') }}</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-6">
<div
v-for="(service, index) in services"
:key="index"
class="group relative rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5 hover:-translate-y-0.5"
class="group relative rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm p-7 sm:p-8 transition-all duration-300 hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1"
>
<!-- Icon -->
<div class="w-12 h-12 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mb-5 transition-colors group-hover:bg-brand-500/20">
<UIcon :name="service.icon" class="text-brand-600 dark:text-brand-400 text-xl" />
</div>
<!-- Hover glow effect -->
<div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-500/0 to-emerald-500/0 group-hover:from-brand-500/5 group-hover:to-emerald-500/5 transition-all duration-500 pointer-events-none" aria-hidden="true" />
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ service.title }}</h3>
<p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ service.description }}</p>
<div class="relative z-10">
<!-- Icon -->
<div class="w-12 h-12 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mb-6 transition-all duration-300 group-hover:bg-brand-500/20 group-hover:scale-110">
<UIcon :name="service.icon" class="text-brand-600 dark:text-brand-400 text-xl" />
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">{{ service.title }}</h3>
<p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ service.description }}</p>
</div>
</div>
</div>
</div>
app/components/sections/TestimonialsSection.vue
+27 -24
View File
@@ -5,40 +5,43 @@ const { t } = useI18n()
</script>
<template>
<section class="py-20 md:py-28 px-4">
<section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">{{ t('testimonials.title') }}</span>
<h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('testimonials.title') }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">{{ t('testimonials.subtitle') }}</p>
<div class="text-center mb-16">
<span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// testimonials</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('testimonials.title') }}</h2>
<p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl mx-auto leading-relaxed">{{ t('testimonials.subtitle') }}</p>
<!-- Stats row -->
<div class="flex justify-center gap-10 mt-10">
<div class="text-center">
<p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.totalReviews }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.clients') }}</p>
<div class="flex justify-center gap-8 sm:gap-12 mt-12">
<div class="text-center group">
<p class="text-4xl sm:text-5xl font-black bg-gradient-to-b from-brand-400 to-brand-600 bg-clip-text text-transparent">{{ testimonialsStats.totalReviews }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 font-medium">{{ t('testimonials.stats.clients') }}</p>
</div>
<div class="w-px bg-gray-200 dark:bg-gray-800" />
<div class="text-center">
<p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.averageRating }}/5</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.rating') }}</p>
<div class="w-px bg-gradient-to-b from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
<div class="text-center group">
<p class="text-4xl sm:text-5xl font-black bg-gradient-to-b from-brand-400 to-brand-600 bg-clip-text text-transparent">{{ testimonialsStats.averageRating }}/5</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 font-medium">{{ t('testimonials.stats.rating') }}</p>
</div>
<div class="w-px bg-gray-200 dark:bg-gray-800" />
<div class="text-center">
<p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.projectsCompleted }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.projects') }}</p>
<div class="w-px bg-gradient-to-b from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
<div class="text-center group">
<p class="text-4xl sm:text-5xl font-black bg-gradient-to-b from-brand-400 to-brand-600 bg-clip-text text-transparent">{{ testimonialsStats.projectsCompleted }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 font-medium">{{ t('testimonials.stats.projects') }}</p>
</div>
</div>
</div>
<!-- Horizontal scrolling testimonials -->
<div class="flex gap-6 overflow-x-auto pb-4 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
<div class="flex gap-5 overflow-x-auto overflow-y-visible pb-8 -mx-4 px-4 pt-2 snap-x snap-mandatory scrollbar-hide">
<div
v-for="(testimonial, index) in testimonials"
:key="index"
class="flex-none w-[340px] sm:w-[380px] snap-start"
class="flex-none w-[340px] sm:w-[400px] snap-start"
>
<div class="h-full rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 flex flex-col gap-4 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5">
<div class="h-full relative rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm p-7 flex flex-col gap-5 transition-all duration-300 hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1">
<!-- Decorative quote mark -->
<div class="absolute top-5 right-6 text-6xl font-serif text-brand-500/10 dark:text-brand-400/10 leading-none select-none pointer-events-none" aria-hidden="true">"</div>
<!-- Rating stars -->
<div class="flex gap-1">
<UIcon
@@ -51,23 +54,23 @@ const { t } = useI18n()
</div>
<!-- Quote -->
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed flex-1 italic">
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed flex-1 relative z-10">
"{{ testimonial.content }}"
</p>
<!-- Author -->
<div class="flex items-center gap-3 pt-2 border-t border-gray-100 dark:border-gray-800">
<div class="flex items-center gap-3 pt-4 border-t border-gray-100 dark:border-gray-800/60">
<NuxtImg
:src="testimonial.avatar"
:alt="testimonial.name"
width="40"
height="40"
class="rounded-full ring-2 ring-gray-100 dark:ring-gray-800"
class="rounded-full ring-2 ring-brand-500/20 dark:ring-brand-400/20"
loading="lazy"
/>
<div>
<p class="font-semibold text-sm text-gray-900 dark:text-white">{{ testimonial.name }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ testimonial.project_type }} - {{ testimonial.platform }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ testimonial.project_type }} - {{ testimonial.platform }}</p>
</div>
</div>
</div>