Portfolio

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="fr" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio | Développeur Web</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.5/dist/ScrollTrigger.min.js"></script>
    <style>
        :root {
            --primary: #6d28d9;
            --primary-light: #8b5cf6;
            --secondary: #06b6d4;
            --dark: #0f172a;
            --dark-light: #1e293b;
            --light: #f8fafc;
            --light-dark: #e2e8f0;
            --text-light: #f1f5f9;
            --text-dark: #1e293b;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --neon-glow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
            --transition-speed: 0.5s;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

html, body {
            scroll-behavior: smooth;
            cursor: none;
            overflow-x: hidden;
        }

body {
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }

body.dark {
            background-color: var(--dark);
            color: var(--text-light);
        }

body.light {
            background-color: var(--light);
            color: var(--text-dark);
        }

/* Custom Cursor */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--primary-light);
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transform: translate(-50%, -50%);
            transition: transform 0.1s ease;
        }

.cursor-follower {
            position: fixed;
            width: 40px;
            height: 40px;
            border: 2px solid var(--primary);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.5;
            transform: translate(-50%, -50%);
            transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
        }

/* Loader */
        .loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--dark);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

.loader {
            width: 100px;
            height: 100px;
            border: 5px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top: 5px solid var(--primary);
            animation: spin 1s linear infinite;
            position: relative;
        }

.loader::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 50%;
            border: 5px solid transparent;
            border-top: 5px solid var(--secondary);
            animation: spin 0.5s linear infinite reverse;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

.dark .glass {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

/* Neon Effect */
        .neon-text {
            color: var(--text-light);
            text-shadow: var(--neon-glow);
        }

.neon-border {
            border: 2px solid var(--primary-light);
            box-shadow: var(--neon-glow);
        }

/* Nav */
        .nav-link {
            position: relative;
            padding: 0.5rem 0;
            margin: 0 1rem;
            text-decoration: none;
            color: inherit;
            overflow: hidden;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-light);
            transition: width 0.3s ease;
        }

.nav-link:hover::after {
            width: 100%;
        }

/* Sections */
        section {
            min-height: 100vh;
            padding: 5rem 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

/* Hero Section */
        #hero {
            position: relative;
            overflow: hidden;
        }

.hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--dark) 0%, var(--dark-light) 100%);
            z-index: -1;
        }

.light .hero-bg {
            background: linear-gradient(45deg, var(--light) 0%, var(--light-dark) 100%);
        }

.particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

.particle {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: var(--primary-light);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

@keyframes float {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) translateX(100vw); opacity: 0; }
        }

/* About Section */
        .skill-item {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.skill-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

/* Projects Section */
        .project-card {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            transition: transform 0.5s ease;
        }

.project-card:hover {
            transform: translateY(-10px);
        }

.project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.project-card:hover .project-overlay {
            opacity: 1;
        }

/* Contact Section */
        .form-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: inherit;
            transition: all 0.3s ease;
        }

.dark .form-input {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(255, 255, 255, 0.1);
        }

.form-input:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
            outline: none;
        }

/* Mode Switch */
        .mode-switch {
            position: relative;
            width: 60px;
            height: 30px;
            background-color: var(--dark-light);
            border-radius: 30px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.light .mode-switch {
            background-color: var(--light-dark);
        }

.mode-switch::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20px;
            height: 20px;
            background-color: var(--light);
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

.light .mode-switch::before {
            transform: translateX(30px);
            background-color: var(--dark);
        }

/* Button */
        .btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

.btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

.btn:hover::before {
            width: 300px;
            height: 300px;
        }

/* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
            40% { transform: translateY(-20px) translateX(-50%); }
            60% { transform: translateY(-10px) translateX(-50%); }
        }

/* Responsive */
        @media (max-width: 768px) {
            .nav-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 100;
            }

.nav-menu {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--dark);
                transition: left 0.3s ease;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

.light .nav-menu {
                background: var(--light);
            }

.nav-menu.active {
                left: 0;
            }

.nav-link {
                margin: 1.5rem 0;
                font-size: 1.5rem;
            }

.menu-btn {
                display: block !important;
            }

.hero-content h1 {
                font-size: 2.5rem !important;
            }
        }

