jules.merienne
/
portfoliojules
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stable version

Browse Source
master
exosky12 1 month ago
parent 1f186eb510
commit c7f9d20e44
11 changed files with 267 additions and 323 deletions
Show Stats Download Patch File Download Diff File

78
apropos.html
Unescape View File

@ -67,78 +67,6 @@
</div>
</div>
<div class="mb-32">
<h2 class="text-3xl font-bold text-gray-900 text-center mb-12">
Mon Parcours
</h2>
<div class="relative max-w-4xl mx-auto">
<div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-purple-500 transform -translate-x-1/2"></div>
<div class="space-y-12">
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="200">
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900">Freelance Designer & Développeur</h3>
<span class="text-purple-600 font-medium">2024 - Présent</span>
</div>
<p class="text-purple-600 mb-3 font-medium">Travail Indépendant</p>
<p class="text-gray-600">
Création de solutions numériques complètes pour des clients variés.
Design UX/UI, développement web et mobile, conseil en stratégie digitale.
</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">React</span>
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Next.js</span>
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">AdonisJS</span>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Node.js</span>
<span class="px-3 py-1 bg-pink-100 text-pink-800 text-sm rounded-full">Figma</span>
</div>
</div>
</div>
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="400">
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900">BUT Informatique</h3>
<span class="text-blue-600 font-medium">2024 - Présent</span>
</div>
<p class="text-blue-600 mb-3 font-medium">Université Clermont Auvergne</p>
<p class="text-gray-600">
Formation complète en développement logiciel, bases de données, réseaux et gestion de projet.
Projets pratiques en équipe et stage en entreprise.
</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Linux</span>
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">C#</span>
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">SQL</span>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Gestion de projet</span>
</div>
</div>
</div>
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="600">
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900">Baccalauréat Général</h3>
<span class="text-green-600 font-medium">2021 - 2024</span>
</div>
<p class="text-green-600 mb-3 font-medium">Lycée Théodore de Banville</p>
<p class="text-gray-600 mb-3">
Spécialités Mathématiques et Numérique et Sciences Informatiques (NSI).
<span class="font-semibold text-gray-800">Mention Bien</span> - Première approche de la programmation et de l'algorithmique.
</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Python</span>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Algorithmique</span>
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">Mathématiques</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-40">
<h2 class="text-3xl font-bold text-gray-900 text-center mb-20 animate-on-scroll" data-animation="fade-up">
Stack Technique
@ -242,9 +170,9 @@
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation();
});
document.addEventListener('DOMContentLoaded', function() {
initNavigation('about');
});
</script>
<script src="animations.js"></script>
</body>

2
contact.html
Unescape View File

@ -280,7 +280,7 @@
<script src="animations.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation();
initNavigation('contact');
});
</script>
</body>

BIN
images/piano.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 KiB

BIN
images/tech.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
images/tennis.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

134
index.html
Unescape View File

