generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
19 KiB
300 lines
19 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portfolio - Jules Merienne</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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="styles.css">
|
|
<script src="navigation.js"></script>
|
|
</head>
|
|
<body class="bg-white">
|
|
<nav id="navbar"></nav>
|
|
|
|
<main>
|
|
<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 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">
|
|
<span class="w-2 h-2 mr-2 bg-green-500 rounded-full animate-pulse"></span>
|
|
Disponible pour de nouveaux projets
|
|
</span>
|
|
</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">
|
|
É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">
|
|
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">
|
|
<button onclick="window.location.href='contact.html'" class="btn-primary 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>
|
|
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 réalisations
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8 space-x-6 lg:justify-start animate-on-scroll" data-animation="fade-up" data-delay="200">
|
|
<a href="https://www.linkedin.com/in/jules-merienne-2101b830b/" target="_blank" class="text-gray-400 transition-all duration-300 hover:text-blue-600 hover:scale-110">
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://github.com/exosky12" target="_blank" class="text-gray-400 transition-all duration-300 hover:text-gray-800 hover:scale-110">
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://x.com/exosky12_" target="_blank" class="text-gray-400 transition-all duration-300 hover:text-blue-400 hover:scale-110">
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<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"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center lg:justify-end animate-on-scroll" data-animation="fade-up" data-delay="100">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 blur-2xl opacity-20 animate-pulse"></div>
|
|
<div class="relative">
|
|
<img
|
|
src="images/My_face.png"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-20 bg-white">
|
|
<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">
|
|
Mes Services
|
|
</h2>
|
|
<p class="max-w-2xl mx-auto text-xl text-gray-600">
|
|
Des solutions sur mesure pour vos projets
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
|
|
<div class="max-w-4xl px-4 mx-auto text-center sm:px-6 lg:px-8">
|
|
<h2 class="mb-6 text-3xl font-bold text-white md:text-4xl animate-on-scroll" data-animation="fade-up">
|
|
Prêt à concrétiser votre projet ?
|
|
</h2>
|
|
<p class="mb-8 text-xl leading-relaxed text-blue-100 animate-on-scroll" data-animation="fade-up" data-delay="100">
|
|
Discutons ensemble de vos besoins et transformons vos idées en réalité numérique.
|
|
</p>
|
|
<button onclick="window.location.href='contact.html'" class="btn-white magnetic animate-on-scroll" data-animation="fade-up" data-delay="200">
|
|
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
Commençons maintenant
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
.btn-primary {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: white;
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
border-radius: 12px;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
}
|
|
|
|
.btn-secondary {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
background: white;
|
|
border-radius: 12px;
|
|
border: 2px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
transform: translateY(-2px);
|
|
border-color: #3b82f6;
|
|
color: #3b82f6;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-white {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1d4ed8;
|
|
background: white;
|
|
border-radius: 12px;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-white:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
background: #f8fafc;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.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('home');
|
|
});
|
|
</script>
|
|
<script src="animations.js"></script>
|
|
</body>
|
|
</html> |