feat: redesign entire portfolio with bold modern dark theme
Complete visual overhaul of all pages and components with generous spacing, bold typography, hover effects, gradient accents, and section differentiation. Hero features animated terminal mockup and gradient text. Cards use hover transforms with brand-colored shadows. CTAs use gradient backgrounds. All i18n keys, data structures, SEO meta, and composable logic preserved.
This commit is contained in:
@@ -1,26 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="py-20 md:py-32">
|
||||
<div class="max-w-4xl mx-auto text-center px-4">
|
||||
<h1 class="text-4xl md:text-6xl font-bold mb-6">
|
||||
{{ t('home.title') }}
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-muted mb-10">
|
||||
{{ t('home.subtitle') }}
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<UButton to="/projects" size="xl" icon="i-lucide-arrow-right" trailing>
|
||||
{{ t('home.cta.viewProjects') }}
|
||||
</UButton>
|
||||
<UButton to="/fiverr" size="xl" variant="outline" icon="i-lucide-dollar-sign" trailing>
|
||||
{{ t('nav.fiverr') }}
|
||||
</UButton>
|
||||
<UButton to="/contact" size="xl" variant="outline" icon="i-lucide-message-circle" trailing>
|
||||
{{ t('home.cta.contactMe') }}
|
||||
</UButton>
|
||||
<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>
|
||||
|
||||
<!-- 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="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">
|
||||
<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" />
|
||||
</span>
|
||||
<span class="text-sm font-medium text-brand-700 dark:text-brand-400">Available for projects</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</h1>
|
||||
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-xl leading-relaxed">
|
||||
{{ t('home.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
{{ t('home.cta.viewProjects') }}
|
||||
</UButton>
|
||||
<UButton :to="localePath('/fiverr')" size="xl" variant="outline" icon="i-lucide-dollar-sign" trailing class="font-semibold">
|
||||
{{ t('nav.fiverr') }}
|
||||
</UButton>
|
||||
<UButton :to="localePath('/contact')" size="xl" variant="ghost" icon="i-lucide-message-circle" trailing class="font-semibold">
|
||||
{{ t('home.cta.contactMe') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Decorative terminal/code block -->
|
||||
<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">
|
||||
<!-- 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 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" />
|
||||
<div class="w-3 h-3 rounded-full bg-green-400/80" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500 ml-2 font-mono">killian@dev ~</span>
|
||||
</div>
|
||||
|
||||
<!-- Code content -->
|
||||
<div class="p-5 font-mono text-sm leading-7 space-y-1">
|
||||
<div>
|
||||
<span class="text-brand-500">const</span>
|
||||
<span class="text-gray-900 dark:text-white"> developer</span>
|
||||
<span class="text-gray-500"> = </span>
|
||||
<span class="text-gray-500">{</span>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="pl-6">
|
||||
<span class="text-purple-500 dark:text-purple-400">skills</span><span class="text-gray-500">: [</span>
|
||||
</div>
|
||||
<div class="pl-10">
|
||||
<span class="text-amber-600 dark:text-amber-400">'Vue.js'</span><span class="text-gray-500">, </span>
|
||||
<span class="text-amber-600 dark:text-amber-400">'Nuxt'</span><span class="text-gray-500">, </span>
|
||||
<span class="text-amber-600 dark:text-amber-400">'Node.js'</span><span class="text-gray-500">,</span>
|
||||
</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>
|
||||
</div>
|
||||
<div class="pl-10">
|
||||
<span class="text-amber-600 dark:text-amber-400">'Docker'</span><span class="text-gray-500">, </span>
|
||||
<span class="text-amber-600 dark:text-amber-400">'TypeScript'</span>
|
||||
</div>
|
||||
<div class="pl-6">
|
||||
<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-brand-500">true</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500">}</span>
|
||||
</div>
|
||||
<!-- Blinking cursor -->
|
||||
<div class="mt-2 flex items-center gap-1">
|
||||
<span class="text-brand-500">$</span>
|
||||
<span class="w-2.5 h-5 bg-brand-500 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user