@media (min-width: 769px) {
            .menu-btn {
                display: none !important;
            }

.nav-menu {
                display: flex !important;
            }
        }
    </style>
</head>
<body class="dark">
    
    <div class="cursor"></div>
    <div class="cursor-follower"></div>

<div class="loader-container">
        <div class="loader"></div>
    </div>

<header class="fixed top-0 left-0 w-full z-50 nav-container">
        <nav class="glass px-6 py-4 flex justify-between items-center">
            <div class="flex items-center">
                <h1 class="text-2xl font-bold neon-text">Portfolio</h1>
            </div>
            
            <div class="menu-btn cursor-pointer p-2">
                <i class="fas fa-bars text-2xl"></i>
            </div>
            
            <ul class="nav-menu">
                <li><a href="#hero" class="nav-link">Accueil</a></li>
                <li><a href="#about" class="nav-link">À propos</a></li>
                <li><a href="#projects" class="nav-link">Projets</a></li>
                <li><a href="#skills" class="nav-link">Compétences</a></li>
                <li><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
            
            <div class="mode-switch ml-4" id="mode-toggle"></div>
        </nav>
    </header>

<section id="hero" class="relative">
        <div class="hero-bg"></div>
        <div class="particles" id="particles"></div>
        
        <div class="container mx-auto px-4 hero-content">
            <div class="flex flex-col items-center justify-center text-center">
                <h1 class="text-5xl md:text-7xl font-bold mb-8 neon-text hero-title">
                    <span class="block">Créativité.</span>
                    <span class="block">Innovation.</span>
                    <span class="block">Excellence.</span>
                </h1>
                <p class="text-xl md:text-2xl mb-12 max-w-xl hero-subtitle">
                    Développeur web passionné par la création d'expériences numériques exceptionnelles.
                </p>
                <a href="#about" class="btn bg-gradient-to-r from-purple-600 to-cyan-500 text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition-all relative overflow-hidden">
                    Découvrir
                </a>
            </div>
        </div>
        
        <div class="scroll-indicator">
            <i class="fas fa-chevron-down text-2xl animate-bounce"></i>
        </div>
    </section>

