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.
374 lines
25 KiB
374 lines
25 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DuckAndCover - 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">
|
|
<link rel="stylesheet" href="../slider.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Style manquant pour btn-outline-white */
|
|
.btn-outline-white {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: white;
|
|
background: transparent;
|
|
border-radius: 12px;
|
|
border: 2px solid white;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-outline-white:hover {
|
|
transform: translateY(-2px);
|
|
background: white;
|
|
color: #ea580c;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white">
|
|
<!-- Navigation will be injected here -->
|
|
<nav id="navbar"></nav>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="py-20 bg-gradient-to-br from-yellow-50 to-orange-50">
|
|
<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">
|
|
<div>
|
|
<div class="mb-6">
|
|
<a href="../projets.html" class="inline-flex items-center text-yellow-600 hover:text-yellow-800 font-medium">
|
|
<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="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
Retour aux projets
|
|
</a>
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
DuckAndCover 🦆
|
|
</h1>
|
|
|
|
<div class="bg-gradient-to-r from-yellow-100 to-orange-100 border-l-4 border-yellow-500 p-4 mb-8 rounded-r-lg">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-2">Réalisation technique de l'année en cours</h2>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
<strong>Résumé :</strong> J'ai réalisé, en équipe de 4, la transformation du jeu de plateau DuckAndCover en jeu numérique.
|
|
Mon rôle a combiné développement et gestion de projet. Développé en C# .NET MAUI avec XAML, j'ai porté une attention
|
|
particulière à l'architecture évolutive et aux performances. J'ai mis en place un système de branches Git pour le travail
|
|
collaboratif et utilisé ClickUp pour la gestion de projet (planning, temps, attribution des tâches). Ce projet m'a permis
|
|
de développer mes compétences en <strong>développement d'applications (C1)</strong>, <strong>optimisation (C2)</strong> et
|
|
<strong>gestion de projet (C5)</strong>, tout en contribuant à la <strong>collaboration d'équipe (C6)</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 mb-8">
|
|
<span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full font-medium">C# .NET MAUI</span>
|
|
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full font-medium">XAML</span>
|
|
<span class="px-4 py-2 bg-green-100 text-green-800 rounded-full font-medium">Git/Branches</span>
|
|
<span class="px-4 py-2 bg-orange-100 text-orange-800 rounded-full font-medium">ClickUp</span>
|
|
<span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-full font-medium">Multijoueur Local</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="https://github.com/exosky12/DuckAndCover" target="_blank" class="btn-primary">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
Voir le code source
|
|
</a>
|
|
<a href="../contact.html" class="btn-secondary">
|
|
<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>
|
|
Me contacter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="relative flex justify-center">
|
|
<!-- Image Slider -->
|
|
<div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-3xl p-6 shadow-2xl">
|
|
<div class="bg-white rounded-2xl p-4 overflow-hidden">
|
|
<div class="relative">
|
|
<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="../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="../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="../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="../images/duckandcover4.png" alt="DuckAndCover - Aperçu 4" class="w-full h-auto rounded-xl shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Buttons -->
|
|
<button class="slider-nav prev absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg transition-all">
|
|
<svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="slider-nav next absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg transition-all">
|
|
<svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Project Details -->
|
|
<section class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<!-- Project Info -->
|
|
<div class="lg:col-span-2">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-8">À propos du projet</h2>
|
|
|
|
<div class="prose prose-lg max-w-none">
|
|
<p class="text-gray-600 mb-6">
|
|
DuckAndCover est un projet de transformation numérique d'un jeu de plateau existant.
|
|
L'objectif était de créer une version digitale fidèle tout en apportant des améliorations
|
|
comme l'intelligence artificielle et une interface moderne.
|
|
</p>
|
|
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Le jeu original</h3>
|
|
<p class="text-gray-600 mb-6">
|
|
DuckAndCover est un jeu multijoueur local (2-7 joueurs) où les participants incarnent des canards
|
|
dans un univers coloré. L'objectif est de finir avec le moins de points possible après 3 manches.
|
|
Une manche se termine quand il ne reste qu'une pile à un joueur ou quand le nombre de joueurs +
|
|
cartes en défausse égale 11.
|
|
</p>
|
|
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Fonctionnalités développées</h3>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-yellow-500 mr-3 mt-0.5" 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-600">Interface utilisateur intuitive en XAML</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-yellow-500 mr-3 mt-0.5" 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-600">Multijoueur local jusqu'à 7 joueurs</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-yellow-500 mr-3 mt-0.5" 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-600">Intelligence artificielle pour compléter les parties</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-yellow-500 mr-3 mt-0.5" 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-600">Architecture évolutive et maintenable</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-yellow-500 mr-3 mt-0.5" 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-600">Animations et effets visuels engageants</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-yellow-500 mr-3 mt-0.5" 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-600">Compatibilité cross-platform (Windows, Android, iOS)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Stats -->
|
|
<div>
|
|
<div class="bg-gray-50 rounded-2xl p-6 mb-8">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6">Informations du projet</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Durée</div>
|
|
<div class="font-semibold text-gray-900">4 mois</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Équipe</div>
|
|
<div class="font-semibold text-gray-900">2 développeurs</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Mon rôle</div>
|
|
<div class="font-semibold text-gray-900">Développeur</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Plateformes</div>
|
|
<div class="font-semibold text-gray-900">Windows, Android, iOS</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Statut</div>
|
|
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
|
|
<div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
|
|
Terminé
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Competencies -->
|
|
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 border border-yellow-200 rounded-2xl p-6">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6">Compétences développées</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-start">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
|
|
<span class="text-blue-600 font-bold text-sm">C1</span>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Développement d'application</div>
|
|
<div class="text-sm text-gray-600">Architecture MVVM, C# .NET MAUI</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
|
|
<span class="text-green-600 font-bold text-sm">C2</span>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Optimisation d'applications</div>
|
|
<div class="text-sm text-gray-600">Performance, mémoire, animations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
|
|
<span class="text-purple-600 font-bold text-sm">C5</span>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Gestion de projet</div>
|
|
<div class="text-sm text-gray-600">ClickUp, planning, coordination équipe</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
|
|
<span class="text-orange-600 font-bold text-sm">C6</span>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Collaboration d'équipe</div>
|
|
<div class="text-sm text-gray-600">Git, branches, travail collaboratif</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Architecture Section -->
|
|
<section class="py-20 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Architecture technique</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div class="bg-white rounded-xl p-6 shadow-lg">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
<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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Frontend (XAML)</h3>
|
|
<p class="text-gray-600 text-sm">Interface utilisateur responsive avec animations fluides et design moderne adapté au multijoueur local.</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow-lg">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
<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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Backend (C#)</h3>
|
|
<p class="text-gray-600 text-sm">Logique métier robuste avec gestion d'état, intelligence artificielle et mécaniques de jeu optimisées.</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow-lg">
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
|
<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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Architecture MVVM</h3>
|
|
<p class="text-gray-600 text-sm">Séparation claire des responsabilités pour une maintenance facilitée et une évolutivité optimale.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-20 bg-gradient-to-r from-yellow-600 to-orange-600">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
|
|
Vous avez un projet de jeu ou d'application ?
|
|
</h2>
|
|
<p class="text-xl text-yellow-100 mb-8">
|
|
De l'idée à la réalisation, je peux vous accompagner dans votre projet avec une approche complète alliant développement et gestion.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="../contact.html" class="btn-white">
|
|
Discuter de mon projet
|
|
</a>
|
|
<a href="../projets.html" class="btn-outline-white">
|
|
Voir d'autres projets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Navigation Script -->
|
|
<script src="../navigation.js"></script>
|
|
<script src="../animations.js"></script>
|
|
<script src="../slider.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initNavigation('projects');
|
|
initScrollAnimations();
|
|
initSlider();
|
|
});
|
|
</script>
|
|
|
|
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download="cv-jules-merienne.pdf" 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>
|
|
</body>
|
|
</html> |