@ -15,11 +15,17 @@
<nav id="navbar"></nav>
<main>
<section class="relative flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-40"></div>
<section class="relative min-h-screen bg-white overflow-hidden">
<!-- Background Pattern -->
<div class="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] opacity-20"></div>
<!-- Gradient Orbs -->
<div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div class="absolute top-0 -right-4 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-cyan-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
<div class="relative z-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="grid items-center grid-cols-1 gap-12 lg:grid-cols-2">
<div class="grid items-center grid-cols-1 gap-12 lg:grid-cols-2 min-h-screen py-20">
<div class="text-center lg:text-left">
<div class="mb-6 animate-on-scroll" data-animation="fade-up">
<span class="inline-flex items-center px-4 py-2 mb-4 text-sm font-medium text-blue-800 bg-blue-100 rounded-full">
@ -29,16 +35,16 @@
</div>
<h1 class="mb-6 text-4xl font-bold leading-tight text-gray-900 md:text-6xl animate-on-scroll" data-animation="fade-up" data-delay="50">
Bonjour, je suis
<span class="text-transparent bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text">
Jules Merienne
Étudiant Développeur
<span class="block mt-2 text-transparent bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text">
Fullstack & Designer
</span>
</h1>
<p class="mb-8 text-xl leading-relaxed text-gray-600 animate-on-scroll" data-animation="fade-up" data-delay="100">
Étudiant et freelance <strong>dev web + design</strong>, je transforme vos idées en
<span class="font-semibold text-blue-600">solutions numériques innovantes</span>
et performantes.
Je transforme vos idées en applications web modernes et performantes.
<span class="font-semibold text-blue-600">Du concept au produit</span>,
je vous accompagne dans chaque étape de votre projet.
</p>
<div class="flex flex-col justify-center gap-4 sm:flex-row lg:justify-start animate-on-scroll" data-animation="fade-up" data-delay="150">
@ -46,13 +52,13 @@
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
Discutons ensemble
Discutons de votre projet
</button>
<button onclick="window.location.href='projets.html'" class="btn-secondary magnetic">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
Voir mes projets
Voir mes réalisations
</button>
</div>
@ -81,14 +87,10 @@
<div class="relative">
<img
src="images/My_face.png"
alt="Jules Merienne - Étudiant et freelance dev web + design"
alt="Jules Merienne - Développeur Fullstack"
class="object-cover transition-transform duration-500 border-8 border-white rounded-full shadow-2xl w-80 h-80 md:w-96 md:h-96 hover:scale-105"
>
<div class="absolute flex items-center justify-center w-24 h-24 transition-transform duration-300 rounded-full shadow-lg -bottom-4 -right-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:scale-110">
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
</div>
</div>
</div>
@ -100,42 +102,66 @@
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="mb-16 text-center animate-on-scroll" data-animation="fade-up">
<h2 class="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">
Ce que je peux faire pour vous
Mes Services
</h2>
<p class="max-w-2xl mx-auto text-xl text-gray-600">
Des solutions complètes pour donner vie à vos projets numériques
Des solutions sur mesure pour vos projets
</p>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
<div class="p-8 text-center transition-all duration-300 bg-white border border-gray-100 shadow-lg group rounded-2xl hover:shadow-xl hover:border-blue-200 animate-on-scroll" data-animation="fade-up" data-delay="100">
<div class="flex items-center justify-center w-16 h-16 mx-auto mb-6 transition-transform duration-300 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl group-hover:scale-110">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
<div class="grid grid-cols-1 gap-12 md:grid-cols-3">
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-50 to-white p-8 shadow-lg transition-all duration-300 hover:shadow-2xl animate-on-scroll" data-animation="fade-up" data-delay="100">
<div class="absolute -right-12 -top-12 h-40 w-40 rotate-12 transform bg-gradient-to-br from-blue-600/10 to-purple-600/10 transition-transform duration-500 group-hover:rotate-45"></div>
<div class="relative">
<div class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg transition-transform duration-300 group-hover:scale-110">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900">Développement Fullstack</h3>
<p class="text-gray-600 leading-relaxed">Création d'applications web modernes avec TypeScript, Adonis.js, React et Next.js. Des solutions robustes et performantes pour répondre à vos besoins.</p>
<div class="mt-6 flex flex-wrap gap-2">
<span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">TypeScript</span>
<span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">React</span>
<span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">Next.js</span>
</div>
</div>
<h3 class="mb-3 text-xl font-bold text-gray-900">Développement Fullstack</h3>
<p class="leading-relaxed text-gray-600">Applications web modernes avec TypeScript, Adonis.js, React et Next.js pour des solutions robustes et performantes</p>
</div>
<div class="p-8 text-center transition-all duration-300 bg-white border border-gray-100 shadow-lg group rounded-2xl hover:shadow-xl hover:border-purple-200 animate-on-scroll" data-animation="fade-up" data-delay="200">
<div class="flex items-center justify-center w-16 h-16 mx-auto mb-6 transition-transform duration-300 bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl group-hover:scale-110">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-purple-50 to-white p-8 shadow-lg transition-all duration-300 hover:shadow-2xl animate-on-scroll" data-animation="fade-up" data-delay="200">
<div class="absolute -right-12 -top-12 h-40 w-40 rotate-12 transform bg-gradient-to-br from-purple-600/10 to-pink-600/10 transition-transform duration-500 group-hover:rotate-45"></div>
<div class="relative">
<div class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-purple-600 to-purple-700 text-white shadow-lg transition-transform duration-300 group-hover:scale-110">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900">Applications C#</h3>
<p class="text-gray-600 leading-relaxed">Développement d'applications desktop et web avec C#. Des solutions enterprise robustes et évolutives pour votre entreprise.</p>
<div class="mt-6 flex flex-wrap gap-2">
<span class="rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-800">C#</span>
<span class="rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-800">.NET</span>
<span class="rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-800">MAUI</span>
</div>
</div>
<h3 class="mb-3 text-xl font-bold text-gray-900">Applications C#</h3>
<p class="leading-relaxed text-gray-600">Développement d'applications desktop et web avec C# pour des solutions enterprise robustes et évolutives</p>
</div>
<div class="p-8 text-center transition-all duration-300 bg-white border border-gray-100 shadow-lg group rounded-2xl hover:shadow-xl hover:border-green-200 animate-on-scroll" data-animation="fade-up" data-delay="300">
<div class="flex items-center justify-center w-16 h-16 mx-auto mb-6 transition-transform duration-300 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl group-hover:scale-110">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
</svg>
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-green-50 to-white p-8 shadow-lg transition-all duration-300 hover:shadow-2xl animate-on-scroll" data-animation="fade-up" data-delay="300">
<div class="absolute -right-12 -top-12 h-40 w-40 rotate-12 transform bg-gradient-to-br from-green-600/10 to-emerald-600/10 transition-transform duration-500 group-hover:rotate-45"></div>
<div class="relative">
<div class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-green-600 to-green-700 text-white shadow-lg transition-transform duration-300 group-hover:scale-110">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
</svg>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900">Design UI/UX</h3>
<p class="text-gray-600 leading-relaxed">Création d'interfaces modernes et intuitives. Une attention particulière à l'expérience utilisateur pour des applications qui plaisent.</p>
<div class="mt-6 flex flex-wrap gap-2">
<span class="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">Figma</span>
<span class="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">UI Design</span>
<span class="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">UX Research</span>
</div>
</div>
<h3 class="mb-3 text-xl font-bold text-gray-900">Design UI/UX</h3>
<p class="leading-relaxed text-gray-600">Création d'interfaces modernes et intuitives avec une attention particulière à l'expérience utilisateur</p>
</div>
</div>
</div>
@ -238,11 +264,35 @@
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation();
initNavigation('home');
});
</script>
<script src="animations.js"></script>