<section id="about" class="relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold mb-4 neon-text">À propos</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-purple-600 to-cyan-500 mx-auto"></div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 glass p-6 rounded-2xl transform hover:scale-105 transition-all">
                    <div class="w-full h-96 rounded-xl bg-gradient-to-br from-purple-700 to-cyan-600 flex items-center justify-center">
                        <i class="fas fa-user-circle text-8xl text-white opacity-50"></i>
                    </div>
                </div>
                
                <div class="md:w-1/2">
                    <h3 class="text-3xl font-bold mb-6">Qui suis-je ?</h3>
                    <p class="text-lg mb-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim, nisi 
                        eget tempor efficitur, felis eros fringilla nisl, at scelerisque justo erat eu odio.
                    </p>
                    <p class="text-lg mb-6">
                        Vestibulum varius mauris eget lacus iaculis, a pulvinar metus porttitor. Cras 
                        interdum, sapien eget faucibus elementum, tellus augue facilisis urna, vitae 
                        volutpat ex diam in quam.
                    </p>
                    <div class="flex flex-wrap gap-3">
                        <span class="px-4 py-2 rounded-full bg-purple-600 text-white">Créatif</span>
                        <span class="px-4 py-2 rounded-full bg-cyan-600 text-white">Innovant</span>
                        <span class="px-4 py-2 rounded-full bg-purple-600 text-white">Méthodique</span>
                        <span class="px-4 py-2 rounded-full bg-cyan-600 text-white">Passionné</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold mb-4 neon-text">Mes Projets</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-purple-600 to-cyan-500 mx-auto"></div>
                <p class="text-lg mt-6 max-w-2xl mx-auto">
                    Découvrez une sélection de mes réalisations. Chaque projet reflète ma passion pour
                    l'excellence et l'innovation.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="project-card h-80 glass">
                    <div class="w-full h-full bg-gradient-to-br from-purple-700 to-cyan-600 flex items-center justify-center">
                        <i class="fas fa-laptop-code text-6xl text-white opacity-50"></i>
                    </div>
                    <div class="project-overlay">
                        <h3 class="text-xl font-bold text-white mb-2">Projet 1</h3>
                        <p class="text-gray-200 mb-4">Description courte du projet. Technologies utilisées et objectifs atteints.</p>
                        <div class="flex space-x-3">
                            <a href="#" class="text-white hover:text-purple-400 transition-colors">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                            <a href="#" class="text-white hover:text-purple-400 transition-colors">
                                <i class="fab fa-github"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                
                <div class="project-card h-80 glass">
                    <div class="w-full h-full bg-gradient-to-br from-purple-700 to-cyan-600 flex items-center justify-center">
                        <i class="fas fa-mobile-alt text-6xl text-white opacity-50"></i>
                    </div>
                    <div class="project-overlay">
                        <h3 class="text-xl font-bold text-white mb-2">Projet 2</h3>
                        <p class="text-gray-200 mb-4">Description courte du projet. Technologies utilisées et objectifs atteints.</p>
                        <div class="flex space-x-3">
                            <a href="#" class="text-white hover:text-purple-400 transition-colors">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                            <a href="#" class="text-white hover:text-purple-400 transition-colors">
                                <i class="fab fa-github"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                
                <div class="project-card h-80 glass">
                    <div class="w-full h-full bg-gradient-to-br from-purple-700 to-cyan-600 flex items-center justify-center">
                        <i class="fas fa-shopping-cart text-6xl text-white opacity-50"></i>
                    </div>
                    <div class="project-overlay">
                        <h3 class="text-xl font-bold text-white mb-2">Projet 3</h3>
                        <p class="text-gray-200 mb-4">Description courte du projet. Technologies utilisées et objectifs atteints.</p>
                        <div class="flex space-x-3">
                            <a href="#" class="text-white hover:text-purple-400 transition-colors">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                            <a href="#" class="text-white hover:text-purple-400 transition-colors">
                                <i class="fab fa-github"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="btn bg-gradient-to-r from-purple-600 to-cyan-500 text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition-all relative overflow-hidden">
                    Voir plus de projets
                </a>
            </div>
        </div>
    </section>

