<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Hugo Schroder - Développeur Full-Stack & UI Designer</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"><style>
@font-face {
font-family: 'Satoshi';
src: url('/fonts/Satoshi-Variable.woff2') format('woff2'),
url('/fonts/Satoshi-Variable.woff') format('woff');
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
url('/fonts/Satoshi-VariableItalic.woff') format('woff');
font-weight: 300 900;
font-style: italic;
font-display: swap;
}
</style><style>.nav-link[data-v-cbba6a76]{font-weight:500;position:relative;--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1));transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nav-link[data-v-cbba6a76]:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.nav-link-active[data-v-cbba6a76]{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.nav-link-active[data-v-cbba6a76]:after{bottom:-1rem;content:"";height:.125rem;left:0;position:absolute;right:0;--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.nav-link-mobile[data-v-cbba6a76]{font-weight:500;padding-bottom:.5rem;padding-top:.5rem;--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1));transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nav-link-mobile[data-v-cbba6a76]:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.nav-link-mobile-active[data-v-cbba6a76]{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}</style><link rel="stylesheet" href="/_nuxt/entry.MVpwLVCV.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/_nuxt/B1jOpF48.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CN6EhrS8.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CDEK1q62.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/DlAUqK2U.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/B7NDCtjz.js"><link rel="preload" as="fetch" fetchpriority="low" crossorigin="anonymous" href="/_nuxt/builds/meta/fec116af-4552-43c1-9380-3bd0918dc655.json"><meta name="description" content="Je transforme vos idées en solutions web performantes et bien pensées. Développeur freelance Vue.js/Nuxt.js & UI designer passionné par la création, l'innovation et le design."><meta name="keywords" content="nuxt.js, vue.js, typescript, tailwind css, node.js, développeur web, freelance, seo, performance, full-stack, javascript, ui design, applications web, portfolio, missions freelance, développement web, frontend, backend, responsive design, optimisation"><meta name="author" content="Hugo Schroder"><meta property="og:type" content="website"><meta property="og:title" content="Hugo Schroder - Développeur Full-Stack & UI Designer"><meta property="og:description" content="Je transforme vos idées en solutions web performantes et bien pensées. Développeur freelance Vue.js/Nuxt.js & UI designer passionné par la création, l'innovation et le design."><meta property="og:url" content="https://hugoschroder.dev"><meta property="og:site_name" content="Hugo Schroder"><meta property="og:image" content="https://hugoschroder.dev/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="Hugo Schroder - Développeur Nuxt.js & Vue.js"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Hugo Schroder - Développeur Full-Stack & UI Designer"><meta name="twitter:description" content="Je transforme vos idées en solutions web performantes et bien pensées. Développeur freelance Vue.js/Nuxt.js & UI designer passionné par la création, l'innovation et le design."><meta name="twitter:image" content="https://hugoschroder.dev/og-image.png"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://hugoschroder.dev"><script type="module" src="/_nuxt/B1jOpF48.js" crossorigin></script></head><body><div id="__nuxt"><div><div></div><div class="min-h-screen bg-white" data-v-cbba6a76><nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200" data-v-cbba6a76><div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12" data-v-cbba6a76><div class="flex items-center justify-between h-16" data-v-cbba6a76><a aria-current="page" href="/" class="router-link-active router-link-exact-active flex items-center space-x-2 group" data-v-cbba6a76><div class="w-8 h-8 rounded-lg overflow-hidden" data-v-cbba6a76><img src="/favicon-96x96.png" alt="Hugo Schroder" class="w-full h-full object-cover" data-v-cbba6a76></div><div class="flex flex-col" data-v-cbba6a76><span class="font-bold text-gray-900 group-hover:text-primary-600 transition-colors leading-tight" data-v-cbba6a76> Hugo Schroder </span></div></a><div class="hidden md:flex items-center space-x-8" data-v-cbba6a76><a aria-current="page" href="/" class="router-link-active router-link-exact-active nav-link nav-link-active" data-v-cbba6a76> Accueil </a><a href="/about" class="nav-link" data-v-cbba6a76> À propos </a><a href="/projects" class="nav-link" data-v-cbba6a76> Portfolio </a><a href="/blog" class="nav-link" data-v-cbba6a76> Blog </a><a href="/simulateur-prix" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-medium rounded-lg transition-all duration-200 shadow-md hover:shadow-lg" data-v-cbba6a76> Simulateur </a><a href="/contact" class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors duration-200" data-v-cbba6a76> Contact </a></div><button class="md:hidden p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors" data-v-cbba6a76><svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" data-v-cbba6a76><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-v-cbba6a76></path></svg></button></div><!----></div></nav><main class="pt-16" data-v-cbba6a76><!--[--><div><section class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"><div class="absolute inset-0"><div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-blue-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div><div class="absolute top-1/3 right-1/4 w-96 h-96 bg-gradient-to-r from-yellow-400 to-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div><div class="absolute bottom-1/4 left-1/3 w-96 h-96 bg-gradient-to-r from-green-400 to-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div><div class="absolute inset-0 bg-grid-white/[0.02] bg-[size:50px_50px]"></div></div><div class="absolute top-20 left-20 transform-gpu"><div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg shadow-2xl animate-float transform rotate-12 hover:rotate-45 transition-transform duration-700"></div></div><div class="absolute bottom-32 right-20 transform-gpu"><div class="w-12 h-12 bg-gradient-to-br from-pink-400 to-purple-600 rounded-full shadow-2xl animate-float-reverse transform -rotate-12 hover:rotate-45 transition-transform duration-700" style="animation-delay:1s;"></div></div><div class="absolute top-1/3 right-32 transform-gpu"><div class="w-20 h-20 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-xl shadow-2xl animate-float transform rotate-45 hover:rotate-90 transition-transform duration-700" style="animation-delay:2s;"></div></div><div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 relative z-10"><div class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 md:p-12 shadow-2xl transform hover:scale-105 transition-all duration-500 animate-fade-in"><div class="text-center space-y-8"><div class="space-y-6"><h1 class="title-hero text-white"> Je transforme vos idées en <span class="block bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 bg-clip-text text-transparent animate-pulse"> solutions web performantes et bien pensées </span></h1><div class="space-y-4"><p class="text-description text-gray-200 max-w-4xl mx-auto"> Développeur full-stack & UI designer freelance. Je crée des expériences digitales innovantes en mêlant <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent font-semibold">création, design et expérimentation</span></p><div class="flex flex-col items-center gap-4"><div class="flex w-fit items-center gap-4 px-6 py-3 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 backdrop-blur-sm border border-cyan-300/30 rounded-2xl"><div class="flex items-center gap-3"><div class="w-3 h-3 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full animate-pulse"></div><span class="text-cyan-300 text-lg font-semibold">Développeur Vue.js/Nuxt.js & NestJS</span></div></div><div class="flex w-fit items-center gap-3 px-4 py-2 bg-gradient-to-r from-green-500/20 to-emerald-500/20 backdrop-blur-sm border border-green-400/30 rounded-full"><div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div><span class="text-green-300 text-lg font-medium">Disponible pour missions freelance</span></div></div></div></div></div><div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-12"><a href="/projects" class="group relative inline-flex items-center px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold rounded-2xl shadow-2xl hover:shadow-cyan-500/50 transform hover:scale-110 hover:-translate-y-1 transition-all duration-300 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><span class="relative z-10 text-button text-lg">Voir mes projets</span><svg class="relative z-10 w-6 h-6 ml-3 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a><a href="/contact" class="group relative inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white font-bold rounded-2xl shadow-2xl hover:shadow-purple-500/50 transform hover:scale-110 hover:-translate-y-1 transition-all duration-300 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><span class="relative z-10 text-button text-lg">Travaillons ensemble</span><svg class="relative z-10 w-6 h-6 ml-3 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a></div></div></div></section><section class="py-16 md:py-24 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden"><div class="absolute inset-0"><div class="absolute top-1/4 right-1/4 w-96 h-96 bg-gradient-to-r from-blue-400/20 to-cyan-600/20 rounded-full mix-blend-multiply filter blur-xl opacity-50 animate-blob animation-delay-2000"></div></div><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"><div class="space-y-6 animate-slide-up"><div class="space-y-4"><h2 class="title-section text-white"> Créons ensemble votre <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">projet digital</span></h2><p class="text-paragraph text-gray-300"> Passionné par la tech, l'innovation et la création, je transforme vos idées en solutions concrètes, utiles et intuitives. Mon approche allie expertise technique et design centré utilisateur pour créer des expériences qui ont un véritable impact. </p></div><div class="grid grid-cols-2 gap-6"><div class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-xl p-4 text-center"><div class="text-3xl font-bold text-cyan-400">10+</div><div class="text-small text-gray-300">Projets réalisés</div></div><div class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-xl p-4 text-center"><div class="text-3xl font-bold text-cyan-400">2+</div><div class="text-small text-gray-300">Années d'expérience</div></div><div class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-xl p-4 text-center"><div class="text-3xl font-bold text-cyan-400">5+</div><div class="text-small text-gray-300">Technologies maîtrisées</div></div><div class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-xl p-4 text-center"><div class="text-3xl font-bold text-cyan-400">24/7</div><div class="text-small text-gray-300">Support disponible</div></div></div><a href="/about" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium rounded-lg hover:from-cyan-600 hover:to-blue-700 transition-all group shadow-lg hover:shadow-cyan-500/25"> En savoir plus <svg class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a></div><div class="relative"><div class="aspect-square backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl p-8 relative overflow-hidden hover:bg-white/20 transition-all duration-300"><div class="absolute inset-0 bg-gradient-to-br from-cyan-500/20 to-purple-600/20 opacity-50"></div><div class="absolute inset-0 flex items-center justify-center"><div class="text-6xl animate-bounce">👨💻</div></div><div class="absolute top-4 right-4 w-8 h-8 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full opacity-60 animate-pulse"></div><div class="absolute bottom-4 left-4 w-6 h-6 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full opacity-40 animate-pulse" style="animation-delay:1s;"></div><div class="absolute top-1/2 left-4 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full opacity-30 animate-pulse" style="animation-delay:2s;"></div></div></div></div></div></section><section class="py-16 md:py-24 bg-gradient-to-br from-slate-800 via-slate-900 to-slate-800 relative overflow-hidden"><div class="absolute inset-0"><div class="absolute bottom-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-purple-400/20 to-pink-600/20 rounded-full mix-blend-multiply filter blur-xl opacity-50 animate-blob animation-delay-4000"></div></div><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="text-center space-y-4 mb-16"><h2 class="title-section text-white"> Mes <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">services</span></h2><p class="text-lg text-gray-300 max-w-2xl mx-auto"> Des solutions complètes pour donner vie à vos projets digitaux </p></div><div class="grid grid-cols-1 md:grid-cols-3 gap-8"><!--[--><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">🚀</div><h3 class="title-card text-white mb-4">Développement Full-Stack</h3><p class="text-gray-300 mb-6 leading-relaxed">Applications web ou mobiles complètes avec NestJS backend et Vue.js/Nuxt.js frontend.</p><ul class="space-y-2"><!--[--><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Applications Nuxt.js/Vue.js</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Sites web ou mobiles responsive</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> APIs REST sécurisées</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Interfaces utilisateur modernes</li><!--]--></ul></div><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">⚙️</div><h3 class="title-card text-white mb-4">Développement Backend</h3><p class="text-gray-300 mb-6 leading-relaxed">Solutions serveur robustes avec NestJS et gestion de bases de données.</p><ul class="space-y-2"><!--[--><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Applications NestJS</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> APIs REST performantes</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Bases de données PostgreSQL</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Architecture MVC</li><!--]--></ul></div><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">🔧</div><h3 class="title-card text-white mb-4">Maintenance & Support</h3><p class="text-gray-300 mb-6 leading-relaxed">Amélioration et maintenance d'applications web existantes.</p><ul class="space-y-2"><!--[--><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Refactoring de code</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Optimisation des performances</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Correction de bugs</li><li class="flex items-center text-sm text-gray-300"><svg class="w-4 h-4 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Mise à jour technologique</li><!--]--></ul></div><!--]--></div></div></section><section class="py-16 md:py-24 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden"><div class="absolute inset-0"><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-purple-400/20 to-pink-600/20 rounded-full mix-blend-multiply filter blur-xl opacity-50 animate-blob"></div></div><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="text-center space-y-4 mb-16"><h2 class="title-section text-white"> Ma <span class="bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">vision</span></h2><p class="text-paragraph text-gray-300 max-w-2xl mx-auto"> Comment je travaille et ce qui guide mes projets </p></div><div class="grid grid-cols-1 md:grid-cols-3 gap-8"><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">🧪</div><h3 class="title-card text-white mb-4">Expérimentation continue</h3><p class="text-card text-gray-300"> Je crois que les meilleures idées naissent de l'expérimentation. Tester, apprendre et itérer font partie intégrante de mon processus créatif. </p></div><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">🎨</div><h3 class="title-card text-white mb-4">Design centré utilisateur</h3><p class="text-card text-gray-300"> Mon objectif est de concevoir des solutions simples, utiles et efficaces. Chaque décision de design est guidée par les besoins réels des utilisateurs. </p></div><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">🚀</div><h3 class="title-card text-white mb-4">Créer, apprendre, partager</h3><p class="text-card text-gray-300"> Le développement ne se résume pas à écrire du code. C'est créer, apprendre en continu et partager ses connaissances pour faire grandir la communauté. </p></div></div></div></section><section class="py-16 md:py-24 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="text-center space-y-4 mb-16"><h2 class="title-section text-white"> Projets <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">récents</span></h2><p class="text-paragraph text-gray-300 max-w-2xl mx-auto"> Découvrez quelques-unes de mes réalisations les plus récentes </p></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"><!--[--><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">🏢</div><h3 class="title-card text-white mb-4">Application interne alternance</h3><p class="text-card text-gray-300 mb-6">Optimisation de la gestion des temps : réduction de 30% du temps de saisie grâce à une application web complète développée avec Symfony et Vue.js.</p><div class="flex flex-wrap gap-2"><!--[--><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Quasar</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">PostgreSQL</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Symfony</span><!--]--></div></div><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">🎓</div><h3 class="title-card text-white mb-4">Gfaim</h3><p class="text-card text-gray-300 mb-6">Solution anti-gaspillage alimentaire : application mobile avec gestion intelligente du frigo et suggestions de recettes personnalisées.</p><div class="flex flex-wrap gap-2"><!--[--><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Java</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Quarkus</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Android</span><!--]--></div></div><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-purple-400/30 transition-all duration-300 group"><div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">💼</div><h3 class="title-card text-white mb-4">Portfolio personnel</h3><p class="text-card text-gray-300 mb-6">Vitrine professionnelle moderne avec Nuxt.js et design 3D avec une UX optimisée.</p><div class="flex flex-wrap gap-2"><!--[--><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Nuxt.js</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Vue.js</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Tailwind CSS</span><span class="px-3 py-1 bg-primary-600/20 text-primary-300 rounded-full text-badge">Markdown</span><!--]--></div></div><!--]--></div><div class="text-center"><a href="/projects" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium rounded-lg hover:from-cyan-600 hover:to-blue-700 transition-all shadow-lg hover:shadow-cyan-500/25 transform hover:scale-105"> Voir tous mes projets </a></div></div></section><section class="py-16 md:py-24 bg-gradient-to-br from-slate-800 via-slate-900 to-slate-800 relative overflow-hidden"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"><div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-3xl p-12 space-y-8"><h2 class="title-section text-white"> Prêt à <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">démarrer</span> votre projet ? </h2><p class="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed"> Discutons de vos besoins et créons ensemble quelque chose d'exceptionnel </p><div class="flex flex-col sm:flex-row gap-6 justify-center items-center"><a href="/contact" class="group relative inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-400 to-pink-500 text-white font-bold rounded-2xl shadow-2xl hover:shadow-cyan-500/50 transform hover:scale-110 hover:-translate-y-1 transition-all duration-300"><span class="text-lg">Démarrer un projet</span><svg class="w-6 h-6 ml-3 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a><a href="mailto:contact@hugoschroder.dev?subject=Contact%20depuis%20le%20portfolio&body=Bonjour%20Hugo,%0D%0A%0D%0AJe%20souhaiterais%20discuter%20d'un%20projet%20avec%20vous.%0D%0A%0D%0AType%20de%20projet%20:%20%0D%0ABudget%20estimé%20:%20%0D%0ADescription%20:%20%0D%0A%0D%0AMerci%20!" class="group relative inline-flex items-center px-8 py-4 bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white font-bold rounded-2xl shadow-xl hover:bg-white/20 hover:border-purple-400/50 hover:shadow-purple-500/25 transform hover:scale-110 hover:-translate-y-1 transition-all duration-300"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.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><span class="text-lg">contact@hugoschroder.dev</span></a></div></div></div></section></div><!--]--></main><footer class="bg-gray-900 text-white" data-v-cbba6a76><div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-12" data-v-cbba6a76><div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-v-cbba6a76><div class="space-y-4" data-v-cbba6a76><div class="flex items-center space-x-2" data-v-cbba6a76><div class="w-8 h-8 rounded-lg overflow-hidden" data-v-cbba6a76><img src="/images/logo.png" alt="Hugo Schroder" class="w-full h-full object-cover" data-v-cbba6a76></div><span class="font-semibold text-white" data-v-cbba6a76>Hugo Schroder</span></div><p class="text-gray-400 text-sm" data-v-cbba6a76> Développeur web full-stack passionné par les technologies modernes. </p></div><div class="space-y-4" data-v-cbba6a76><h3 class="font-semibold text-white" data-v-cbba6a76>Navigation</h3><div class="flex flex-col space-y-2" data-v-cbba6a76><a aria-current="page" href="/" class="router-link-active router-link-exact-active text-gray-400 hover:text-white transition-colors text-sm" data-v-cbba6a76>Accueil</a><a href="/about" class="text-gray-400 hover:text-white transition-colors text-sm" data-v-cbba6a76>À propos</a><a href="/projects" class="text-gray-400 hover:text-white transition-colors text-sm" data-v-cbba6a76>Portfolio</a><a href="/blog" class="text-gray-400 hover:text-white transition-colors text-sm" data-v-cbba6a76>Blog</a><a href="/simulateur-prix" class="text-gray-400 hover:text-cyan-300 transition-colors text-sm font-medium" data-v-cbba6a76>Simulateur de prix</a><a href="/contact" class="text-gray-400 hover:text-white transition-colors text-sm" data-v-cbba6a76>Contact</a><a href="/legal" class="text-gray-400 hover:text-white transition-colors text-sm" data-v-cbba6a76>Mentions légales</a></div></div><div class="space-y-4" data-v-cbba6a76><h3 class="font-semibold text-white" data-v-cbba6a76>Contact</h3><div class="flex flex-col space-y-2 text-sm text-gray-400" data-v-cbba6a76><a href="mailto:contact@hugoschroder.dev" class="hover:text-white transition-colors" data-v-cbba6a76> contact@hugoschroder.dev </a><div class="flex space-x-4 mt-4" data-v-cbba6a76><a href="https://www.linkedin.com/in/hugo-schroder/" class="text-gray-400 hover:text-white transition-colors" target="_blank" rel="noopener noreferrer" data-v-cbba6a76><span class="sr-only" data-v-cbba6a76>LinkedIn</span><svg class="w-5 h-5" fill="currentColor" viewbox="0 0 20 20" data-v-cbba6a76><path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" data-v-cbba6a76></path></svg></a><a href="https://github.com/hijackcs" class="text-gray-400 hover:text-white transition-colors" target="_blank" rel="noopener noreferrer" data-v-cbba6a76><span class="sr-only" data-v-cbba6a76>GitHub</span><svg class="w-5 h-5" fill="currentColor" viewbox="0 0 20 20" data-v-cbba6a76><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" data-v-cbba6a76></path></svg></a><a href="https://twitter.com/hijack_dev" class="text-gray-400 hover:text-white transition-colors" target="_blank" rel="noopener noreferrer" data-v-cbba6a76><span class="sr-only" data-v-cbba6a76>Twitter / X</span><svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24" data-v-cbba6a76><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" data-v-cbba6a76></path></svg></a><a href="https://instagram.com/hijack_dev" class="text-gray-400 hover:text-white transition-colors" target="_blank" rel="noopener noreferrer" data-v-cbba6a76><span class="sr-only" data-v-cbba6a76>Instagram</span><svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24" data-v-cbba6a76><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" data-v-cbba6a76></path></svg></a></div></div></div></div><div class="border-t border-gray-800 mt-8 pt-8 text-center space-y-2" data-v-cbba6a76><p class="text-gray-400 text-sm" data-v-cbba6a76> © 2025 Hugo Schroder. Tous droits réservés. </p><p class="text-gray-500 text-xs" data-v-cbba6a76><a href="/legal" class="hover:text-gray-300 transition-colors" data-v-cbba6a76>Mentions légales</a></p></div></div></footer></div><!----></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":4,"once":6,"_errors":7,"serverRendered":9,"path":10},["ShallowReactive",3],{},["Reactive",5],{},["Set"],["ShallowReactive",8],{},true,"/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{wsUrl:""}},app:{baseURL:"/",buildId:"fec116af-4552-43c1-9380-3bd0918dc655",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