296
interets.html
Unescape View File

@ -24,10 +24,10 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll" data-animation="fade-up">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
Mes <span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">Passions</span>
Ce qui me <span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">passionne</span>
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
Découvrez mes passions qui enrichissent mon quotidien et ma créativité.
Au-delà du code, voici ce qui m'anime au quotidien.
</p>
</div>
</div>
@ -37,91 +37,59 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
<div class="order-2 lg:order-1 animate-on-scroll" data-animation="fade-up" data-delay="200">
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl p-8 relative overflow-hidden hover:scale-105 transition-transform duration-300">
<div class="w-full h-64 bg-gradient-to-br from-green-400 to-green-600 rounded-2xl relative overflow-hidden">
<div class="absolute inset-4">
<div class="absolute inset-0 border-4 border-white/80 rounded-lg"></div>
<div class="absolute top-[15%] left-[15%] right-[15%] bottom-1/2 border-b-2 border-white/80"></div>
<div class="absolute top-1/2 left-[15%] right-[15%] bottom-[15%] border-t-2 border-white/80"></div>
<div class="absolute top-[15%] bottom-[15%] left-1/2 w-0.5 bg-white/80 transform -translate-x-1/2"></div>
<div class="absolute top-1/2 left-0 right-0 h-1 bg-white/80 transform -translate-y-1/2"></div>
<div class="absolute top-1/2 left-0 w-2 h-8 bg-white/80 transform -translate-y-1/2"></div>
<div class="absolute top-1/2 right-0 w-2 h-8 bg-white/80 transform -translate-y-1/2"></div>
<div class="absolute top-1/2 left-[10%] right-[10%] h-4 bg-white/40 transform -translate-y-1/2">
<div class="absolute inset-0 flex flex-col justify-between">
<div class="h-px w-full bg-white/60"></div>
<div class="h-px w-full bg-white/60"></div>
<div class="h-px w-full bg-white/60"></div>
</div>
</div>
<div class="absolute top-1/3 right-1/3 w-8 h-8">
<div class="absolute w-full h-full bg-yellow-400 rounded-full shadow-lg animate-bounce">
<div class="absolute inset-1 bg-yellow-300 rounded-full"></div>
<div class="absolute inset-2 border border-yellow-500/30 rounded-full"></div>
</div>
<div class="absolute top-0 left-0 w-full h-full">
<div class="absolute top-1/2 left-1/2 w-1 h-1 bg-yellow-400/30 rounded-full animate-ping"></div>
</div>
</div>
<div class="absolute bottom-1/3 left-1/3 w-16 h-20 transform -rotate-12">
<div class="absolute w-full h-3/4 bg-white rounded-full">
<div class="absolute inset-0.5 bg-gray-100 rounded-full"></div>
<div class="absolute inset-1">
<div class="absolute inset-0 flex justify-between">
<div class="w-px h-full bg-gray-300"></div>
<div class="w-px h-full bg-gray-300"></div>
<div class="w-px h-full bg-gray-300"></div>
<div class="w-px h-full bg-gray-300"></div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="absolute inset-0 flex flex-col justify-between">
<div class="h-px w-full bg-gray-300"></div>
<div class="h-px w-full bg-gray-300"></div>
<div class="h-px w-full bg-gray-300"></div>
<div class="h-px w-full bg-gray-300"></div>
<div class="h-px w-full bg-gray-300"></div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-1/2 w-2 h-1/4 bg-gray-800 transform -translate-x-1/2">
<div class="absolute inset-0.5 bg-gray-700"></div>
</div>
<div class="absolute bottom-0 left-1/2 w-3 h-1/4 bg-gray-600 transform -translate-x-1/2">
<div class="absolute inset-0.5 bg-gray-500"></div>
</div>
<div class="relative rounded-3xl overflow-hidden group">
<img src="images/tennis.jpg" alt="Tennis" class="w-full h-[400px] object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<div class="absolute top-4 right-4 w-3 h-3 bg-white/30 rounded-full animate-pulse"></div>
<div class="absolute bottom-4 left-4 w-2 h-2 bg-white/30 rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
<h3 class="text-2xl font-bold text-white">Tennis</h3>
</div>
<p class="text-white/90 text-lg">Une passion qui m'apporte équilibre et concentration dans mon quotidien.</p>
</div>
</div>
</div>
<div class="order-1 lg:order-2 animate-on-scroll" data-animation="fade-up" data-delay="100">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mr-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
<div class="space-y-6">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Classement 15/4</h4>
<p class="text-gray-600">Une progression constante depuis 2 ans</p>
</div>
</div>
<h2 class="text-3xl font-bold text-gray-900">Tennis</h2>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">
Je pratique le tennis depuis 2 ans. Ce sport m'apporte équilibre et concentration dans mon quotidien.
</p>
<div class="space-y-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-700">Classement : 15/4</span>
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">3 fois par semaine</h4>
<p class="text-gray-600">Entraînement régulier et matches</p>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Compétitions locales</h4>
<p class="text-gray-600">Participation aux tournois de la région</p>
</div>
</div>
</div>
</div>
@ -129,52 +97,59 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
<div class="animate-on-scroll" data-animation="fade-up" data-delay="100">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mr-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
</svg>
<div class="space-y-6">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Piano classique</h4>
<p class="text-gray-600">Débutant passionné depuis 6 mois</p>
</div>
</div>
<h2 class="text-3xl font-bold text-gray-900">Piano</h2>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">
Je débute le piano depuis 6 mois. C'est un moment de détente et d'expression personnelle.
</p>
<div class="space-y-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-purple-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-700">Pratique régulière</span>
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">2 heures par semaine</h4>
<p class="text-gray-600">Pratique personnelle</p>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Répertoire varié</h4>
<p class="text-gray-600">Classique et contemporain</p>
</div>
</div>
</div>
</div>
<div class="animate-on-scroll" data-animation="fade-up" data-delay="200">
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-3xl p-8 relative overflow-hidden hover:scale-105 transition-transform duration-300">
<div class="w-full h-64 bg-gradient-to-b from-gray-800 to-gray-900 rounded-2xl relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 h-20 flex">
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
<div class="flex-1 bg-white rounded-b-sm"></div>
</div>
<div class="absolute bottom-8 left-0 right-0 h-12 flex justify-between px-4">
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
<div class="w-0"></div>
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
<div class="relative rounded-3xl overflow-hidden group">
<img src="images/piano.jpg" alt="Piano" class="w-full h-[400px] object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white">Piano</h3>
</div>
<div class="absolute top-8 left-8 text-purple-400 text-2xl animate-pulse">♪</div>
<div class="absolute top-16 right-12 text-pink-400 text-xl animate-bounce">♫</div>
<div class="absolute top-12 right-6 text-purple-500 text-lg animate-ping">♪</div>
<p class="text-white/90 text-lg">Un moment de détente et d'expression personnelle.</p>
</div>
</div>
</div>
@ -182,48 +157,59 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1 animate-on-scroll" data-animation="fade-up" data-delay="200">
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-3xl p-8 relative overflow-hidden hover:scale-105 transition-transform duration-300">
<div class="w-full h-64 bg-gradient-to-br from-gray-900 to-blue-900 rounded-2xl relative overflow-hidden">
<div class="absolute inset-4 space-y-3">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
</div>
<div class="space-y-2 mt-4">
<div class="h-2 bg-blue-400 rounded w-3/4 animate-pulse"></div>
<div class="h-2 bg-green-400 rounded w-1/2 animate-pulse" style="animation-delay: 0.5s"></div>
<div class="h-2 bg-purple-400 rounded w-5/6 animate-pulse" style="animation-delay: 1s"></div>
<div class="h-2 bg-yellow-400 rounded w-2/3 animate-pulse" style="animation-delay: 1.5s"></div>
<div class="relative rounded-3xl overflow-hidden group">
<img src="images/tech.jpg" alt="Technologie" class="w-full h-[400px] object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white">Technologie</h3>
</div>
<div class="absolute top-6 right-6 w-8 h-8 bg-blue-500 rounded-lg animate-bounce"></div>
<div class="absolute bottom-8 left-6 w-6 h-6 bg-green-500 rounded-full animate-pulse"></div>
<div class="absolute top-12 left-12 w-4 h-4 bg-purple-500 rounded animate-ping"></div>
<p class="text-white/90 text-lg">Une passion pour l'innovation et son impact sur notre quotidien.</p>
</div>
</div>
</div>
<div class="order-1 lg:order-2 animate-on-scroll" data-animation="fade-up" data-delay="100">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mr-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<div class="space-y-6">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Veille technologique</h4>
<p class="text-gray-600">Suivi des dernières innovations</p>
</div>
</div>
<h2 class="text-3xl font-bold text-gray-900">Technologie</h2>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">
Passionné par la technologie, je m'intéresse aux innovations et à leur impact sur notre quotidien.
</p>
<div class="space-y-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-blue-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-gray-700">Veille technologique</span>
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Blog tech</h4>
<p class="text-gray-600">Partage de connaissances et découvertes</p>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">Communauté</h4>
<p class="text-gray-600">Participation aux événements tech</p>
</div>
</div>
</div>
</div>
@ -234,16 +220,16 @@
<section class="py-20 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center animate-on-scroll" data-animation="fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
Parlons de nos passions
On partage les mêmes passions ?
</h2>
<p class="text-xl text-gray-600 mb-8">
Vous partagez ces centres d'intérêt ? Contactez-moi !
N'hésitez pas à me contacter pour en discuter !
</p>
<button onclick="window.location.href='contact.html'" class="btn-premium magnetic">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
Entamons la conversation
Discutons-en
</button>
</div>
</section>

