generated from Templates_CodeFirst/templateHtmlCss
exosky12
1 month ago
parent
c8ad38f916
commit
1f186eb510
@ -0,0 +1,209 @@
|
||||
class PortfolioAnimations {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupIntersectionObserver();
|
||||
this.setupMagneticEffects();
|
||||
this.setupParallaxEffects();
|
||||
this.addFloatingShapes();
|
||||
}
|
||||
|
||||
|
||||
setupIntersectionObserver() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const element = entry.target;
|
||||
const animation = element.dataset.animation;
|
||||
const delay = element.dataset.delay || 0;
|
||||
|
||||
setTimeout(() => {
|
||||
element.classList.add(`animate-${animation}`);
|
||||
|
||||
if (element.dataset.counter) {
|
||||
this.animateCounter(element);
|
||||
}
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(element);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
setupMagneticEffects() {
|
||||
document.querySelectorAll('.magnetic').forEach(button => {
|
||||
button.addEventListener('mousemove', (e) => {
|
||||
const rect = button.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
button.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px) scale(1.02)`;
|
||||
});
|
||||
|
||||
button.addEventListener('mouseleave', () => {
|
||||
button.style.transform = 'translate(0px, 0px) scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setupParallaxEffects() {
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const parallaxElements = document.querySelectorAll('.parallax');
|
||||
|
||||
parallaxElements.forEach(element => {
|
||||
const speed = element.dataset.speed || 0.5;
|
||||
const yPos = -(scrolled * speed);
|
||||
element.style.transform = `translateY(${yPos}px)`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
animateCounter(element) {
|
||||
const target = parseInt(element.dataset.counter);
|
||||
const duration = 2000;
|
||||
const start = 0;
|
||||
const increment = target / (duration / 16);
|
||||
let current = start;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= target) {
|
||||
current = target;
|
||||
clearInterval(timer);
|
||||
}
|
||||
element.textContent = Math.floor(current);
|
||||
}, 16);
|
||||
}
|
||||
|
||||
addFloatingShapes() {
|
||||
const hero = document.querySelector('.hero-gradient');
|
||||
if (!hero) return;
|
||||
|
||||
const shapesContainer = document.createElement('div');
|
||||
shapesContainer.className = 'floating-shapes';
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const shape = document.createElement('div');
|
||||
shape.className = 'floating-shape';
|
||||
shapesContainer.appendChild(shape);
|
||||
}
|
||||
|
||||
hero.appendChild(shapesContainer);
|
||||
}
|
||||
|
||||
static typeWriter(element, text, speed = 100) {
|
||||
let i = 0;
|
||||
element.textContent = '';
|
||||
|
||||
function type() {
|
||||
if (i < text.length) {
|
||||
element.textContent += text.charAt(i);
|
||||
i++;
|
||||
setTimeout(type, speed);
|
||||
}
|
||||
}
|
||||
|
||||
type();
|
||||
}
|
||||
|
||||
static revealText(element) {
|
||||
const text = element.textContent;
|
||||
const words = text.split(' ');
|
||||
element.innerHTML = '';
|
||||
|
||||
words.forEach((word, index) => {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = word + ' ';
|
||||
span.style.opacity = '0';
|
||||
span.style.transform = 'translateY(20px)';
|
||||
span.style.transition = `all 0.6s ease ${index * 0.1}s`;
|
||||
element.appendChild(span);
|
||||
|
||||
setTimeout(() => {
|
||||
span.style.opacity = '1';
|
||||
span.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
static setupSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new PortfolioAnimations();
|
||||
PortfolioAnimations.setupSmoothScroll();
|
||||
});
|
||||
|
||||
window.PortfolioAnimations = PortfolioAnimations;
|
||||
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const delay = entry.target.dataset.delay || 0;
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('visible');
|
||||
}, delay);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
function initMagneticEffect() {
|
||||
const magneticElements = document.querySelectorAll('.magnetic');
|
||||
|
||||
magneticElements.forEach(el => {
|
||||
el.addEventListener('mousemove', (e) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
el.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px) scale(1.02)`;
|
||||
});
|
||||
|
||||
el.addEventListener('mouseleave', () => {
|
||||
el.style.transform = 'translate(0px, 0px) scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initScrollAnimations();
|
||||
initMagneticEffect();
|
||||
});
|
||||
@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>À propos - 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>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<nav id="navbar"></nav>
|
||||
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-12 text-center">
|
||||
À propos de moi
|
||||
</h1>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-32">
|
||||
<div class="animate-on-scroll" data-animation="fade-up">
|
||||
<h2 class="text-2xl font-bold mb-6">Qui suis-je ?</h2>
|
||||
<p class="mb-6">Je m'appelle Jules Merienne, étudiant en première année de BUT informatique à Clermont-Ferrand. Passionné par le développement web et le design, je combine créativité et rigueur technique dans mes projets.</p>
|
||||
</div>
|
||||
<div class="relative animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="w-80 h-80 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto flex items-center justify-center">
|
||||
<svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-32">
|
||||
<div class="relative animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="w-80 h-80 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto flex items-center justify-center">
|
||||
<svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate-on-scroll" data-animation="fade-up">
|
||||
<h2 class="text-2xl font-bold mb-6">Mon parcours</h2>
|
||||
<p class="mb-6">Depuis 2020, j'ai commencé mon apprentissage en autodidacte via Udemy et OpenClassrooms. Après une initiation au Python, je me suis spécialisé dans le développement web et l'UI/UX design, une passion qui m'anime depuis 2022.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-32">
|
||||
<div class="animate-on-scroll" data-animation="fade-up">
|
||||
<h2 class="text-2xl font-bold mb-6">Ma vision</h2>
|
||||
<p class="mb-6">Je m'efforce de créer des applications optimisées pour l'expérience utilisateur, en explorant constamment de nouvelles technologies et approches. Mon objectif est de devenir ingénieur en informatique après mon BUT.</p>
|
||||
</div>
|
||||
<div class="relative animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="w-80 h-80 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto flex items-center justify-center">
|
||||
<svg class="w-32 h-32 text-white" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-32">
|
||||
<h2 class="text-3xl font-bold text-gray-900 text-center mb-12">
|
||||
Mon Parcours
|
||||
</h2>
|
||||
|
||||
<div class="relative max-w-4xl mx-auto">
|
||||
<div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-purple-500 transform -translate-x-1/2"></div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="200">
|
||||
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900">Freelance Designer & Développeur</h3>
|
||||
<span class="text-purple-600 font-medium">2024 - Présent</span>
|
||||
</div>
|
||||
<p class="text-purple-600 mb-3 font-medium">Travail Indépendant</p>
|
||||
<p class="text-gray-600">
|
||||
Création de solutions numériques complètes pour des clients variés.
|
||||
Design UX/UI, développement web et mobile, conseil en stratégie digitale.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mt-4">
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">React</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Next.js</span>
|
||||
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">AdonisJS</span>
|
||||
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Node.js</span>
|
||||
<span class="px-3 py-1 bg-pink-100 text-pink-800 text-sm rounded-full">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="400">
|
||||
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900">BUT Informatique</h3>
|
||||
<span class="text-blue-600 font-medium">2024 - Présent</span>
|
||||
</div>
|
||||
<p class="text-blue-600 mb-3 font-medium">Université Clermont Auvergne</p>
|
||||
<p class="text-gray-600">
|
||||
Formation complète en développement logiciel, bases de données, réseaux et gestion de projet.
|
||||
Projets pratiques en équipe et stage en entreprise.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mt-4">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Linux</span>
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">C#</span>
|
||||
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">SQL</span>
|
||||
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Gestion de projet</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="600">
|
||||
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900">Baccalauréat Général</h3>
|
||||
<span class="text-green-600 font-medium">2021 - 2024</span>
|
||||
</div>
|
||||
<p class="text-green-600 mb-3 font-medium">Lycée Théodore de Banville</p>
|
||||
<p class="text-gray-600 mb-3">
|
||||
Spécialités Mathématiques et Numérique et Sciences Informatiques (NSI).
|
||||
<span class="font-semibold text-gray-800">Mention Bien</span> - Première approche de la programmation et de l'algorithmique.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mt-4">
|
||||
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Python</span>
|
||||
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Algorithmique</span>
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">Mathématiques</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-40">
|
||||
<h2 class="text-3xl font-bold text-gray-900 text-center mb-20 animate-on-scroll" data-animation="fade-up">
|
||||
Stack Technique
|
||||
</h2>
|
||||
|
||||
<div class="mb-32 max-w-6xl mx-auto">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-16 text-center animate-on-scroll" data-animation="fade-up" data-delay="100">Développement Web</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 stagger-container">
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.948.645-.16 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.645.16-1.315.283-2.015.386.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.405-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">React</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-black hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-black to-gray-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-gray-800 transition-colors">Next.js</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="text-white font-bold text-xl">TS</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">TypeScript</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-green-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-green-600 to-green-700 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">AdonisJS</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="text-white font-bold text-lg">TW</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-cyan-600 transition-colors">Tailwind</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-purple-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="text-white font-bold text-lg">FM</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-32 max-w-6xl mx-auto">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-16 text-center">Langages de Programmation</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-yellow-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M0,0 C0,0 5.166,1.222 12,1.222 C18.834,1.222 24,0 24,0 L24,24 L0,24 L0,0 Z M12,4.5 C8.418,4.5 5.5,7.418 5.5,11 C5.5,14.582 8.418,17.5 12,17.5 C15.582,17.5 18.5,14.582 18.5,11 C18.5,7.418 15.582,4.5 12,4.5 Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-yellow-600 transition-colors">Python</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">C</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">C++</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-purple-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-purple-600 to-purple-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">C#</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initNavigation();
|
||||
});
|
||||
</script>
|
||||
<script src="animations.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact - 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>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<nav id="navbar"></nav>
|
||||
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div class="text-center mb-16 animate-on-scroll" data-animation="fade-up">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
||||
Contactez-moi
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Une idée de projet ? Une question ? N'hésitez pas à me contacter.
|
||||
Je vous répondrai dans les plus brefs délais.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div class="bg-white rounded-xl shadow-lg p-8 animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">
|
||||
Envoyez-moi un message
|
||||
</h2>
|
||||
|
||||
<form id="contact-form" class="space-y-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Nom complet *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
|
||||
placeholder="Votre nom complet"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Adresse e-mail *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
|
||||
placeholder="votre@email.com"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="company" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Entreprise (optionnel)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
|
||||
placeholder="Nom de votre entreprise"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Sujet *
|
||||
</label>
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
|
||||
>
|
||||
<option value="">Choisissez un sujet</option>
|
||||
<option value="project">Nouveau projet</option>
|
||||
<option value="collaboration">Collaboration</option>
|
||||
<option value="consultation">Consultation</option>
|
||||
<option value="other">Autre</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Budget estimé (optionnel)
|
||||
</label>
|
||||
<select
|
||||
id="budget"
|
||||
name="budget"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
|
||||
>
|
||||
<option value="">Sélectionnez une fourchette</option>
|
||||
<option value="5k-10k">5k - 10k €</option>
|
||||
<option value="10k-25k">10k - 25k €</option>
|
||||
<option value="25k-50k">25k - 50k €</option>
|
||||
<option value="50k+">50k+ €</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows="6"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-vertical"
|
||||
placeholder="Décrivez votre projet ou votre demande en détail..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary w-full magnetic"
|
||||
>
|
||||
Envoyer le message
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="form-success" class="hidden mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div class="flex">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<p class="text-green-800">Message envoyé avec succès ! Je vous répondrai bientôt.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="form-error" class="hidden mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<div class="flex">
|
||||
<svg class="w-5 h-5 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<p class="text-red-800">Une erreur s'est produite. Veuillez réessayer ou me contacter directement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="bg-gray-50 rounded-xl p-8 animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">
|
||||
Informations de contact
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">E-mail</p>
|
||||
<a href="mailto:julesmerienne06@gmail.com" class="text-gray-900 font-medium hover:text-blue-600">
|
||||
julesmerienne06@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">Localisation</p>
|
||||
<p class="text-gray-900 font-medium">Clermont-Ferrand, Disponible à distance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-8 animate-on-scroll" data-animation="fade-up" data-delay="300">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">
|
||||
Retrouvez-moi sur
|
||||
</h3>
|
||||
|
||||
<div class="flex space-x-4">
|
||||
<a href="https://www.linkedin.com/in/jules-merienne-2101b830b/" target="_blank" class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white hover:bg-blue-700 transition-all duration-300 hover:scale-110">
|
||||
<svg class="w-5 h-5" 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="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-white hover:bg-gray-900 transition-all duration-300 hover:scale-110">
|
||||
<svg class="w-5 h-5" 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="w-10 h-10 bg-blue-400 rounded-lg flex items-center justify-center text-white hover:bg-blue-500 transition-all duration-300 hover:scale-110">
|
||||
<svg class="w-5 h-5" 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="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-8 animate-on-scroll" data-animation="fade-up" data-delay="400">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">
|
||||
Disponibilité
|
||||
</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse"></div>
|
||||
<span class="text-gray-900 font-medium">Disponible pour de nouveaux projets</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="animations.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initNavigation();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 658 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1012 KiB |
|
After Width: | Height: | Size: 9.7 MiB |
|
After Width: | Height: | Size: 8.6 MiB |
|
After Width: | Height: | Size: 5.4 MiB |
|
After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
@ -1,34 +1,250 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>portfoliojules - One incredible styled html page</title>
|
||||
<link rel="stylesheet" href="mycoolstyle.css">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<!-- Navigation menu -->
|
||||
<ul class="navbar">
|
||||
<li><a href="https://codefirst.iut.uca.fr/home">Code#0</a>
|
||||
<li><a href="http://iut.uca.fr">IUT</a>
|
||||
<li><a href="https://neilyoungarchives.com/">Very good music</a>
|
||||
<li><a href="https://www.youtube.com/watch?v=CY5dTBhRxOA">Very good music too!</a>
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<h1>portfoliojules is my first page, and it has got style!</h1>
|
||||
<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;
|
||||
}
|
||||
|
||||
<p>Welcome on this template html/css project
|
||||
.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%);
|
||||
}
|
||||
|
||||
<p>Very simple, some links, some menu... make it your own
|
||||
…
|
||||
.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;
|
||||
}
|
||||
|
||||
<p>I have nothing more to say
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #3b82f6;
|
||||
color: #3b82f6;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
<!-- my footer -->
|
||||
<address>Template made in 2022<br>
|
||||
with Code#0 <a href="https://codefirst.iut.uca.fr/home"><img src="images/CodeFirstLogo.png" alt="Code#0" align="middle" border="0" height="40px"/>
|
||||
</a></address>
|
||||
.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>
|
||||
</html>
|
||||
@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Centres d'intérêt - 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>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<nav id="navbar"></nav>
|
||||
|
||||
<main>
|
||||
<section class="py-20 bg-gradient-to-br from-purple-50 via-blue-50 to-cyan-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-on-scroll" data-animation="fade-up">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
Mes <span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">Passions</span>
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||
Découvrez mes passions qui enrichissent mon quotidien et ma créativité.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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-2 gap-12 items-center mb-20">
|
||||
<div class="order-2 lg:order-1 animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl p-8 relative overflow-hidden hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-64 bg-gradient-to-br from-green-400 to-green-600 rounded-2xl relative overflow-hidden">
|
||||
<div class="absolute inset-4">
|
||||
<div class="absolute inset-0 border-4 border-white/80 rounded-lg"></div>
|
||||
|
||||
<div class="absolute top-[15%] left-[15%] right-[15%] bottom-1/2 border-b-2 border-white/80"></div>
|
||||
<div class="absolute top-1/2 left-[15%] right-[15%] bottom-[15%] border-t-2 border-white/80"></div>
|
||||
<div class="absolute top-[15%] bottom-[15%] left-1/2 w-0.5 bg-white/80 transform -translate-x-1/2"></div>
|
||||
|
||||
<div class="absolute top-1/2 left-0 right-0 h-1 bg-white/80 transform -translate-y-1/2"></div>
|
||||
<div class="absolute top-1/2 left-0 w-2 h-8 bg-white/80 transform -translate-y-1/2"></div>
|
||||
<div class="absolute top-1/2 right-0 w-2 h-8 bg-white/80 transform -translate-y-1/2"></div>
|
||||
<div class="absolute top-1/2 left-[10%] right-[10%] h-4 bg-white/40 transform -translate-y-1/2">
|
||||
<div class="absolute inset-0 flex flex-col justify-between">
|
||||
<div class="h-px w-full bg-white/60"></div>
|
||||
<div class="h-px w-full bg-white/60"></div>
|
||||
<div class="h-px w-full bg-white/60"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-1/3 right-1/3 w-8 h-8">
|
||||
<div class="absolute w-full h-full bg-yellow-400 rounded-full shadow-lg animate-bounce">
|
||||
<div class="absolute inset-1 bg-yellow-300 rounded-full"></div>
|
||||
<div class="absolute inset-2 border border-yellow-500/30 rounded-full"></div>
|
||||
</div>
|
||||
<div class="absolute top-0 left-0 w-full h-full">
|
||||
<div class="absolute top-1/2 left-1/2 w-1 h-1 bg-yellow-400/30 rounded-full animate-ping"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-1/3 left-1/3 w-16 h-20 transform -rotate-12">
|
||||
<div class="absolute w-full h-3/4 bg-white rounded-full">
|
||||
<div class="absolute inset-0.5 bg-gray-100 rounded-full"></div>
|
||||
<div class="absolute inset-1">
|
||||
<div class="absolute inset-0 flex justify-between">
|
||||
<div class="w-px h-full bg-gray-300"></div>
|
||||
<div class="w-px h-full bg-gray-300"></div>
|
||||
<div class="w-px h-full bg-gray-300"></div>
|
||||
<div class="w-px h-full bg-gray-300"></div>
|
||||
<div class="w-px h-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex flex-col justify-between">
|
||||
<div class="h-px w-full bg-gray-300"></div>
|
||||
<div class="h-px w-full bg-gray-300"></div>
|
||||
<div class="h-px w-full bg-gray-300"></div>
|
||||
<div class="h-px w-full bg-gray-300"></div>
|
||||
<div class="h-px w-full bg-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-1/2 w-2 h-1/4 bg-gray-800 transform -translate-x-1/2">
|
||||
<div class="absolute inset-0.5 bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-1/2 w-3 h-1/4 bg-gray-600 transform -translate-x-1/2">
|
||||
<div class="absolute inset-0.5 bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-4 right-4 w-3 h-3 bg-white/30 rounded-full animate-pulse"></div>
|
||||
<div class="absolute bottom-4 left-4 w-2 h-2 bg-white/30 rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-1 lg:order-2 animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mr-4">
|
||||
<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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Tennis</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 mb-6 leading-relaxed">
|
||||
Je pratique le tennis depuis 2 ans. Ce sport m'apporte équilibre et concentration dans mon quotidien.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-green-500 mr-3" 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-700">Classement : 15/4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
|
||||
<div class="animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mr-4">
|
||||
<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="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Piano</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 mb-6 leading-relaxed">
|
||||
Je débute le piano depuis 6 mois. C'est un moment de détente et d'expression personnelle.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-purple-500 mr-3" 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-700">Pratique régulière</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-3xl p-8 relative overflow-hidden hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-64 bg-gradient-to-b from-gray-800 to-gray-900 rounded-2xl relative overflow-hidden">
|
||||
<div class="absolute bottom-0 left-0 right-0 h-20 flex">
|
||||
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
|
||||
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
|
||||
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
|
||||
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
|
||||
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
|
||||
<div class="flex-1 bg-white border-r border-gray-300 rounded-b-sm"></div>
|
||||
<div class="flex-1 bg-white rounded-b-sm"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-8 left-0 right-0 h-12 flex justify-between px-4">
|
||||
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
|
||||
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
|
||||
<div class="w-0"></div>
|
||||
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
|
||||
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
|
||||
<div class="w-6 bg-gray-900 rounded-b-sm"></div>
|
||||
</div>
|
||||
<div class="absolute top-8 left-8 text-purple-400 text-2xl animate-pulse">♪</div>
|
||||
<div class="absolute top-16 right-12 text-pink-400 text-xl animate-bounce">♫</div>
|
||||
<div class="absolute top-12 right-6 text-purple-500 text-lg animate-ping">♪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 lg:order-1 animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-3xl p-8 relative overflow-hidden hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-64 bg-gradient-to-br from-gray-900 to-blue-900 rounded-2xl relative overflow-hidden">
|
||||
<div class="absolute inset-4 space-y-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
<div class="space-y-2 mt-4">
|
||||
<div class="h-2 bg-blue-400 rounded w-3/4 animate-pulse"></div>
|
||||
<div class="h-2 bg-green-400 rounded w-1/2 animate-pulse" style="animation-delay: 0.5s"></div>
|
||||
<div class="h-2 bg-purple-400 rounded w-5/6 animate-pulse" style="animation-delay: 1s"></div>
|
||||
<div class="h-2 bg-yellow-400 rounded w-2/3 animate-pulse" style="animation-delay: 1.5s"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-6 right-6 w-8 h-8 bg-blue-500 rounded-lg animate-bounce"></div>
|
||||
<div class="absolute bottom-8 left-6 w-6 h-6 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<div class="absolute top-12 left-12 w-4 h-4 bg-purple-500 rounded animate-ping"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-1 lg:order-2 animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mr-4">
|
||||
<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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Technologie</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 mb-6 leading-relaxed">
|
||||
Passionné par la technologie, je m'intéresse aux innovations et à leur impact sur notre quotidien.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-blue-500 mr-3" 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-700">Veille technologique</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center animate-on-scroll" data-animation="fade-up">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
|
||||
Parlons de nos passions
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
Vous partagez ces centres d'intérêt ? Contactez-moi !
|
||||
</p>
|
||||
<button onclick="window.location.href='contact.html'" class="btn-premium 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>
|
||||
Entamons la conversation
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="navigation.js"></script>
|
||||
<script src="animations.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initNavigation('interests');
|
||||
initScrollAnimations();
|
||||
initMagneticEffect();
|
||||
});
|
||||
</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>
|
||||
@ -1,32 +0,0 @@
|
||||
body {
|
||||
padding-left: 11em;
|
||||
font-family: Georgia, 'Georgia', "Times New Roman",
|
||||
Times, serif;
|
||||
color: darksalmon;
|
||||
background-color: rgb(39, 39, 84) }
|
||||
ul.navbar {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: 1em;
|
||||
width: 9em }
|
||||
h1 {
|
||||
font-family: Helvetica, Geneva, Arial,
|
||||
SunSans-Regular, sans-serif }
|
||||
ul.navbar li {
|
||||
background: white;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
border-right: 1em solid darksalmon }
|
||||
ul.navbar a {
|
||||
text-decoration: none }
|
||||
a:link {
|
||||
color: blue }
|
||||
a:visited {
|
||||
color: darkblue }
|
||||
address {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: thin dotted }
|
||||
@ -0,0 +1,371 @@
|
||||
function createNavigation(activePage = 'home') {
|
||||
const nav = document.getElementById('navbar');
|
||||
if (!nav) return;
|
||||
|
||||
const currentPath = window.location.pathname;
|
||||
const isInSubdir = currentPath.includes('/projets/') || currentPath.includes('/projects/');
|
||||
const prefix = isInSubdir ? '../' : '';
|
||||
|
||||
nav.innerHTML = `
|
||||
<div class="bg-white shadow-sm border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="md:hidden">
|
||||
<button
|
||||
id="mobile-menu-button"
|
||||
class="text-gray-600 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition-colors duration-200"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg id="menu-icon" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg id="close-icon" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<a href="${prefix}index.html">
|
||||
<div class="text-gray-900 font-semibold text-lg">Jules Merienne</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:block">
|
||||
<ul class="flex gap-8 items-center">
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}index.html"
|
||||
class="nav-link ${activePage === 'home' ? 'nav-link-active' : ''}"
|
||||
>
|
||||
<span class="nav-link-text">Accueil</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}projets.html"
|
||||
class="nav-link ${activePage === 'projects' ? 'nav-link-active' : ''}"
|
||||
>
|
||||
<span class="nav-link-text">Projets</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}apropos.html"
|
||||
class="nav-link ${activePage === 'about' ? 'nav-link-active' : ''}"
|
||||
>
|
||||
<span class="nav-link-text">À propos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}interets.html"
|
||||
class="nav-link ${activePage === 'interests' ? 'nav-link-active' : ''}"
|
||||
>
|
||||
<span class="nav-link-text">Centres d'intérêt</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}contact.html"
|
||||
class="nav-link"
|
||||
>
|
||||
<span class="nav-link-text">Contact</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="flex items-center" href="${prefix}contact.html">
|
||||
<button class="btn-primary-nav">Discutons ensemble</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div id="mobile-menu" class="md:hidden overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-100">
|
||||
<ul class="space-y-1">
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}index.html"
|
||||
class="mobile-nav-link ${activePage === 'home' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
|
||||
>
|
||||
<span class="mobile-nav-text">Accueil</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}projets.html"
|
||||
class="mobile-nav-link ${activePage === 'projects' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
|
||||
>
|
||||
<span class="mobile-nav-text">Projets</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}apropos.html"
|
||||
class="mobile-nav-link ${activePage === 'about' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
|
||||
>
|
||||
<span class="mobile-nav-text">À propos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}interets.html"
|
||||
class="mobile-nav-link ${activePage === 'interests' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
|
||||
>
|
||||
<span class="mobile-nav-text">Intérêts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="${prefix}contact.html"
|
||||
class="mobile-nav-link ${activePage === 'contact' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
|
||||
>
|
||||
<span class="mobile-nav-text">Contact</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (!document.getElementById('nav-styles')) {
|
||||
const styles = document.createElement('style');
|
||||
styles.id = 'nav-styles';
|
||||
styles.textContent = `
|
||||
.nav-link {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
color: rgb(75 85 99);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-link-text .letter {
|
||||
display: inline-block;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-link-text .letter {
|
||||
color: #3b82f6;
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(1) { transition-delay: 0ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(2) { transition-delay: 50ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(3) { transition-delay: 100ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(4) { transition-delay: 150ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(5) { transition-delay: 200ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(6) { transition-delay: 250ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(7) { transition-delay: 300ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(8) { transition-delay: 350ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(9) { transition-delay: 400ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(10) { transition-delay: 450ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(11) { transition-delay: 500ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(12) { transition-delay: 550ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(13) { transition-delay: 600ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(14) { transition-delay: 650ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(15) { transition-delay: 700ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(16) { transition-delay: 750ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(17) { transition-delay: 800ms; }
|
||||
.nav-link:hover .nav-link-text .letter:nth-child(18) { transition-delay: 850ms; }
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nav-link-active {
|
||||
color: rgb(37 99 235);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-link-active::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nav-link-active .nav-link-text .letter {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-nav-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mobile-nav-text .letter {
|
||||
display: inline-block;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter {
|
||||
color: #3b82f6;
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(1) { transition-delay: 0ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(2) { transition-delay: 50ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(3) { transition-delay: 100ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(4) { transition-delay: 150ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(5) { transition-delay: 200ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(6) { transition-delay: 250ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(7) { transition-delay: 300ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(8) { transition-delay: 350ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(9) { transition-delay: 400ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(10) { transition-delay: 450ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(11) { transition-delay: 500ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(12) { transition-delay: 550ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(13) { transition-delay: 600ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(14) { transition-delay: 650ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(15) { transition-delay: 700ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(16) { transition-delay: 750ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(17) { transition-delay: 800ms; }
|
||||
.mobile-nav-link:hover .mobile-nav-text .letter:nth-child(18) { transition-delay: 850ms; }
|
||||
|
||||
.mobile-nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.btn-primary-nav {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary-nav:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
}
|
||||
|
||||
.btn-primary-nav::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-primary-nav:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary-nav:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
|
||||
if (!document.getElementById('cv-download-btn')) {
|
||||
const cvButton = document.createElement('a');
|
||||
cvButton.id = 'cv-download-btn';
|
||||
cvButton.href = '../assets/cv.pdf';
|
||||
cvButton.className = 'cv-download-btn';
|
||||
cvButton.download = true;
|
||||
cvButton.title = 'Télécharger mon CV';
|
||||
cvButton.innerHTML = `Télécharger CV <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>`;
|
||||
document.body.appendChild(cvButton);
|
||||
}
|
||||
|
||||
function splitTextIntoLetters() {
|
||||
const navLinks = document.querySelectorAll('.nav-link-text, .mobile-nav-text');
|
||||
navLinks.forEach(link => {
|
||||
const text = link.textContent;
|
||||
link.innerHTML = text.split('').map(letter =>
|
||||
letter === ' ' ? '<span class="letter"> </span>' : `<span class="letter">${letter}</span>`
|
||||
).join('');
|
||||
});
|
||||
}
|
||||
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const menuIcon = document.getElementById('menu-icon');
|
||||
const closeIcon = document.getElementById('close-icon');
|
||||
let isMobileMenuOpen = false;
|
||||
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
isMobileMenuOpen = !isMobileMenuOpen;
|
||||
|
||||
if (isMobileMenuOpen) {
|
||||
mobileMenu.style.maxHeight = '384px';
|
||||
mobileMenu.style.opacity = '1';
|
||||
menuIcon.classList.add('hidden');
|
||||
closeIcon.classList.remove('hidden');
|
||||
} else {
|
||||
mobileMenu.style.maxHeight = '0';
|
||||
mobileMenu.style.opacity = '0';
|
||||
menuIcon.classList.remove('hidden');
|
||||
closeIcon.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
splitTextIntoLetters();
|
||||
}
|
||||
|
||||
function initNavigation(activePage) {
|
||||
createNavigation(activePage);
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = { initNavigation };
|
||||
}
|
||||
@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Projets - 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>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<nav id="navbar"></nav>
|
||||
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div class="text-center mb-16 animate-on-scroll" data-animation="fade-up">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
||||
Mes Projets
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Découvrez une sélection de mes réalisations, alliant créativité et expertise technique.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-500 to-indigo-600 relative">
|
||||
<img src="images/atelier_merienne.png" alt="Atelier Merienne" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Atelier Merienne</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Site e-commerce pour un atelier de maroquinerie, proposant des produits en cuir, des réparations et des créations sur mesure.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">AdonisJS</span>
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">TypeScript</span>
|
||||
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">React</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="projets/ateliermerienne.html" class="text-blue-600 hover:text-blue-800 font-medium transition-colors">Voir le projet</a>
|
||||
<a href="https://github.com/exosky12/ateliermerienne" target="_blank" class="text-gray-600 hover:text-gray-800 font-medium transition-colors">Code source</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-500 to-indigo-600 relative">
|
||||
<img src="images/duckandcover.png" alt="Duck and cover" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">DuckAndCover - Jeu de Société Numérique</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Réalisation technique de l'année : transformation d'un jeu de plateau en jeu numérique multijoueur avec gestion de projet complète.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">C# .NET MAUI</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">XAML</span>
|
||||
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Gestion de projet</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="projets/duckandcover.html" class="text-blue-600 hover:text-blue-800 font-medium transition-colors">Voir le projet</a>
|
||||
<a target="_blank" href="https://github.com/exosky12/DuckAndCover" class="text-gray-600 hover:text-gray-800 font-medium transition-colors">Code source</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll" data-animation="fade-up" data-delay="300">
|
||||
<div class="h-48 bg-gradient-to-br from-green-500 to-emerald-600 relative">
|
||||
<img src="images/skillupnow.png" alt="SkillUpNow" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">SkillUpNow - Marketplace de Coaching Gaming</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Design d'interface pour une marketplace de coaching gaming, connectant joueurs et coachs professionnels.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Figma</span>
|
||||
<span class="px-3 py-1 bg-emerald-100 text-emerald-800 text-sm rounded-full">UI/UX Design</span>
|
||||
<span class="px-3 py-1 bg-teal-100 text-teal-800 text-sm rounded-full">Prototypage</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="projets/skillupnow.html" class="text-blue-600 hover:text-blue-800 font-medium transition-colors">Voir le projet</a>
|
||||
<a href="https://skillupnow.xyz/" target="_blank" class="text-gray-600 hover:text-gray-800 font-medium transition-colors">Visiter le site</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-40 animate-on-scroll" data-animation="fade-up">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
||||
Vous avez un projet en tête ?
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-8">
|
||||
Discutons ensemble de votre vision et donnons vie à vos idées.
|
||||
</p>
|
||||
<button onclick="window.location.href='contact.html'" class="btn-premium 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>
|
||||
Contactez-moi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.btn-premium {
|
||||
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 cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-premium:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
}
|
||||
|
||||
.btn-premium::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-premium:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-premium:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.animate-fade-up {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.magnetic {
|
||||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="animations.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initNavigation('projects');
|
||||
initScrollAnimations();
|
||||
initMagneticEffect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<a id="cv-download-btn" href="images/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>
|
||||
@ -0,0 +1,373 @@
|
||||
<!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>
|
||||
@ -0,0 +1,374 @@
|
||||
<!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="../../css/styles.css">
|
||||
<link rel="stylesheet" href="../../css/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="../../../public/assets/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="../../../public/assets/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="../../../public/assets/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="../../../public/assets/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="../../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>
|
||||
@ -0,0 +1,282 @@
|
||||
<!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>
|
||||
@ -0,0 +1,36 @@
|
||||
.slider-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-wrapper {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.slider-slide {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.slider-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slider-nav:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.slider-nav.prev {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.slider-nav.next {
|
||||
right: 0.5rem;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
function initSlider() {
|
||||
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();
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
updateSlider();
|
||||
}, 5000);
|
||||
}
|
||||
@ -0,0 +1,595 @@
|
||||
/* ========================================
|
||||
PORTFOLIO - JULES MERIENNE
|
||||
Styles principaux
|
||||
======================================== */
|
||||
|
||||
/* Variables CSS */
|
||||
:root {
|
||||
--primary-blue: #3b82f6;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary-blue: #2563eb;
|
||||
--secondary-dark: #1e40af;
|
||||
--purple-600: #9333ea;
|
||||
--purple-500: #a855f7;
|
||||
--green-500: #10b981;
|
||||
--gray-900: #111827;
|
||||
--gray-800: #1f2937;
|
||||
--gray-700: #374151;
|
||||
--gray-600: #4b5563;
|
||||
--gray-50: #f9fafb;
|
||||
--white: #ffffff;
|
||||
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
--gradient-secondary: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
--shadow-primary: 0 4px 15px rgba(59, 130, 246, 0.3);
|
||||
--shadow-primary-hover: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
--timing: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--timing-magnetic: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
ANIMATIONS
|
||||
======================================== */
|
||||
|
||||
/* Animation base styles */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s var(--timing);
|
||||
}
|
||||
|
||||
.animate-on-scroll.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.animate-fade-up {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.animate-slide-right {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.animate-scale-up {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.magnetic {
|
||||
transition: all 0.2s var(--timing);
|
||||
}
|
||||
|
||||
/* Form focus animations */
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
BUTTONS
|
||||
======================================== */
|
||||
|
||||
.btn-primary {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
background: var(--gradient-primary);
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
transition: all 0.3s var(--timing-magnetic);
|
||||
box-shadow: var(--shadow-primary);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary-orange {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
transition: all 0.3s var(--timing-magnetic);
|
||||
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary-orange:hover {
|
||||
transform: translateY(-2px);
|
||||
background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
|
||||
box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary-orange::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-primary-orange:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary-orange:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-primary-hover);
|
||||
background: var(--gradient-secondary);
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.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: var(--white);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--primary-blue);
|
||||
color: var(--primary-blue);
|
||||
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: var(--primary-dark);
|
||||
background: var(--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;
|
||||
}
|
||||
|
||||
.btn-premium {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
background: var(--gradient-primary);
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
transition: all 0.3s var(--timing-magnetic);
|
||||
box-shadow: var(--shadow-primary);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-premium:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: var(--shadow-primary-hover);
|
||||
background: var(--gradient-secondary);
|
||||
}
|
||||
|
||||
.btn-premium::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-premium:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-premium:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-blue);
|
||||
background: transparent;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--primary-blue);
|
||||
transition: all 0.3s var(--timing-magnetic);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
transform: translateY(-2px);
|
||||
background: var(--primary-blue);
|
||||
color: var(--white);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.btn-outline-orange {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #f97316;
|
||||
background: transparent;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #f97316;
|
||||
transition: all 0.3s var(--timing-magnetic);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-outline-orange:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #f97316;
|
||||
color: var(--white);
|
||||
box-shadow: 0 8px 25px rgba(249, 115, 22, 0.2);
|
||||
}
|
||||
|
||||
.btn-outline-orange:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CARDS & COMPONENTS
|
||||
======================================== */
|
||||
|
||||
.stats-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s var(--timing);
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.stats-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s var(--timing);
|
||||
border: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.tech-stack-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.3s var(--timing);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tech-stack-item:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
|
||||
border-color: var(--primary-blue);
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
NAVIGATION ENHANCEMENTS
|
||||
======================================== */
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transition: width 0.3s var(--timing);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
HERO SECTION
|
||||
======================================== */
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #f3e8ff 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 75% 75%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floating-shapes {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floating-shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-shape:nth-child(1) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.floating-shape:nth-child(2) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(45deg, #10b981, #3b82f6);
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.floating-shape:nth-child(3) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(45deg, #8b5cf6, #ec4899);
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
KEYFRAMES
|
||||
======================================== */
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
RESPONSIVE DESIGN
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.floating-shape {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-white,
|
||||
.btn-premium {
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
UTILITY CLASSES
|
||||
======================================== */
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--purple-600) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.glassmorphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: transform 0.3s var(--timing);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.cv-download-btn {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
padding: 10px 18px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(37,99,235,0.15);
|
||||
border: none;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.cv-download-btn:hover {
|
||||
background: #1d4ed8;
|
||||
transform: translateY(-2px) scale(1.04);
|
||||
}
|
||||
|
||||
.cv-download-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.cv-download-btn {
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
padding: 8px 12px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue