fix: update portfolio branding to "Killian' DAL-CIN" across all documentation and components
- 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:
@@ -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 & 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user