2
navigation.js
Unescape View File

@ -68,7 +68,7 @@ function createNavigation(activePage = 'home') {
<li>
<a
href="${prefix}contact.html"
class="nav-link"
class="nav-link ${activePage === 'contact' ? 'nav-link-active' : ''}"
>
<span class="nav-link-text">Contact</span>
</a>

12
projets/ateliermerienne.html
Unescape View File

@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../../src/css/styles.css">
<link rel="stylesheet" href="../styles.css">
<style>
body {
font-family: 'Inter', sans-serif;
@ -106,10 +106,10 @@
<div class="slider-container overflow-hidden">
<div class="slider-wrapper flex transition-transform duration-500 ease-in-out">
<div class="slider-slide min-w-full">
<img src="../../../public/assets/atelier_merienne.png" alt="Site E-commerce - Aperçu 1" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/atelier_merienne.png" alt="Site E-commerce - Aperçu 1" class="w-full h-auto rounded-xl shadow-lg">
</div>
<div class="slider-slide min-w-full">
<img src="../../../public/assets/atelier_merienne2.png" alt="Site E-commerce - Aperçu 2" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/atelier_merienne2.png" alt="Site E-commerce - Aperçu 2" class="w-full h-auto rounded-xl shadow-lg">
</div>
</div>
</div>
@ -329,8 +329,8 @@
</main>
<!-- Navigation Script -->
<script src="../../js/navigation.js"></script>
<script src="../../js/animations.js"></script>
<script src="../navigation.js"></script>
<script src="../animations.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation('projects');
@ -365,7 +365,7 @@
});
</script>
<a id="cv-download-btn" href="../assets/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
Télécharger CV
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:4px;width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
</a>

