Tailwind Css
Portfolio
Developpeur
Template
Responsive
Dark Mode
Projets
Animations
Html Css Js
Landing Page
Creative
Utility First
Template portfolio développeur Tailwind CSS avec dark mode, animations fluides, grille projets et design utility-first moderne pour développeurs créatifs.
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Portfolio Dev Tailwindcss 2026 051101200 | AngularForAll</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind Configuration -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
'space': ['Space Grotesk', 'sans-serif'],
'inter': ['Inter', 'sans-serif'],
},
colors: {
primary: {
50: '#f0f0ff',
100: '#e0e0ff',
200: '#c4c4ff',
300: '#a0a0ff',
400: '#7c7cff',
500: '#6C63FF',
600: '#5a52e0',
700: '#4841c0',
800: '#3630a0',
900: '#242080',
},
accent: {
50: '#fff0f0',
100: '#ffe0e0',
200: '#ffc4c4',
300: '#ffa0a0',
400: '#ff7c7c',
500: '#FF6B6B',
600: '#e05a5a',
700: '#c04848',
800: '#a03636',
900: '#802424',
},
teal: {
50: '#f0fffa',
100: '#e0fff5',
200: '#c4ffed',
300: '#a0ffe3',
400: '#7cffd9',
500: '#4ECDC4',
600: '#3db5ad',
700: '#2d9d96',
800: '#1d857f',
900: '#0d6d68',
},
},
animation: {
'float': 'float 6s ease-in-out infinite',
'morph': 'morph 8s ease-in-out infinite',
'gradient': 'gradient 3s ease infinite',
'slide-in-left': 'slideInLeft 0.8s ease',
'slide-in-right': 'slideInRight 0.8s ease',
'fade-in-up': 'fadeInUp 0.8s ease both',
'spin-slow': 'spin 20s linear infinite',
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
'bounce-soft': 'bounceSoft 2s ease-in-out infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
},
morph: {
'0%, 100%': { borderRadius: '60% 40% 30% 70%/60% 30% 70% 40%' },
'50%': { borderRadius: '30% 60% 70% 40%/50% 60% 30% 60%' },
},
gradient: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
slideInLeft: {
'0%': { opacity: '0', transform: 'translateX(-50px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
slideInRight: {
'0%': { opacity: '0', transform: 'translateX(50px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(30px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
pulseSoft: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
},
bounceSoft: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
},
}
}
}
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Remix Icons -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css" rel="stylesheet">
<style>
/* Effet de verre */
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-light {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Effet de brillance */
.shimmer {
position: relative;
overflow: hidden;
}
.shimmer::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
/* Texte gradient */
.text-gradient {
background: linear-gradient(135deg, #6C63FF 0%, #FF6B6B 50%, #4ECDC4 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient 3s ease infinite;
}
/* Grille de fond */
.bg-grid {
background-image:
linear-gradient(rgba(108, 99, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(108, 99, 255, 0.05) 1px, transparent 1px);
background-size: 80px 80px;
}
/* Cercles décoratifs */
.decorative-circle {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
}
/* Hover card effect */
.hover-lift {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hover-lift:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px -20px rgba(108, 99, 255, 0.3);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #0a0a1a;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #6C63FF, #FF6B6B);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #FF6B6B, #6C63FF);
}
/* Loading skeleton */
.skeleton {
background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
background-size: 200% 100%;
animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.min-h-screen {
min-height: auto !important;
}
</style>
</head>
<body class="font-inter bg-[#0a0a1a] text-gray-200 antialiased">
<!-- Fond décoratif -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="decorative-circle w-[600px] h-[600px] bg-purple-600 -top-40 -right-40"></div>
<div class="decorative-circle w-[500px] h-[500px] bg-pink-600 bottom-0 -left-40"></div>
<div class="decorative-circle w-[400px] h-[400px] bg-teal-600 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
</div>
<!-- Navbar -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo -->
<a href="#" class="font-space text-3xl font-bold">
<span class="text-gradient">Portfolio</span>
<span class="text-white">.</span>
</a>
<!-- Desktop Menu -->
<div class="hidden lg:flex items-center space-x-1">
<a href="#home" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors relative group">
Accueil
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#about" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors relative group">
À propos
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#skills" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors relative group">
Compétences
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#projects" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors relative group">
Projets
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#contact" class="ml-4 px-6 py-2.5 bg-gradient-to-r from-primary-500 to-accent-500 text-white rounded-full text-sm font-semibold hover:shadow-lg hover:shadow-primary-500/25 transition-all duration-300 hover:-translate-y-0.5">
Contact
</a>
</div>
<!-- Mobile Menu Button -->
<button class="lg:hidden text-white text-2xl" id="menuToggle">
<i class="ri-menu-line"></i>
</button>
</div>
<!-- Mobile Menu -->
<div class="lg:hidden hidden" id="mobileMenu">
<div class="glass rounded-2xl p-4 mt-2 space-y-2">
<a href="#home" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all">Accueil</a>
<a href="#about" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all">À propos</a>
<a href="#skills" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all">Compétences</a>
<a href="#projects" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all">Projets</a>
<a href="#contact" class="block px-4 py-3 bg-gradient-to-r from-primary-500 to-accent-500 text-white rounded-lg text-center font-semibold">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative min-h-screen flex items-center bg-grid">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-32">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Texte -->
<div class="space-y-8">
<div class="inline-flex items-center gap-2 glass-light rounded-full px-4 py-2 text-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse-soft"></span>
<span class="text-gray-300">Disponible pour des projets</span>
</div>
<h1 class="font-space text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight">
<span class="text-white">Créateur</span><br>
<span class="text-gradient">d'expériences</span><br>
<span class="text-white">digitales</span>
</h1>
<p class="text-lg text-gray-400 max-w-lg">
Je conçois et développe des applications web modernes,
performantes et accessibles qui font la différence.
</p>
<div class="flex flex-wrap gap-4">
<a href="#projects" class="group px-8 py-4 bg-gradient-to-r from-primary-500 to-accent-500 text-white rounded-full font-semibold hover:shadow-xl hover:shadow-primary-500/25 transition-all duration-300 hover:-translate-y-1 inline-flex items-center gap-2">
<i class="ri-folder-open-line"></i>
Voir mes projets
<i class="ri-arrow-right-line group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="#contact" class="px-8 py-4 border-2 border-white/10 text-white rounded-full font-semibold hover:border-primary-500 hover:bg-primary-500/10 transition-all duration-300 hover:-translate-y-1 inline-flex items-center gap-2">
<i class="ri-chat-3-line"></i>
Me contacter
</a>
</div>
<!-- Stats -->
<div class="flex gap-8 pt-8">
<div>
<div class="text-3xl font-bold text-white" data-count="5">5+</div>
<div class="text-sm text-gray-500">Années d'expérience</div>
</div>
<div>
<div class="text-3xl font-bold text-white" data-count="50">50+</div>
<div class="text-sm text-gray-500">Projets réalisés</div>
</div>
<div>
<div class="text-3xl font-bold text-white" data-count="30">30+</div>
<div class="text-sm text-gray-500">Clients satisfaits</div>
</div>
</div>
</div>
<!-- Image / Illustration -->
<div class="relative flex justify-center">
<div class="relative w-80 h-80 lg:w-96 lg:h-96 animate-morph overflow-hidden border-2 border-primary-500/30 shadow-2xl shadow-primary-500/20">
<img src="public/avatar.png"
alt="Portrait"
class="w-full h-full object-cover"
onerror="this.src='https://via.placeholder.com/600x600/6C63FF/ffffff?text=Dev'">
</div>
<!-- Badges flottants -->
<div class="absolute -top-4 -left-4 glass-light rounded-2xl px-4 py-3 animate-float">
<div class="flex items-center gap-2">
<i class="ri-reactjs-line text-2xl text-blue-400"></i>
<span class="text-sm text-white font-medium">React</span>
</div>
</div>
<div class="absolute -bottom-4 -right-4 glass-light rounded-2xl px-4 py-3 animate-float" style="animation-delay: 1s;">
<div class="flex items-center gap-2">
<i class="ri-nodejs-line text-2xl text-green-400"></i>
<span class="text-sm text-white font-medium">Node.js</span>
</div>
</div>
</div>
</div>
</div>
<!-- Scroll Indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce-soft">
<div class="w-6 h-10 border-2 border-white/20 rounded-full flex justify-center">
<div class="w-1.5 h-3 bg-white/40 rounded-full mt-2 animate-pulse"></div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-24 relative">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-sm font-semibold text-primary-400 uppercase tracking-widest">Qui suis-je ?</span>
<h2 class="font-space text-4xl sm:text-5xl font-bold text-white mt-4">À propos de moi</h2>
</div>
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="space-y-6">
<div class="glass rounded-3xl p-8 hover-lift">
<div class="flex items-start gap-4 mb-6">
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center flex-shrink-0">
<i class="ri-lightbulb-flash-line text-2xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-2">Vision Créative</h3>
<p class="text-gray-400">Je transforme des idées complexes en solutions digitales élégantes et intuitives.</p>
</div>
</div>
<div class="flex items-start gap-4 mb-6">
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-teal-500 to-primary-500 flex items-center justify-center flex-shrink-0">
<i class="ri-code-box-line text-2xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-2">Code de Qualité</h3>
<p class="text-gray-400">Architecture propre, tests rigoureux et performances optimales sont mes priorités.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-accent-500 to-teal-500 flex items-center justify-center flex-shrink-0">
<i class="ri-heart-pulse-line text-2xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-2">Passion & Dévouement</h3>
<p class="text-gray-400">Chaque projet est une nouvelle aventure que j'aborde avec passion.</p>
</div>
</div>
</div>
</div>
<div class="glass rounded-3xl p-8 hover-lift">
<h3 class="text-2xl font-bold text-white mb-6">Mon parcours</h3>
<div class="space-y-6">
<div class="relative pl-8 border-l-2 border-primary-500/30">
<div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-primary-500"></div>
<h4 class="text-lg font-semibold text-white">Lead Developer</h4>
<p class="text-sm text-primary-400">TechCorp • 2022 - Présent</p>
<p class="text-gray-400 mt-1">Direction technique et développement d'applications web évolutives.</p>
</div>
<div class="relative pl-8 border-l-2 border-accent-500/30">
<div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-accent-500"></div>
<h4 class="text-lg font-semibold text-white">Full-Stack Developer</h4>
<p class="text-sm text-accent-400">StartupXYZ • 2020 - 2022</p>
<p class="text-gray-400 mt-1">Développement full-stack et conception d'interfaces utilisateur.</p>
</div>
<div class="relative pl-8 border-l-2 border-teal-500/30">
<div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-teal-500"></div>
<h4 class="text-lg font-semibold text-white">Développeur Frontend</h4>
<p class="text-sm text-teal-400">WebAgency • 2018 - 2020</p>
<p class="text-gray-400 mt-1">Création d'interfaces web responsives et accessibles.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-24 relative bg-[#0d0d1f]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-sm font-semibold text-accent-400 uppercase tracking-widest">Ce que je maîtrise</span>
<h2 class="font-space text-4xl sm:text-5xl font-bold text-white mt-4">Mes compétences</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Skill Card -->
<div class="glass rounded-3xl p-8 text-center hover-lift group cursor-pointer">
<div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<i class="ri-reactjs-line text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-white mb-3">Frontend</h4>
<p class="text-gray-400 text-sm mb-4">React, Vue, Next.js, TypeScript</p>
<div class="w-full h-2 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000" style="width: 0%" data-width="95%"></div>
</div>
<span class="text-xs text-gray-500 mt-2 block">95%</span>
</div>
<div class="glass rounded-3xl p-8 text-center hover-lift group cursor-pointer">
<div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<i class="ri-nodejs-line text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-white mb-3">Backend</h4>
<p class="text-gray-400 text-sm mb-4">Node.js, Python, PostgreSQL</p>
<div class="w-full h-2 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-green-500 to-teal-500 rounded-full transition-all duration-1000" style="width: 0%" data-width="90%"></div>
</div>
<span class="text-xs text-gray-500 mt-2 block">90%</span>
</div>
<div class="glass rounded-3xl p-8 text-center hover-lift group cursor-pointer">
<div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<i class="ri-palette-line text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-white mb-3">Design UI/UX</h4>
<p class="text-gray-400 text-sm mb-4">Figma, Tailwind, Design Systems</p>
<div class="w-full h-2 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-pink-500 to-red-500 rounded-full transition-all duration-1000" style="width: 0%" data-width="85%"></div>
</div>
<span class="text-xs text-gray-500 mt-2 block">85%</span>
</div>
<div class="glass rounded-3xl p-8 text-center hover-lift group cursor-pointer">
<div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<i class="ri-smartphone-line text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-white mb-3">Mobile</h4>
<p class="text-gray-400 text-sm mb-4">React Native, Flutter, PWA</p>
<div class="w-full h-2 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full transition-all duration-1000" style="width: 0%" data-width="80%"></div>
</div>
<span class="text-xs text-gray-500 mt-2 block">80%</span>
</div>
</div>
<!-- Tech Stack -->
<div class="mt-16 glass rounded-3xl p-8">
<h3 class="text-2xl font-bold text-white text-center mb-8">Technologies utilisées</h3>
<div class="flex flex-wrap justify-center gap-4">
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-reactjs-line text-blue-400 text-xl"></i> React
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-vuejs-line text-green-400 text-xl"></i> Vue.js
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-angularjs-line text-red-400 text-xl"></i> Angular
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-nodejs-line text-green-500 text-xl"></i> Node.js
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-python-line text-yellow-400 text-xl"></i> Python
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-database-2-line text-blue-300 text-xl"></i> PostgreSQL
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-firebase-line text-orange-400 text-xl"></i> Firebase
</span>
<span class="glass-light px-5 py-3 rounded-full text-sm flex items-center gap-2 hover:bg-white/10 transition-all cursor-default">
<i class="ri-docker-line text-blue-500 text-xl"></i> Docker
</span>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-24 relative">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-sm font-semibold text-teal-400 uppercase tracking-widest">Mes réalisations</span>
<h2 class="font-space text-4xl sm:text-5xl font-bold text-white mt-4">Projets récents</h2>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Card -->
<div class="glass rounded-3xl overflow-hidden hover-lift group">
<div class="relative h-56 overflow-hidden">
<img src="public/phoneL.webp"
alt="Projet 1"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a1a] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6">
<a href="#" class="px-6 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-primary-500 hover:text-white transition-all duration-300">
Voir le projet
</a>
</div>
</div>
<div class="p-6">
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 text-xs font-medium bg-primary-500/20 text-primary-300 rounded-full">React</span>
<span class="px-3 py-1 text-xs font-medium bg-accent-500/20 text-accent-300 rounded-full">Node.js</span>
<span class="px-3 py-1 text-xs font-medium bg-teal-500/20 text-teal-300 rounded-full">PostgreSQL</span>
</div>
<h4 class="text-xl font-bold text-white mb-2">E-Commerce Platform</h4>
<p class="text-gray-400 text-sm">Plateforme de commerce électronique moderne avec paiement intégré et dashboard admin.</p>
</div>
</div>
<div class="glass rounded-3xl overflow-hidden hover-lift group">
<div class="relative h-56 overflow-hidden">
<img src="public/phoneL.webp"
alt="Projet 2"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a1a] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6">
<a href="#" class="px-6 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-primary-500 hover:text-white transition-all duration-300">
Voir le projet
</a>
</div>
</div>
<div class="p-6">
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 text-xs font-medium bg-blue-500/20 text-blue-300 rounded-full">Vue.js</span>
<span class="px-3 py-1 text-xs font-medium bg-orange-500/20 text-orange-300 rounded-full">Firebase</span>
</div>
<h4 class="text-xl font-bold text-white mb-2">Social Media App</h4>
<p class="text-gray-400 text-sm">Application sociale avec chat en temps réel, stories et partage de contenu multimédia.</p>
</div>
</div>
<div class="glass rounded-3xl overflow-hidden hover-lift group">
<div class="relative h-56 overflow-hidden">
<img src="public/phoneL.webp"
alt="Projet 3"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a1a] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6">
<a href="#" class="px-6 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-primary-500 hover:text-white transition-all duration-300">
Voir le projet
</a>
</div>
</div>
<div class="p-6">
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 text-xs font-medium bg-red-500/20 text-red-300 rounded-full">Angular</span>
<span class="px-3 py-1 text-xs font-medium bg-yellow-500/20 text-yellow-300 rounded-full">Python</span>
</div>
<h4 class="text-xl font-bold text-white mb-2">Dashboard Analytics</h4>
<p class="text-gray-400 text-sm">Tableau de bord analytique avec visualisations de données avancées et temps réel.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-24 relative bg-[#0d0d1f]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-sm font-semibold text-primary-400 uppercase tracking-widest">Restons en contact</span>
<h2 class="font-space text-4xl sm:text-5xl font-bold text-white mt-4">Contactez-moi</h2>
</div>
<div class="max-w-4xl mx-auto">
<div class="grid lg:grid-cols-2 gap-8">
<!-- Info -->
<div class="space-y-6">
<div class="glass rounded-3xl p-6 flex items-center gap-4 hover-lift cursor-pointer">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center flex-shrink-0">
<i class="ri-mail-line text-2xl text-white"></i>
</div>
<div>
<h4 class="text-white font-semibold">Email</h4>
<p class="text-gray-400 text-sm">contact@portfolio.dev</p>
</div>
</div>
<div class="glass rounded-3xl p-6 flex items-center gap-4 hover-lift cursor-pointer">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-teal-500 to-primary-500 flex items-center justify-center flex-shrink-0">
<i class="ri-map-pin-line text-2xl text-white"></i>
</div>
<div>
<h4 class="text-white font-semibold">Localisation</h4>
<p class="text-gray-400 text-sm">Paris, France</p>
</div>
</div>
<div class="glass rounded-3xl p-6 flex items-center gap-4 hover-lift cursor-pointer">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-accent-500 to-teal-500 flex items-center justify-center flex-shrink-0">
<i class="ri-phone-line text-2xl text-white"></i>
</div>
<div>
<h4 class="text-white font-semibold">Téléphone</h4>
<p class="text-gray-400 text-sm">+33 6 12 34 56 78</p>
</div>
</div>
</div>
<!-- Form -->
<form class="glass rounded-3xl p-8 space-y-5">
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Nom</label>
<input type="text" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all" placeholder="Votre nom">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Email</label>
<input type="email" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all" placeholder="votre@email.com">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Sujet</label>
<input type="text" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all" placeholder="Sujet de votre message">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Message</label>
<textarea rows="5" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all resize-none" placeholder="Votre message..."></textarea>
</div>
<button type="submit" class="w-full px-8 py-4 bg-gradient-to-r from-primary-500 to-accent-500 text-white rounded-xl font-semibold hover:shadow-xl hover:shadow-primary-500/25 transition-all duration-300 hover:-translate-y-1 flex items-center justify-center gap-2">
<i class="ri-send-plane-fill"></i>
Envoyer le message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-white/5">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-8">
<div>
<a href="#" class="font-space text-2xl font-bold">
<span class="text-gradient">Portfolio</span>
<span class="text-white">.</span>
</a>
<p class="text-gray-500 text-sm mt-2">© 2024 Tous droits réservés.</p>
</div>
<div class="flex gap-3">
<a href="#" class="w-12 h-12 glass-light rounded-full flex items-center justify-center text-gray-400 hover:text-white hover:bg-primary-500/20 hover:border-primary-500 transition-all duration-300">
<i class="ri-github-line text-xl"></i>
</a>
<a href="#" class="w-12 h-12 glass-light rounded-full flex items-center justify-center text-gray-400 hover:text-white hover:bg-primary-500/20 hover:border-primary-500 transition-all duration-300">
<i class="ri-linkedin-line text-xl"></i>
</a>
<a href="#" class="w-12 h-12 glass-light rounded-full flex items-center justify-center text-gray-400 hover:text-white hover:bg-primary-500/20 hover:border-primary-500 transition-all duration-300">
<i class="ri-twitter-x-line text-xl"></i>
</a>
<a href="#" class="w-12 h-12 glass-light rounded-full flex items-center justify-center text-gray-400 hover:text-white hover:bg-primary-500/20 hover:border-primary-500 transition-all duration-300">
<i class="ri-dribbble-line text-xl"></i>
</a>
</div>
<a href="#home" class="px-6 py-3 glass-light rounded-full text-gray-400 hover:text-white hover:bg-primary-500/20 transition-all duration-300 flex items-center gap-2">
<i class="ri-arrow-up-line"></i>
Retour en haut
</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// === Mobile Menu Toggle ===
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
const icon = menuToggle.querySelector('i');
icon.classList.toggle('ri-menu-line');
icon.classList.toggle('ri-close-line');
});
// Fermer le menu mobile lors du clic sur un lien
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
const icon = menuToggle.querySelector('i');
icon.classList.add('ri-menu-line');
icon.classList.remove('ri-close-line');
});
});
// === Navbar Scroll Effect ===
const navbar = document.getElementById('navbar');
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 50) {
navbar.classList.add('shadow-2xl', 'bg-[#0a0a1a]/80', 'backdrop-blur-xl');
navbar.classList.remove('bg-transparent');
} else {
navbar.classList.remove('shadow-2xl', 'bg-[#0a0a1a]/80', 'backdrop-blur-xl');
navbar.classList.add('bg-transparent');
}
// Animer les barres de progression
if (currentScroll > 500) {
document.querySelectorAll('[data-width]').forEach(bar => {
bar.style.width = bar.getAttribute('data-width');
});
}
lastScroll = currentScroll;
});
// === Smooth Scroll ===
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'
});
}
});
});
// === Form Submit Handler ===
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const submitBtn = this.querySelector('button[type="submit"]');
const originalHTML = submitBtn.innerHTML;
// Animation de succès
submitBtn.innerHTML = '<i class="ri-check-line"></i> Message envoyé !';
submitBtn.style.background = 'linear-gradient(135deg, #4ECDC4, #44bd32)';
submitBtn.disabled = true;
// Réinitialiser le formulaire
this.reset();
// Restaurer le bouton
setTimeout(() => {
submitBtn.innerHTML = originalHTML;
submitBtn.style.background = '';
submitBtn.disabled = false;
}, 3000);
});
// === Animation au scroll (Intersection Observer) ===
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in-up');
// Animer les barres de progression
const progressBars = entry.target.querySelectorAll('[data-width]');
progressBars.forEach(bar => {
setTimeout(() => {
bar.style.width = bar.getAttribute('data-width');
}, 200);
});
}
});
}, observerOptions);
// Observer les sections
document.querySelectorAll('section > div > div').forEach(el => {
observer.observe(el);
});
// === Effet parallaxe sur les cercles décoratifs ===
document.addEventListener('mousemove', (e) => {
const circles = document.querySelectorAll('.decorative-circle');
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
circles.forEach((circle, index) => {
const speed = (index + 1) * 20;
circle.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
});
});
// === Compteur animé ===
function animateCounters() {
document.querySelectorAll('[data-count]').forEach(counter => {
const target = counter.getAttribute('data-count');
const count = parseInt(counter.textContent);
if (!isNaN(count) && count < parseInt(target)) {
const duration = 2000;
const step = parseInt(target) / (duration / 16);
let current = count;
const updateCounter = () => {
current += step;
if (current < parseInt(target)) {
counter.textContent = Math.floor(current) + '+';
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target + '+';
}
};
updateCounter();
}
});
}
// Observer pour les compteurs
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateCounters();
counterObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
const statsContainer = document.querySelector('[data-count]')?.parentElement?.parentElement;
if (statsContainer) {
counterObserver.observe(statsContainer);
}
console.log('🚀 Portfolio Tailwind CSS chargé avec succès !');
console.log('💡 Fonctionnalités :');
console.log(' - Design moderne avec effets glassmorphism');
console.log(' - Animations fluides au scroll');
console.log(' - Barres de progression animées');
console.log(' - Effet parallaxe interactif');
console.log(' - Compteurs animés');
console.log(' - Menu mobile responsive');
console.log(' - Formulaire avec feedback visuel');
</script>
</body>
</html>
Télécharger le fichier source