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.
282 lines
18 KiB
282 lines
18 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SkillUpNow - 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="../../css/styles.css">
|
|
<link rel="stylesheet" href="../../css/slider.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.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-green-50 to-emerald-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-green-600 hover:text-green-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">
|
|
SkillUpNow 🎮
|
|
</h1>
|
|
|
|
<div class="bg-gradient-to-r from-green-100 to-emerald-100 border-l-4 border-green-500 p-4 mb-8 rounded-r-lg">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-2">Design d'interface pour une marketplace de coaching gaming</h2>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
<strong>Résumé :</strong> Design d'interface pour une marketplace de coaching gaming, connectant joueurs et coachs professionnels.
|
|
J'ai créé une expérience utilisateur intuitive et moderne, facilitant la découverte et la réservation de séances de coaching.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 mb-8">
|
|
<span class="px-4 py-2 bg-green-100 text-green-800 rounded-full font-medium">Figma</span>
|
|
<span class="px-4 py-2 bg-emerald-100 text-emerald-800 rounded-full font-medium">UI/UX Design</span>
|
|
<span class="px-4 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Prototypage</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="https://skillupnow.xyz/" target="_blank" class="btn-primary">
|
|
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
|
</svg>
|
|
Visiter le site
|
|
</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-green-400 to-emerald-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="../../../public/assets/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">
|
|
</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">
|
|
</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">
|
|
SkillUpNow est une marketplace innovante 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>
|
|
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Contexte</h3>
|
|
<p class="text-gray-600 mb-6">
|
|
Le projet visait à créer une plateforme qui connecte les joueurs souhaitant améliorer leurs
|
|
compétences avec des coachs professionnels. L'enjeu principal était de concevoir une interface
|
|
qui rende le processus de recherche et de réservation de coaching simple et agréable.
|
|
</p>
|
|
|
|
<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.
|
|
</p>
|
|
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Processus de Design</h3>
|
|
<p class="text-gray-600 mb-6">
|
|
Le processus de design a commencé par une analyse approfondie des besoins des utilisateurs et des
|
|
coachs. J'ai ensuite créé des wireframes et des prototypes interactifs pour tester différentes
|
|
approches de l'interface. Les retours des utilisateurs ont guidé les itérations successives jusqu'à
|
|
l'obtention d'une expérience optimale.
|
|
</p>
|
|
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Fonctionnalités Clés</h3>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-green-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 de recherche intuitive avec filtres avancés</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-green-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">Profils de coachs détaillés avec système de notation</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-green-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">Processus de réservation simplifié en quelques clics</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-green-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">Système de messagerie intégré pour la communication</span>
|
|
</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>
|
|
|
|
<!-- 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">3 mois</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Équipe</div>
|
|
<div class="font-semibold text-gray-900">Projet</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Mon rôle</div>
|
|
<div class="font-semibold text-gray-900">Designer d'interface</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Outils</div>
|
|
<div class="font-semibold text-gray-900">Figma</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>
|
|
</div>
|
|
</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>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initNavigation('projects');
|
|
initScrollAnimations();
|
|
initSlider();
|
|
});
|
|
</script>
|
|
|
|
<a id="cv-download-btn" href="../assets/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>
|
|
</body>
|
|
</html> |