20
projets/duckandcover.html
Unescape View File

@ -8,8 +8,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../css/styles.css">
<link rel="stylesheet" href="../../css/slider.css">
<link rel="stylesheet" href="../styles.css">
<link rel="stylesheet" href="../slider.css">
<style>
body {
font-family: 'Inter', sans-serif;
@ -109,16 +109,16 @@
<div class="slider-container overflow-hidden">
<div class="slider-wrapper flex transition-transform duration-500 ease-in-out">
<div class="slider-slide min-w-full">
<img src="../../../public/assets/duckandcover.png" alt="DuckAndCover - Aperçu 1" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/duckandcover.png" alt="DuckAndCover - Aperçu 1" class="w-full h-auto rounded-xl shadow-lg">
</div>
<div class="slider-slide min-w-full">
<img src="../../../public/assets/duckandcover2.png" alt="DuckAndCover - Aperçu 2" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/duckandcover2.png" alt="DuckAndCover - Aperçu 2" class="w-full h-auto rounded-xl shadow-lg">
</div>
<div class="slider-slide min-w-full">
<img src="../../../public/assets/duckandcover3.png" alt="DuckAndCover - Aperçu 3" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/duckandcover3.png" alt="DuckAndCover - Aperçu 3" class="w-full h-auto rounded-xl shadow-lg">
</div>
<div class="slider-slide min-w-full">
<img src="../../../public/assets/duckandcover4.png" alt="DuckAndCover - Aperçu 4" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/duckandcover4.png" alt="DuckAndCover - Aperçu 4" class="w-full h-auto rounded-xl shadow-lg">
</div>
</div>
</div>
@ -355,9 +355,9 @@
</main>
<!-- Navigation Script -->
<script src="../../js/navigation.js"></script>
<script src="../../js/animations.js"></script>
<script src="../../js/slider.js"></script>
<script src="../navigation.js"></script>
<script src="../animations.js"></script>
<script src="../slider.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation('projects');
@ -366,7 +366,7 @@
});
</script>
<a id="cv-download-btn" href="../assets/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
Télécharger CV
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:4px;width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
</a>

