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

feat: redesign entire portfolio with bold modern dark theme

Browse Source 
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:
MrKayJayDee
2026-04-08 19:08:55 +02:00
parent 578a0afa1a
commit 355df8dbbe
17 changed files with 933 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/sections/ServicesSection.vue
+19 -13
View File
@@ -26,22 +26,28 @@ const services = computed(() => [
</script>
<template>
<section class="py-16 px-4">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">{{ t('home.services.title') }}</h2>
<p class="text-lg text-muted max-w-2xl mx-auto">{{ t('home.services.subtitle') }}</p>
<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>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<UCard v-for="(service, index) in services" :key="index">
<div class="flex items-start gap-4">
<UIcon :name="service.icon" class="text-primary text-2xl shrink-0 mt-1" />
<div>
<h3 class="text-xl font-bold mb-2">{{ service.title }}</h3>
<p class="text-muted">{{ service.description }}</p>
</div>
<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"
>
<!-- 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>
</UCard>
<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>
</div>
</div>
</section>