WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Mon portofolio
364
idrisse2319
Open In Editor
Publish Your Code
Recommended
23 March 2025
Portofolio
20 August 2024
Electric Monster
HTML
Copy
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mon Portfolio Web</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#5D5CDE', secondary: '#6366F1', dark: { bg: '#181818', card: '#252525', }, light: { bg: '#FFFFFF', card: '#F9FAFB', } }, animation: { 'fade-in': 'fadeIn 0.5s ease-in-out', }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, } } } } } // Detect dark mode if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { if (event.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }); </script> </head> <body class="bg-light-bg dark:bg-dark-bg text-gray-800 dark:text-gray-200 transition-colors duration-300"> <!-- Navbar --> <nav class="sticky top-0 bg-white/80 dark:bg-dark-bg/80 backdrop-blur-lg shadow-sm z-50"> <div class="container px-4 mx-auto flex items-center justify-between py-4"> <a href="#" class="text-2xl font-bold text-primary">Portfolio</a> <button id="mobile-menu-button" class="md:hidden focus:outline-none"> <i class="fas fa-bars text-gray-700 dark:text-gray-200 text-2xl"></i> </button> <div id="menu" class="hidden absolute top-16 left-0 right-0 bg-white dark:bg-dark-bg md:static md:bg-transparent md:dark:bg-transparent md:flex md:items-center shadow-lg md:shadow-none"> <ul class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 p-4 md:p-0"> <li><a href="#accueil" class="hover:text-primary transition-colors duration-300">Accueil</a></li> <li><a href="#projets" class="hover:text-primary transition-colors duration-300">Projets</a></li> <li><a href="#competences" class="hover:text-primary transition-colors duration-300">Compétences</a></li> <li><a href="#a-propos" class="hover:text-primary transition-colors duration-300">À propos</a></li> <li><a href="#contact" class="hover:text-primary transition-colors duration-300">Contact</a></li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="accueil" class="py-20 md:py-32 px-4 animate-fade-in"> <div class="container mx-auto text-center"> <h1 class="text-4xl md:text-6xl font-bold mb-6"> Bonjour, je suis <span class="text-primary">Idrisse 2319</span> </h1> <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-400 mb-10 max-w-2xl mx-auto"> Designer & Développeur Web créatif spécialisé dans la création d'expériences web modernes et élégantes. </p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="#projets" class="px-8 py-3 bg-primary text-white rounded-full hover:bg-opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl"> Voir mes projets </a> <a href="#contact" class="px-8 py-3 border-2 border-primary text-primary dark:text-primary rounded-full hover:bg-primary hover:text-white transition-all duration-300"> Me contacter </a> </div> </div> </section> <!-- Projects Section --> <section id="projets" class="py-20 px-4 bg-gray-50 dark:bg-dark-card"> <div class="container mx-auto"> <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Mes Projets</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project Card 1 --> <div class="bg-white dark:bg-dark-bg rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 group"> <div class="h-56 bg-gray-200 dark:bg-gray-700 relative overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500"> <i class="fas fa-image text-5xl"></i> </div> <div class="absolute inset-0 bg-primary bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <a href="#" class="px-4 py-2 bg-white text-primary rounded-full hover:bg-gray-100 transition-colors"> Voir le projet </a> </div> </div> <div class="p-6"> <h3 class="font-bold text-xl mb-2">Site e-commerce</h3> <p class="text-gray-600 dark:text-gray-400 mb-4"> Conception et développement d'une boutique en ligne complète avec système de paiement. </p> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm">HTML</span> <span class="px-3 py-1 bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200 rounded-full text-sm">CSS</span> <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">JavaScript</span> </div> </div> </div> <!-- Project Card 2 --> <div class="bg-white dark:bg-dark-bg rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 group"> <div class="h-56 bg-gray-200 dark:bg-gray-700 relative overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500"> <i class="fas fa-image text-5xl"></i> </div> <div class="absolute inset-0 bg-primary bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <a href="#" class="px-4 py-2 bg-white text-primary rounded-full hover:bg-gray-100 transition-colors"> Voir le projet </a> </div> </div> <div class="p-6"> <h3 class="font-bold text-xl mb-2">Application Web</h3> <p class="text-gray-600 dark:text-gray-400 mb-4"> Interface utilisateur réactive pour une application de gestion de tâches. </p> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm">React</span> <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm">Node.js</span> <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm">Tailwind</span> </div> </div> </div> <!-- Project Card 3 --> <div class="bg-white dark:bg-dark-bg rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 group"> <div class="h-56 bg-gray-200 dark:bg-gray-700 relative overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500"> <i class="fas fa-image text-5xl"></i> </div> <div class="absolute inset-0 bg-primary bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <a href="#" class="px-4 py-2 bg-white text-primary rounded-full hover:bg-gray-100 transition-colors"> Voir le projet </a> </div> </div> <div class="p-6"> <h3 class="font-bold text-xl mb-2">Blog Moderne</h3> <p class="text-gray-600 dark:text-gray-400 mb-4"> Conception d'un blog avec système de gestion de contenu personnalisé. </p> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-violet-100 dark:bg-violet-900 text-violet-800 dark:text-violet-200 rounded-full text-sm">WordPress</span> <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm">PHP</span> <span class="px-3 py-1 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-sm">MySQL</span> </div> </div> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-block px-8 py-3 border-2 border-primary text-primary dark:text-primary rounded-full hover:bg-primary hover:text-white transition-all duration-300"> Voir tous les projets </a> </div> </div> </section> <!-- Skills Section --> <section id="competences" class="py-20 px-4"> <div class="container mx-auto"> <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Mes Compétences</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Skill Category 1 --> <div class="bg-white dark:bg-dark-bg p-8 rounded-xl shadow-md"> <div class="text-primary text-4xl mb-4"> <i class="fas fa-laptop-code"></i> </div> <h3 class="text-xl font-bold mb-4">Développement Frontend</h3> <ul class="space-y-3"> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 95%"></div> </div> <span class="ml-3 w-12 text-sm">HTML5</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 90%"></div> </div> <span class="ml-3 w-12 text-sm">CSS3</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 85%"></div> </div> <span class="ml-3 w-12 text-sm">JS</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 80%"></div> </div> <span class="ml-3 w-12 text-sm">React</span> </li> </ul> </div> <!-- Skill Category 2 --> <div class="bg-white dark:bg-dark-bg p-8 rounded-xl shadow-md"> <div class="text-primary text-4xl mb-4"> <i class="fas fa-server"></i> </div> <h3 class="text-xl font-bold mb-4">Développement Backend</h3> <ul class="space-y-3"> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 85%"></div> </div> <span class="ml-3 w-12 text-sm">PHP</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 75%"></div> </div> <span class="ml-3 w-12 text-sm">Node.js</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 80%"></div> </div> <span class="ml-3 w-12 text-sm">SQL</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 70%"></div> </div> <span class="ml-3 w-12 text-sm">API</span> </li> </ul> </div> <!-- Skill Category 3 --> <div class="bg-white dark:bg-dark-bg p-8 rounded-xl shadow-md"> <div class="text-primary text-4xl mb-4"> <i class="fas fa-paint-brush"></i> </div> <h3 class="text-xl font-bold mb-4">Design & Outils</h3> <ul class="space-y-3"> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 90%"></div> </div> <span class="ml-3 w-12 text-sm">Figma</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 85%"></div> </div> <span class="ml-3 w-12 text-sm">XD</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 75%"></div> </div> <span class="ml-3 w-12 text-sm">Git</span> </li> <li class="flex items-center"> <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> <div class="bg-primary h-2.5 rounded-full" style="width: 80%"></div> </div> <span class="ml-3 w-12 text-sm">UX</span> </li> </ul> </div> </div> </div> </section> <!-- About Me Section --> <section id="a-propos" class="py-20 px-4 bg-gray-50 dark:bg-dark-card"> <div class="container mx-auto"> <div class="flex flex-col lg:flex-row items-center gap-12"> <div class="lg:w-1/3 text-center"> <div class="w-48 h-48 mx-auto rounded-full bg-gray-300 dark:bg-gray-700 flex items-center justify-center"> <i class="fas fa-user text-5xl text-gray-400 dark:text-gray-500"></i> </div> </div> <div class="lg:w-2/3"> <h2 class="text-3xl md:text-4xl font-bold mb-6">À propos de moi</h2> <p class="text-gray-600 dark:text-gray-400 mb-6"> Je suis un designer et développeur web passionné avec plus de 5 ans d'expérience dans la création de sites web modernes et d'applications. Je combine ma créativité et mes compétences techniques pour concevoir des expériences numériques qui sont à la fois esthétiques et fonctionnelles. </p> <p class="text-gray-600 dark:text-gray-400 mb-6"> Mon approche est centrée sur l'utilisateur, avec une attention particulière portée à l'accessibilité et aux performances. Je reste constamment à jour avec les dernières technologies et tendances du web pour fournir des solutions innovantes à mes clients. </p> <div class="flex flex-wrap gap-4"> <a href="#" class="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"> <i class="fab fa-linkedin text-primary"></i> <span>LinkedIn</span> </a> <a href="#" class="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"> <i class="fab fa-github text-primary"></i> <span>GitHub</span> </a> <a href="#" class="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"> <i class="fab fa-behance text-primary"></i> <span>Behance</span> </a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 px-4"> <div class="container mx-auto max-w-4xl"> <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Me Contacter</h2> <div class="bg-white dark:bg-dark-bg rounded-xl shadow-md overflow-hidden"> <div class="md:flex"> <div class="md:w-1/3 bg-primary p-8 text-white"> <h3 class="text-xl font-bold mb-6">Informations de contact</h3> <div class="space-y-4"> <div class="flex items-start gap-4"> <div class="text-white text-xl mt-1"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h4 class="font-medium">Adresse</h4> <p class="text-indigo-100">Paris, France</p> </div> </div> <div class="flex items-start gap-4"> <div class="text-white text-xl mt-1"> <i class="fas fa-envelope"></i> </div> <div> <h4 class="font-medium">Email</h4> <p class="text-indigo-100">@example.com</p> </div> </div> <div class="flex items-start gap-4"> <div class="text-white text-xl mt-1"> <i class="fas fa-phone"></i> </div> <div> <h4 class="font-medium">Téléphone</h4> <p class="text-indigo-100">+33 6 XX XX XX XX</p> </div> </div> </div> <div class="mt-12"> <h3 class="text-xl font-bold mb-4">Suivez-moi</h3> <div class="flex gap-4"> <a href="#" class="bg-indigo-600 hover:bg-indigo-700 w-10 h-10 rounded-full flex items-center justify-center transition-colors"> <i class="fab fa-linkedin-in"></i> </a> <a href="#" class="bg-indigo-600 hover:bg-indigo-700 w-10 h-10 rounded-full flex items-center justify-center transition-colors"> <i class="fab fa-github"></i> </a> <a href="#" class="bg-indigo-600 hover:bg-indigo-700 w-10 h-10 rounded-full flex items-center justify-center transition-colors"> <i class="fab fa-twitter"></i> </a> </div> </div> </div> <div class="md:w-2/3 p-8"> <h3 class="text-xl font-bold mb-6">Envoyez-moi un message</h3> <form id="contact-form" class="space-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nom</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-gray-800 text-base" required> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-gray-800 text-base" required> </div> </div> <div> <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sujet</label> <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-gray-800 text-base"> </div> <div> <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label> <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-gray-800 text-base" required>
Envoyer le message