<section id="skills" class="relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold mb-4 neon-text">Compétences</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-purple-600 to-cyan-500 mx-auto"></div>
                <p class="text-lg mt-6 max-w-2xl mx-auto">
                    Mon stack technologique et mes domaines d'expertise.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="glass p-8 rounded-2xl skill-item">
                    <div class="text-center mb-6">
                        <div class="inline-block p-4 rounded-full bg-purple-600 bg-opacity-20 mb-4">
                            <i class="fas fa-code text-3xl text-purple-500"></i>
                        </div>
                        <h3 class="text-2xl font-bold">Frontend</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <i class="fab fa-html5 text-orange-500 mr-3"></i>
                            <span>HTML5</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-css3-alt text-blue-500 mr-3"></i>
                            <span>CSS3 / SCSS</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-js text-yellow-500 mr-3"></i>
                            <span>JavaScript / TypeScript</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-react text-blue-400 mr-3"></i>
                            <span>React / Next.js</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-vuejs text-green-500 mr-3"></i>
                            <span>Vue.js</span>
                        </li>
                    </ul>
                </div>
                
                
                <div class="glass p-8 rounded-2xl skill-item">
                    <div class="text-center mb-6">
                        <div class="inline-block p-4 rounded-full bg-cyan-600 bg-opacity-20 mb-4">
                            <i class="fas fa-database text-3xl text-cyan-500"></i>
                        </div>
                        <h3 class="text-2xl font-bold">Backend</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <i class="fab fa-node-js text-green-600 mr-3"></i>
                            <span>Node.js / Express</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-php text-purple-400 mr-3"></i>
                            <span>PHP / Laravel</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-database text-blue-500 mr-3"></i>
                            <span>SQL / NoSQL</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-fire text-orange-500 mr-3"></i>
                            <span>Firebase</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-python text-blue-600 mr-3"></i>
                            <span>Python</span>
                        </li>
                    </ul>
                </div>
                
                
                <div class="glass p-8 rounded-2xl skill-item">
                    <div class="text-center mb-6">
                        <div class="inline-block p-4 rounded-full bg-purple-600 bg-opacity-20 mb-4">
                            <i class="fas fa-tools text-3xl text-purple-500"></i>
                        </div>
                        <h3 class="text-2xl font-bold">Outils & Autres</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <i class="fab fa-github text-gray-500 mr-3"></i>
                            <span>Git / GitHub</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fab fa-docker text-blue-500 mr-3"></i>
                            <span>Docker</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-cloud text-blue-400 mr-3"></i>
                            <span>AWS / GCP</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-mobile-alt text-green-500 mr-3"></i>
                            <span>Responsive Design</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-universal-access text-red-500 mr-3"></i>
                            <span>Accessibilité Web</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            
            <div class="mt-16 max-w-3xl mx-auto">
                <div class="mb-8">
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold">Frontend Development</span>
                        <span>90%</span>
                    </div>
                    <div class="h-3 bg-gray-700 rounded-full">
                        <div class="h-full rounded-full bg-gradient-to-r from-purple-600 to-cyan-500" style="width: 90%"></div>
                    </div>
                </div>
                
                <div class="mb-8">
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold">Backend Development</span>
                        <span>85%</span>
                    </div>
                    <div class="h-3 bg-gray-700 rounded-full">
                        <div class="h-full rounded-full bg-gradient-to-r from-purple-600 to-cyan-500" style="width: 85%"></div>
                    </div>
                </div>
                
                <div class="mb-8">
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold">UI/UX Design</span>
                        <span>80%</span>
                    </div>
                    <div class="h-3 bg-gray-700 rounded-full">
                        <div class="h-full rounded-full bg-gradient-to-r from-purple-600 to-cyan-500" style="width: 80%"></div>
                    </div>
                </div>
                
                <div class="mb-8">
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold">DevOps</span>
                        <span>75%</span>
                    </div>
                    <div class="h-3 bg-gray-700 rounded-full">
                        <div class="h-full rounded-full bg-gradient-to-r from-purple-600 to-cyan-500" style="width: 75%"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold mb-4 neon-text">Contact</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-purple-600 to-cyan-500 mx-auto"></div>
                <p class="text-lg mt-6 max-w-2xl mx-auto">
                    Intéressé par une collaboration ? N'hésitez pas à me contacter.
                </p>
            </div>
            
            <div class="flex flex-col md:flex-row gap-10">
                <div class="md:w-1/2">
                    <form class="space-y-6">
                        <div>
                            <label for="name" class="block mb-2 font-medium">Nom</label>
                            <input type="text" id="name" class="w-full px-4 py-3 rounded-lg form-input" placeholder="Votre nom">
                        </div>
                        
                        <div>
                            <label for="email" class="block mb-2 font-medium">Email</label>
                            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg form-input" placeholder="votre@email.com">
                        </div>
                        
                        <div>
                            <label for="message" class="block mb-2 font-medium">Message</label>
                            <input id="message" rows="5" class="w-full px-4 py-3 rounded-lg form-input" placeholder="Votre message" />
                        </div>
                        
                        <button type="submit" class="btn bg-gradient-to-r from-purple-600 to-cyan-500 text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition-all relative overflow-hidden w-full">
                            Envoyer
                        </button>
                    </form>
                </div>
                
                <div class="md:w-1/2">
                    <div class="glass p-8 rounded-2xl h-full">
                        <h3 class="text-2xl font-bold mb-6">Informations de contact</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="p-3 rounded-full bg-purple-600 bg-opacity-20 mr-4">
                                    <i class="fas fa-envelope text-xl text-purple-500"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Email</h4>
                                    <p>contact@exemple.com</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="p-3 rounded-full bg-purple-600 bg-opacity-20 mr-4">
                                    <i class="fas fa-map-marker-alt text-xl text-purple-500"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Localisation</h4>
                                    <p>Paris, France</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="p-3 rounded-full bg-purple-600 bg-opacity-20 mr-4">
                                    <i class="fas fa-phone-alt text-xl text-purple-500"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Téléphone</h4>
                                    <p>+33 (0)1 23 45 67 89</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-10">
                            <h4 class="font-semibold mb-4">Réseaux sociaux</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="p-3 rounded-full bg-purple-600 bg-opacity-20 hover:bg-opacity-40 transition-all">
                                    <i class="fab fa-linkedin-in text-xl text-purple-500"></i>
                                </a>
                                <a href="#" class="p-3 rounded-full bg-purple-600 bg-opacity-20 hover:bg-opacity-40 transition-all">
                                    <i class="fab fa-github text-xl text-purple-500"></i>
                                </a>
                                <a href="#" class="p-3 rounded-full bg-purple-600 bg-opacity-20 hover:bg-opacity-40 transition-all">
                                    <i class="fab fa-twitter text-xl text-purple-500"></i>
                                </a>
                                <a href="#" class="p-3 rounded-full bg-purple-600 bg-opacity-20 hover:bg-opacity-40 transition-all">
                                    <i class="fab fa-dribbble text-xl text-purple-500"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="py-10 relative">
        <div class="container mx-auto px-4 text-center">
            <p>© 2023 Portfolio. Tous droits réservés.</p>
            <div class="flex justify-center mt-4 space-x-4">
                <a href="#" class="hover:text-purple-500 transition-colors">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="hover:text-purple-500 transition-colors">
                    <i class="fab fa-github"></i>
                </a>
                <a href="#" class="hover:text-purple-500 transition-colors">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="hover:text-purple-500 transition-colors">
                    <i class="fab fa-dribbble"></i>
                </a>
            </div>
        </div>
    </footer>