46
projets/skillupnow.html
Unescape View File

@ -8,8 +8,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../css/styles.css">
<link rel="stylesheet" href="../../css/slider.css">
<link rel="stylesheet" href="../styles.css">
<link rel="stylesheet" href="../slider.css">
<style>
body {
font-family: 'Inter', sans-serif;
@ -102,13 +102,13 @@
<div class="slider-container overflow-hidden">
<div class="slider-wrapper flex transition-transform duration-500 ease-in-out">
<div class="slider-slide min-w-full">
<img src="../../../public/assets/skillupnow.png" alt="SkillUpNow - Aperçu 1" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/skillupnow.png" alt="SkillUpNow - Aperçu 1" class="w-full h-auto rounded-xl shadow-lg">
</div>
<div class="slider-slide min-w-full">
<img src="../../../public/assets/skillupnow2.png" alt="SkillUpNow - Aperçu 2" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/skillupnow2.png" alt="SkillUpNow - Aperçu 2" class="w-full h-auto rounded-xl shadow-lg">
</div>
<div class="slider-slide min-w-full">
<img src="../../../public/assets/skillupnow3.png" alt="SkillUpNow - Aperçu 3" class="w-full h-auto rounded-xl shadow-lg">
<img src="../images/skillupnow3.png" alt="SkillUpNow - Aperçu 3" class="w-full h-auto rounded-xl shadow-lg">
</div>
</div>
</div>
@ -142,7 +142,7 @@
<div class="prose prose-lg max-w-none">
<p class="text-gray-600 mb-6">
SkillUpNow est une marketplace innovante dédiée au coaching gaming, permettant aux joueurs de
SkillUpNow est une marketplace dédiée au coaching gaming, permettant aux joueurs de
trouver et réserver des séances avec des coachs professionnels. Mon rôle était de concevoir
une interface intuitive et moderne qui facilite la découverte et la réservation de séances.
</p>
@ -157,8 +157,8 @@
<h3 class="text-2xl font-bold text-gray-900 mb-4">Mon Rôle</h3>
<p class="text-gray-600 mb-6">
En tant que designer d'interface, j'ai été responsable de la conception de l'expérience utilisateur
complète, de la recherche initiale jusqu'au prototypage final. J'ai travaillé en étroite collaboration
avec l'équipe de développement pour assurer une implémentation fidèle des designs.
complète, de la recherche initiale jusqu'au prototypage final. J'ai travaillé avec
l'équipe de développement pour assurer une implémentation fidèle des designs.
</p>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Processus de Design</h3>
@ -197,12 +197,7 @@
</li>
</ul>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Résultats</h3>
<p class="text-gray-600 mb-6">
Le design final a été très bien accueilli par les utilisateurs, avec une augmentation significative
des réservations et une réduction du temps nécessaire pour trouver et réserver un coach. L'interface
intuitive a contribué à une meilleure rétention des utilisateurs et à une expérience globale positive.
</p>
</div>
</div>
@ -245,27 +240,12 @@
</div>
</div>
</section>
<!-- Next Project Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Projet suivant</h2>
<a href="duckandcover.html" class="inline-flex items-center text-green-600 hover:text-green-800 font-medium text-lg">
DuckAndCover - Jeu de Société Numérique
<svg class="w-5 h-5 ml-2" 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>
</section>
</main>
<!-- Navigation Script -->
<script src="../../js/navigation.js"></script>
<script src="../../js/animations.js"></script>
<script src="../../js/slider.js"></script>
<script src="../navigation.js"></script>
<script src="../animations.js"></script>
<script src="../slider.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation('projects');
@ -274,7 +254,7 @@
});
</script>
<a id="cv-download-btn" href="../assets/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
Télécharger CV
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:4px;width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
</a>

Write Preview
Loading…
Cancel
Save