Bootstrap 5
Portfolio
Developpeur
Template
Responsive
Projets
Competences
Modern Design
Html Css Js
Landing Page
Creative
Bootstrap Icons
Template portfolio développeur Bootstrap 5 avec design Space Grotesk, sections projets, compétences et contact. Idéal pour créatifs et développeurs web.
<!DOCTYPE html>
<html lang="fr">
<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 Bootstrap5 2026 051101201 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 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&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6C63FF;
--secondary: #FF6B6B;
--accent: #4ECDC4;
--dark: #1a1a2e;
--darker: #16213e;
--light: #f8f9fa;
--gradient-1: linear-gradient(135deg, #6C63FF 0%, #FF6B6B 100%);
--gradient-2: linear-gradient(135deg, #4ECDC4 0%, #6C63FF 100%);
--gradient-3: linear-gradient(45deg, #FF6B6B 0%, #feca57 100%);
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 5px 20px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: var(--dark);
color: #e0e0e0;
overflow-x: hidden;
position: relative;
}
.text-muted{
color: #FFF;
}
/* Fond animé avec particules */
.bg-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background:
radial-gradient(circle at 20% 50%, rgba(108, 99, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 50%);
}
/* Navbar stylée */
.navbar {
background: rgba(26, 26, 46, 0.8) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
transition: all 0.4s ease;
padding: 15px 0;
}
.navbar.scrolled {
padding: 10px 0;
background: rgba(22, 33, 62, 0.95) !important;
box-shadow: var(--shadow-lg);
}
.navbar-brand {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1.8rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-link {
font-weight: 500;
color: #b0b0b0 !important;
transition: all 0.3s ease;
position: relative;
margin: 0 10px;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-1);
transition: width 0.3s ease;
border-radius: 2px;
}
.nav-link:hover {
color: #fff !important;
}
.nav-link:hover::after {
width: 100%;
}
/* Hero Section */
.hero-section {
min-height: 700px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-subtitle {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 5px;
color: var(--accent);
margin-bottom: 20px;
animation: slideInLeft 0.8s ease;
}
.hero-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 4.5rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
animation: slideInRight 0.8s ease;
}
.hero-title .gradient-text {
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.2rem;
color: #a0a0a0;
margin-bottom: 40px;
animation: fadeInUp 0.8s ease 0.3s both;
}
.hero-image-wrapper {
position: relative;
animation: float 6s ease-in-out infinite;
}
.hero-image {
width: 350px;
height: 350px;
border-radius: 50%;
border: 3px solid var(--primary);
box-shadow: 0 0 50px rgba(108, 99, 255, 0.3);
animation: morph 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes morph {
0%, 100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Boutons */
.btn-primary-custom {
background: var(--gradient-1);
border: none;
color: white;
padding: 15px 35px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.btn-primary-custom:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(108, 99, 255, 0.4);
color: white;
}
.btn-outline-custom {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
padding: 15px 35px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.btn-outline-custom:hover {
background: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(108, 99, 255, 0.3);
}
/* Section titres */
.section-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
position: relative;
}
.section-subtitle {
color: var(--accent);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.9rem;
margin-bottom: 3rem;
}
/* About Section */
.about-section {
padding: 100px 0;
background: var(--darker);
position: relative;
}
.about-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
transition: all 0.4s ease;
}
.about-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.stat-number {
font-family: 'Space Grotesk', sans-serif;
font-size: 3rem;
font-weight: 700;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Skills Section */
.skills-section {
padding: 100px 0;
position: relative;
}
.skill-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.4s ease;
height: 100%;
}
.skill-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}
.skill-icon {
font-size: 3rem;
margin-bottom: 20px;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.progress {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
background: var(--gradient-1);
border-radius: 10px;
transition: width 1.5s ease;
}
/* Projects Section */
.projects-section {
padding: 100px 0;
background: var(--darker);
position: relative;
}
.project-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s ease;
height: 100%;
}
.project-card:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-xl);
border-color: var(--accent);
}
.project-image {
position: relative;
overflow: hidden;
height: 250px;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-card:hover .project-image img {
transform: scale(1.1);
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(108, 99, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.4s ease;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.badge-custom {
background: var(--gradient-1);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
/* Testimonials Section */
.testimonials-section {
padding: 100px 0;
position: relative;
}
.testimonial-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
transition: all 0.4s ease;
}
.testimonial-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-xl);
}
.testimonial-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid var(--primary);
box-shadow: 0 0 30px rgba(108, 99, 255, 0.3);
}
/* Contact Section */
.contact-section {
padding: 100px 0;
background: var(--darker);
position: relative;
}
.contact-form {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
}
.form-control {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
color: white;
border-radius: 10px;
padding: 15px;
transition: all 0.3s ease;
}
.form-control:focus {
background: rgba(255, 255, 255, 0.1);
border-color: var(--primary);
box-shadow: 0 0 15px rgba(108, 99, 255, 0.2);
color: white;
}
.form-control::placeholder {
color: #888;
}
.contact-info-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
padding: 20px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 15px;
transition: all 0.3s ease;
}
.contact-info-item:hover {
border-color: var(--primary);
transform: translateX(10px);
}
.contact-icon {
font-size: 2rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Footer */
.footer {
background: var(--dark);
border-top: 1px solid var(--glass-border);
padding: 30px 0;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: #b0b0b0;
font-size: 1.2rem;
transition: all 0.3s ease;
margin: 0 5px;
}
.social-links a:hover {
background: var(--gradient-1);
border-color: transparent;
color: white;
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
/* Scroll to top */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--gradient-1);
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: var(--shadow-lg);
}
.scroll-top.show {
opacity: 1;
visibility: visible;
}
.scroll-top:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
/* Animations */
.reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.hero-image {
width: 250px;
height: 250px;
}
}
/* Custom cursor */
.cursor-dot {
width: 10px;
height: 10px;
background: var(--primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.1s ease;
}
.cursor-outline {
width: 40px;
height: 40px;
border: 2px solid var(--primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9998;
transition: transform 0.2s ease;
}
.min-h-screen {
min-height: auto !important;
}
</style>
</head>
<body>
<!-- Curseur personnalisé -->
<div class="cursor-dot"></div>
<div class="cursor-outline"></div>
<!-- Fond animé -->
<div class="bg-particles"></div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Portfolio.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#home">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Compétences</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projets</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Témoignages</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 hero-content">
<p class="hero-subtitle">👋 Bonjour, je suis</p>
<h1 class="hero-title text-white">
Développeur<br>
<span class="gradient-text">Créatif</span> &<br>
Designer UI/UX
</h1>
<p class="hero-description">
Je crée des expériences digitales uniques et innovantes.
Passionné par le design moderne et le développement web de qualité.
</p>
<div class="d-flex gap-3">
<a href="#projects" class="btn btn-primary-custom">
<i class="bi bi-folder2-open me-2"></i>Voir mes projets
</a>
<a href="#contact" class="btn btn-outline-custom">
<i class="bi bi-chat-dots me-2"></i>Me contacter
</a>
</div>
</div>
<div class="col-lg-5 text-center">
<div class="hero-image-wrapper">
<img src="public/avatar.png"
alt="Profile"
class="hero-image"
onerror="this.src='https://via.placeholder.com/600x600/6C63FF/ffffff?text=Dev'">
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="text-center mb-5 reveal">
<p class="section-subtitle">Qui suis-je ?</p>
<h2 class="section-title text-white">À propos de moi</h2>
</div>
<div class="row g-4">
<div class="col-lg-6 reveal">
<div class="about-card">
<h3 class="text-white mb-4">Mon parcours</h3>
<p class="text-muted">
Développeur full-stack passionné avec plus de 5 ans d'expérience dans la création
d'applications web et mobiles. Je combine créativité et expertise technique pour
donner vie à des projets innovants.
</p>
<p class="text-muted">
Spécialisé en React, Node.js, et design d'interfaces, j'aime relever des défis
techniques et créer des expériences utilisateur exceptionnelles.
</p>
<div class="row mt-4">
<div class="col-4 text-center">
<div class="stat-number">5+</div>
<small class="text-muted">Années d'expérience</small>
</div>
<div class="col-4 text-center">
<div class="stat-number">50+</div>
<small class="text-muted">Projets réalisés</small>
</div>
<div class="col-4 text-center">
<div class="stat-number">30+</div>
<small class="text-muted">Clients satisfaits</small>
</div>
</div>
</div>
</div>
<div class="col-lg-6 reveal">
<div class="about-card">
<h3 class="text-white mb-4">Mes valeurs</h3>
<div class="d-flex align-items-start mb-4">
<i class="bi bi-lightbulb-fill text-warning fs-3 me-3"></i>
<div>
<h5 class="text-white">Innovation</h5>
<p class="text-muted mb-0">Toujours à la recherche de solutions créatives et innovantes.</p>
</div>
</div>
<div class="d-flex align-items-start mb-4">
<i class="bi bi-heart-fill text-danger fs-3 me-3"></i>
<div>
<h5 class="text-white">Passion</h5>
<p class="text-muted mb-0">Dévoué à créer des produits qui font la différence.</p>
</div>
</div>
<div class="d-flex align-items-start">
<i class="bi bi-shield-check text-success fs-3 me-3"></i>
<div>
<h5 class="text-white">Qualité</h5>
<p class="text-muted mb-0">Engagement envers l'excellence et l'attention aux détails.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills-section">
<div class="container">
<div class="text-center mb-5 reveal">
<p class="section-subtitle">Ce que je maîtrise</p>
<h2 class="section-title text-white">Mes compétences</h2>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3 reveal">
<div class="skill-card">
<div class="skill-icon">
<i class="bi bi-code-slash"></i>
</div>
<h4 class="text-white">Frontend</h4>
<p class="text-muted small">React, Vue, Angular</p>
<div class="progress mb-2">
<div class="progress-bar" style="width: 0%" data-width="95%"></div>
</div>
<small class="text-muted">95%</small>
</div>
</div>
<div class="col-md-6 col-lg-3 reveal">
<div class="skill-card">
<div class="skill-icon">
<i class="bi bi-server"></i>
</div>
<h4 class="text-white">Backend</h4>
<p class="text-muted small">Node.js, Python, Java</p>
<div class="progress mb-2">
<div class="progress-bar" style="width: 0%" data-width="90%"></div>
</div>
<small class="text-muted">90%</small>
</div>
</div>
<div class="col-md-6 col-lg-3 reveal">
<div class="skill-card">
<div class="skill-icon">
<i class="bi bi-palette"></i>
</div>
<h4 class="text-white">Design</h4>
<p class="text-muted small">Figma, Adobe XD, Sketch</p>
<div class="progress mb-2">
<div class="progress-bar" style="width: 0%" data-width="85%"></div>
</div>
<small class="text-muted">85%</small>
</div>
</div>
<div class="col-md-6 col-lg-3 reveal">
<div class="skill-card">
<div class="skill-icon">
<i class="bi bi-phone"></i>
</div>
<h4 class="text-white">Mobile</h4>
<p class="text-muted small">React Native, Flutter</p>
<div class="progress mb-2">
<div class="progress-bar" style="width: 0%" data-width="80%"></div>
</div>
<small class="text-muted">80%</small>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section">
<div class="container">
<div class="text-center mb-5 reveal">
<p class="section-subtitle">Mes réalisations</p>
<h2 class="section-title text-white">Projets récents</h2>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4 reveal">
<div class="project-card">
<div class="project-image">
<img src="public/phoneL.webp" alt="Projet 1">
<div class="project-overlay">
<a href="#" class="btn btn-light rounded-pill">
<i class="bi bi-eye me-2"></i>Voir le projet
</a>
</div>
</div>
<div class="p-4">
<div class="d-flex gap-2 mb-3">
<span class="badge-custom">React</span>
<span class="badge-custom">Node.js</span>
</div>
<h5 class="text-white">E-Commerce Platform</h5>
<p class="text-muted small">Plateforme de commerce électronique moderne avec paiement intégré.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 reveal">
<div class="project-card">
<div class="project-image">
<img src="public/phoneL.webp" alt="Projet 2">
<div class="project-overlay">
<a href="#" class="btn btn-light rounded-pill">
<i class="bi bi-eye me-2"></i>Voir le projet
</a>
</div>
</div>
<div class="p-4">
<div class="d-flex gap-2 mb-3">
<span class="badge-custom">Vue.js</span>
<span class="badge-custom">Firebase</span>
</div>
<h5 class="text-white">Social Media App</h5>
<p class="text-muted small">Application sociale avec chat en temps réel et partage de contenu.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 reveal">
<div class="project-card">
<div class="project-image">
<img src="public/phoneL.webp" alt="Projet 3">
<div class="project-overlay">
<a href="#" class="btn btn-light rounded-pill">
<i class="bi bi-eye me-2"></i>Voir le projet
</a>
</div>
</div>
<div class="p-4">
<div class="d-flex gap-2 mb-3">
<span class="badge-custom">Angular</span>
<span class="badge-custom">Python</span>
</div>
<h5 class="text-white">Dashboard Analytics</h5>
<p class="text-muted small">Tableau de bord analytique avec visualisations de données avancées.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
<div class="container">
<div class="text-center mb-5 reveal">
<p class="section-subtitle">Ce qu'ils disent</p>
<h2 class="section-title text-white">Témoignages</h2>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4 reveal">
<div class="testimonial-card text-center">
<i class="bi bi-quote display-4" style="color: var(--primary);"></i>
<p class="text-muted my-3">
"Un développeur exceptionnel qui a su comprendre nos besoins et livrer
un produit au-delà de nos attentes. Je recommande vivement !"
</p>
<img src="public/avatar.png"
alt="Client"
class="testimonial-avatar mb-3"
onerror="this.src='https://via.placeholder.com/150/6C63FF/ffffff?text=C'">
<h6 class="text-white mb-1">Marie Laurent</h6>
<small class="text-muted">CEO, TechStart</small>
</div>
</div>
<div class="col-md-6 col-lg-4 reveal">
<div class="testimonial-card text-center">
<i class="bi bi-quote display-4" style="color: var(--secondary);"></i>
<p class="text-muted my-3">
"Collaboration parfaite ! Le design est moderne et l'application
est parfaitement fonctionnelle. Un vrai plaisir de travailler ensemble."
</p>
<img src="public/avatar.png"
alt="Client"
class="testimonial-avatar mb-3"
onerror="this.src='https://via.placeholder.com/150/FF6B6B/ffffff?text=C'">
<h6 class="text-white mb-1">Thomas Dubois</h6>
<small class="text-muted">Fondateur, InnovateLab</small>
</div>
</div>
<div class="col-md-6 col-lg-4 reveal">
<div class="testimonial-card text-center">
<i class="bi bi-quote display-4" style="color: var(--accent);"></i>
<p class="text-muted my-3">
"Professionnalisme et créativité sont les mots qui décrivent le mieux
son travail. Le résultat final est bluffant de qualité."
</p>
<img src="public/avatar.png"
alt="Client"
class="testimonial-avatar mb-3"
onerror="this.src='https://via.placeholder.com/150/4ECDC4/ffffff?text=C'">
<h6 class="text-white mb-1">Sophie Martin</h6>
<small class="text-muted">Directrice, CreativeAgency</small>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="text-center mb-5 reveal">
<p class="section-subtitle">Restons en contact</p>
<h2 class="section-title text-white">Contactez-moi</h2>
</div>
<div class="row g-4">
<div class="col-lg-5 reveal">
<div class="contact-info-item">
<i class="bi bi-envelope-fill contact-icon"></i>
<div>
<h6 class="text-white mb-1">Email</h6>
<p class="text-muted mb-0">contact@portfolio.dev</p>
</div>
</div>
<div class="contact-info-item">
<i class="bi bi-geo-alt-fill contact-icon"></i>
<div>
<h6 class="text-white mb-1">Localisation</h6>
<p class="text-muted mb-0">Paris, France</p>
</div>
</div>
<div class="contact-info-item">
<i class="bi bi-telephone-fill contact-icon"></i>
<div>
<h6 class="text-white mb-1">Téléphone</h6>
<p class="text-muted mb-0">+33 6 12 34 56 78</p>
</div>
</div>
</div>
<div class="col-lg-7 reveal">
<form class="contact-form">
<div class="row g-3">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Votre nom">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Votre email">
</div>
<div class="col-12">
<input type="text" class="form-control" placeholder="Sujet">
</div>
<div class="col-12">
<textarea class="form-control" rows="5" placeholder="Votre message"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-custom w-100">
<i class="bi bi-send-fill me-2"></i>Envoyer le message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
<p class="text-muted mb-0">© 2024 Portfolio. Tous droits réservés.</p>
</div>
<div class="col-md-4 text-center mb-3 mb-md-0">
<div class="social-links">
<a href="#"><i class="bi bi-github"></i></a>
<a href="#"><i class="bi bi-linkedin"></i></a>
<a href="#"><i class="bi bi-twitter-x"></i></a>
<a href="#"><i class="bi bi-dribbble"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="col-md-4 text-center text-md-end">
<a href="#home" class="btn btn-outline-custom btn-sm">
<i class="bi bi-arrow-up me-2"></i>Retour en haut
</a>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button -->
<button class="scroll-top" id="scrollTopBtn">
<i class="bi bi-arrow-up"></i>
</button>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
// === Curseur personnalisé ===
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');
document.addEventListener('mousemove', (e) => {
cursorDot.style.left = e.clientX + 'px';
cursorDot.style.top = e.clientY + 'px';
setTimeout(() => {
cursorOutline.style.left = e.clientX - 15 + 'px';
cursorOutline.style.top = e.clientY - 15 + 'px';
}, 50);
});
document.addEventListener('mousedown', () => {
cursorDot.style.transform = 'scale(1.5)';
cursorOutline.style.transform = 'scale(1.2)';
});
document.addEventListener('mouseup', () => {
cursorDot.style.transform = 'scale(1)';
cursorOutline.style.transform = 'scale(1)';
});
// === Navbar scroll effect ===
const navbar = document.querySelector('.navbar');
const scrollTopBtn = document.getElementById('scrollTopBtn');
window.addEventListener('scroll', () => {
// Navbar
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
// Scroll to top button
if (window.scrollY > 500) {
scrollTopBtn.classList.add('show');
} else {
scrollTopBtn.classList.remove('show');
}
// Révéler les éléments au scroll
revealOnScroll();
});
// === Scroll to top ===
scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// === Smooth scroll pour les liens de navigation ===
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'
});
}
});
});
// === Animation de révélation ===
function revealOnScroll() {
const reveals = document.querySelectorAll('.reveal');
reveals.forEach(reveal => {
const windowHeight = window.innerHeight;
const elementTop = reveal.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveal.classList.add('active');
// Animer les barres de progression si elles sont dans l'élément
const progressBars = reveal.querySelectorAll('.progress-bar');
progressBars.forEach(bar => {
const width = bar.getAttribute('data-width');
if (width) {
bar.style.width = width;
}
});
}
});
}
// === Gestion du formulaire ===
const contactForm = document.querySelector('.contact-form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Animation de succès
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="bi bi-check-circle-fill me-2"></i>Message envoyé !';
submitBtn.style.background = 'linear-gradient(135deg, #4ECDC4 0%, #44bd32 100%)';
// Réinitialiser le formulaire
this.reset();
// Restaurer le bouton après 3 secondes
setTimeout(() => {
submitBtn.innerHTML = originalText;
submitBtn.style.background = '';
}, 3000);
});
}
// === Animation au chargement ===
window.addEventListener('load', () => {
revealOnScroll();
// Animation des barres de progression initiales
document.querySelectorAll('.progress-bar').forEach(bar => {
const width = bar.getAttribute('data-width');
if (width) {
setTimeout(() => {
bar.style.width = width;
}, 500);
}
});
});
// === Effet de parallaxe sur le fond ===
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
document.querySelector('.bg-particles').style.transform =
`translate(${x * 20}px, ${y * 20}px)`;
});
// === Effet de typing dans le titre (optionnel) ===
console.log('🚀 Portfolio moderne chargé avec succès !');
console.log('💡 Fonctionnalités :');
console.log(' - Curseur personnalisé');
console.log(' - Animations au scroll');
console.log(' - Barres de progression animées');
console.log(' - Effet parallaxe');
console.log(' - Formulaire interactif');
console.log(' - Design responsive');
</script>
</body>
</html>
Télécharger le fichier source