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.
250 lines
16 KiB
250 lines
16 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 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>
|
|
|
|
<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="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">
|
|
Bonjour, je suis
|
|
<span class="text-transparent bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text">
|
|
Jules Merienne
|
|
</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.
|
|
</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 ensemble
|
|
</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
|
|
</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 - Étudiant et freelance dev web + design"
|
|
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>
|
|
</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">
|
|
Ce que je peux faire pour vous
|
|
</h2>
|
|
<p class="max-w-2xl mx-auto text-xl text-gray-600">
|
|
Des solutions complètes pour donner vie à vos projets numériques
|
|
</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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</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;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initNavigation();
|
|
});
|
|
</script>
|
|
<script src="animations.js"></script>
|
|
</body>
|
|
</html> |