// Custom cursor
        document.addEventListener('mousemove', function(e) {
            const cursor = document.querySelector('.cursor');
            const follower = document.querySelector('.cursor-follower');
            
            cursor.style.top = e.clientY + 'px';
            cursor.style.left = e.clientX + 'px';
            
            setTimeout(() => {
                follower.style.top = e.clientY + 'px';
                follower.style.left = e.clientX + 'px';
            }, 100);
        });

document.addEventListener('mousedown', function() {
            const cursor = document.querySelector('.cursor');
            const follower = document.querySelector('.cursor-follower');
            
            cursor.style.transform = 'translate(-50%, -50%) scale(0.8)';
            follower.style.transform = 'translate(-50%, -50%) scale(0.8)';
        });

document.addEventListener('mouseup', function() {
            const cursor = document.querySelector('.cursor');
            const follower = document.querySelector('.cursor-follower');
            
            cursor.style.transform = 'translate(-50%, -50%) scale(1)';
            follower.style.transform = 'translate(-50%, -50%) scale(1)';
        });

// Links and buttons hover effects
        const links = document.querySelectorAll('a, button, .mode-switch');
        links.forEach(link => {
            link.addEventListener('mouseenter', () => {
                const follower = document.querySelector('.cursor-follower');
                follower.style.width = '60px';
                follower.style.height = '60px';
                follower.style.borderColor = 'var(--primary-light)';
            });
            
            link.addEventListener('mouseleave', () => {
                const follower = document.querySelector('.cursor-follower');
                follower.style.width = '40px';
                follower.style.height = '40px';
                follower.style.borderColor = 'var(--primary)';
            });
        });

// Toggle dark/light mode
        const modeToggle = document.getElementById('mode-toggle');
        modeToggle.addEventListener('click', () => {
            document.body.classList.toggle('light');
            document.body.classList.toggle('dark');
        });

