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.
373 lines
24 KiB
373 lines
24 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Site E-commerce - 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="../../../src/css/styles.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-blue-50 to-indigo-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-blue-600 hover:text-blue-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">
|
|
Atelier Merienne 🛍️
|
|
</h1>
|
|
|
|
<div class="bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-2">Projet personnel complet</h2>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
<strong>Résumé :</strong> Développement complet d'un site e-commerce pour un atelier de maroquinerie,
|
|
proposant des produits en cuir, des réparations et des créations sur mesure. Le site inclut un back office
|
|
intégré pour la gestion des produits, des stocks et des commandes. Ce projet m'a permis de développer
|
|
mes compétences en <strong>développement d'application (C1)</strong>, <strong>optimisation d'applications (C2)</strong>,
|
|
et <strong>gestion de projet (C5)</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 mb-8">
|
|
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full font-medium">AdonisJS</span>
|
|
<span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full font-medium">TypeScript</span>
|
|
<span class="px-4 py-2 bg-green-100 text-green-800 rounded-full font-medium">React</span>
|
|
<span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-full font-medium">Tailwind CSS</span>
|
|
<span class="px-4 py-2 bg-pink-100 text-pink-800 rounded-full font-medium">Figma</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="https://github.com/exosky12/ateliermerienne" 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-blue-400 to-indigo-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/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">
|
|
</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">
|
|
Ce projet est un site e-commerce complet développé pour un atelier de maroquinerie, proposant
|
|
une gamme de produits en cuir, des services de réparation et des créations sur mesure. L'objectif
|
|
était de créer une plateforme moderne et intuitive permettant aux clients de découvrir les produits
|
|
et services, tout en offrant une gestion efficace des commandes et du stock.
|
|
</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-blue-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">Catalogue de produits en maroquinerie</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-blue-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">Réservation de services de réparation</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-blue-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">Demandes de créations sur mesure</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-blue-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">Gestion des stocks en temps réel</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-blue-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">Suivi des commandes et réparations</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 text-blue-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 d'administration intuitive</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">3 mois</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Équipe</div>
|
|
<div class="font-semibold text-gray-900">Projet seul</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 Full Stack</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">Technologies</div>
|
|
<div class="font-semibold text-gray-900">AdonisJS, TypeScript, React</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-yellow-100 text-yellow-800">
|
|
<div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
|
|
En cours
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Competencies -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-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">Full Stack, TypeScript, React, Inertia.js</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, SEO, Expérience utilisateur</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">Planning, Organisation, Méthodologie</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-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="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 (React + Inertia.js)</h3>
|
|
<p class="text-gray-600 text-sm">Interface utilisateur moderne avec Tailwind CSS, animations fluides et design responsive, intégrée avec Inertia.js pour une expérience SPA.</p>
|
|
</div>
|
|
|
|
<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="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 (AdonisJS)</h3>
|
|
<p class="text-gray-600 text-sm">Application full-stack avec AdonisJS et Inertia.js, permettant une intégration transparente entre le frontend et le backend.</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">Base de données</h3>
|
|
<p class="text-gray-600 text-sm">Modèle de données optimisé pour les performances et la scalabilité, avec gestion efficace des relations et des transactions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-20 bg-gradient-to-r from-blue-600 to-indigo-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 e-commerce ?
|
|
</h2>
|
|
<p class="text-xl text-blue-100 mb-8">
|
|
De la conception à la réalisation, je peux vous accompagner dans votre projet avec une approche complète alliant design et développement.
|
|
</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 hover:text-orange-500">
|
|
Voir d'autres projets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Navigation Script -->
|
|
<script src="../../js/navigation.js"></script>
|
|
<script src="../../js/animations.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initNavigation('projects');
|
|
initScrollAnimations();
|
|
|
|
// Image Slider
|
|
const sliderWrapper = document.querySelector('.slider-wrapper');
|
|
const slides = document.querySelectorAll('.slider-slide');
|
|
const prevBtn = document.querySelector('.slider-nav.prev');
|
|
const nextBtn = document.querySelector('.slider-nav.next');
|
|
let currentSlide = 0;
|
|
|
|
function updateSlider() {
|
|
sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
}
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
|
updateSlider();
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
updateSlider();
|
|
});
|
|
|
|
// Auto-advance slides every 5 seconds
|
|
setInterval(() => {
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
updateSlider();
|
|
}, 5000);
|
|
});
|
|
</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> |