WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Portefeuille d'argent
817
idrisse2319
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
2 August 2024
Portefeuille animé
18 November 2024
Modèle de site Web de portefeuille moderne
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