// Mobile menu toggle
        const menuBtn = document.querySelector('.menu-btn');
        const navMenu = document.querySelector('.nav-menu');
        
        menuBtn.addEventListener('click', () => {
            navMenu.classList.toggle('active');
            menuBtn.querySelector('i').classList.toggle('fa-bars');
            menuBtn.querySelector('i').classList.toggle('fa-times');
        });

// Close mobile menu when clicking on a link
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                menuBtn.querySelector('i').classList.add('fa-bars');
                menuBtn.querySelector('i').classList.remove('fa-times');
            });
        });

// Parallax hero effect
        window.addEventListener('scroll', function() {
            const scrollY = window.scrollY;
            document.querySelector('.hero-bg').style.transform = `translateY(${scrollY * 0.5}px)`;
            document.querySelector('.hero-title').style.transform = `translateY(${scrollY * 0.2}px)`;
            document.querySelector('.hero-subtitle').style.transform = `translateY(${scrollY * 0.1}px)`;
        });

// Creating particles
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // Random position
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                
                // Random size
                const size = Math.random() * 5 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // Random opacity
                particle.style.opacity = Math.random() * 0.5 + 0.3;
                
                // Random animation duration
                const duration = Math.random() * 20 + 10;
                particle.style.animationDuration = `${duration}s`;
                
                // Random animation delay
                const delay = Math.random() * 10;
                particle.style.animationDelay = `${delay}s`;
                
                particlesContainer.appendChild(particle);
            }
        }
        
        createParticles();

// Initialize GSAP and ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);

// Animate sections on scroll
        gsap.utils.toArray('section').forEach((section, i) => {
            ScrollTrigger.create({
                trigger: section,
                start: 'top 80%',
                end: 'bottom 20%',
                onEnter: () => {
                    gsap.to(section, { 
                        opacity: 1, 
                        y: 0, 
                        duration: 0.8, 
                        ease: 'power2.out' 
                    });
                },
                onLeaveBack: () => {
                    if (i !== 0) { // Don't animate the first section back
                        gsap.to(section, { 
                            opacity: 0.8, 
                            y: 50, 
                            duration: 0.8, 
                            ease: 'power2.out' 
                        });
                    }
                }
            });
        });

// Set initial state for sections
        gsap.utils.toArray('section:not(#hero)').forEach(section => {
            gsap.set(section, { opacity: 0, y: 50 });
        });

// Animate skill bars
        gsap.utils.toArray('.skill-item').forEach((item) => {
            gsap.from(item, {
                scrollTrigger: {
                    trigger: item,
                    start: 'top 80%',
                    end: 'bottom 20%',
                    toggleActions: 'play none none reverse'
                },
                opacity: 0,
                y: 50,
                duration: 0.5,
                stagger: 0.1
            });
        });

// Animate progress bars
        const progressBars = document.querySelectorAll('.progress');
        progressBars.forEach(bar => {
            const value = bar.getAttribute('data-value');
            gsap.to(bar, {
                scrollTrigger: {
                    trigger: bar,
                    start: 'top 80%',
                    end: 'bottom 20%',
                    toggleActions: 'play none none reverse'
                },
                width: value + '%',
                duration: 1.5,
                ease: 'power2.out'
            });
        });

// Hero animation on load
        gsap.from('.hero-title span', {
            opacity: 0,
            y: 50,
            stagger: 0.2,
            duration: 0.8,
            ease: 'power2.out',
            delay: 2
        });

gsap.from('.hero-subtitle', {
            opacity: 0,
            y: 30,
            duration: 0.8,
            ease: 'power2.out',
            delay: 2.6
        });

gsap.from('#hero .btn', {
            opacity: 0,
            y: 30,
            duration: 0.8,
            ease: 'power2.out',
            delay: 2.8
        });
    </script>
</body>
</html>

Portfolio

Recommended

HTML Portfolio Website Template 2024

Portfolio Website HTML CSS

Awesome Portfolio Website

HTML

CSS

JS

Recommended

HTML Portfolio Website Template 2024

Portfolio Website HTML CSS

Awesome Portfolio Website

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS