Bootstrap
Bootstrap5
Portfolio
Html
Css
Template de portfolio Bootstrap 5 avec design élégant et moderne.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio Développeur Bootstrap 5 | AngularForAll</title>
<!-- Bootstrap 5 + Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- AOS Animation CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
}
h1, h2, h3, h4, h5 {
font-weight: 700;
}
.code-font {
font-family: 'Fira Code', monospace;
}
/* Navbar */
.navbar {
padding: 1.2rem 0;
background: rgba(15, 23, 42, 0.95) !important;
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: #64ffda !important;
}
.navbar-brand span {
color: #e2e8f0;
font-weight: 400;
}
.nav-link {
font-weight: 500;
color: #cbd5e1 !important;
margin: 0 0.5rem;
transition: color 0.2s;
}
.nav-link:hover {
color: #64ffda !important;
}
.btn-outline-accent {
border: 1.5px solid #64ffda;
color: #64ffda;
border-radius: 8px;
padding: 0.5rem 1.5rem;
font-weight: 600;
background: transparent;
transition: all 0.2s;
}
.btn-outline-accent:hover {
background: rgba(100, 255, 218, 0.1);
color: #64ffda;
}
.btn-primary-custom {
background: transparent;
color: #64ffda;
border: 1.5px solid #64ffda;
border-radius: 8px;
padding: 0.7rem 2rem;
font-weight: 600;
transition: all 0.2s;
}
.btn-primary-custom:hover {
background: rgba(100, 255, 218, 0.1);
}
/* Hero Section */
.hero-section {
padding: 6rem 0 5rem;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(100, 255, 218, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.greeting {
color: #64ffda;
font-family: 'Fira Code', monospace;
font-size: 1rem;
margin-bottom: 1rem;
}
.hero-title {
font-weight: 800;
font-size: 3.8rem;
color: #f1f5f9;
line-height: 1.1;
}
.hero-title span {
color: #64ffda;
}
.hero-subtitle {
font-size: 1.4rem;
color: #94a3b8;
font-weight: 400;
}
.hero-description {
color: #94a3b8;
max-width: 550px;
font-size: 1.1rem;
}
.tech-badge {
background: rgba(100, 255, 218, 0.1);
color: #64ffda;
padding: 0.3rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.avatar-wrapper {
position: relative;
display: inline-block;
}
.avatar-img {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
border: 3px solid #64ffda;
box-shadow: 0 0 40px rgba(100, 255, 218, 0.2);
max-width: 380px;
width: 100%;
}
/* Section Title */
.section-title {
font-weight: 700;
font-size: 2.2rem;
color: #f1f5f9;
margin-bottom: 0.5rem;
}
.section-title span {
color: #64ffda;
}
.section-subtitle {
color: #64ffda;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.divider {
width: 70px;
height: 3px;
background: #64ffda;
margin: 1rem 0 2rem;
}
/* About */
.about-text {
color: #94a3b8;
font-size: 1.1rem;
}
.skill-item {
background: rgba(30, 41, 59, 0.6);
border-radius: 12px;
padding: 1.2rem;
border: 1px solid rgba(100, 255, 218, 0.1);
backdrop-filter: blur(5px);
transition: all 0.2s;
height: 100%;
}
.skill-item:hover {
border-color: #64ffda;
transform: translateY(-3px);
}
.skill-icon {
font-size: 2rem;
color: #64ffda;
margin-bottom: 1rem;
}
/* Project Cards */
.project-card {
background: rgba(30, 41, 59, 0.6);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(100, 255, 218, 0.1);
backdrop-filter: blur(5px);
transition: all 0.3s;
height: 100%;
}
.project-card:hover {
transform: translateY(-8px);
border-color: #64ffda;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.project-img {
height: 200px;
overflow: hidden;
background: #1e293b;
}
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.project-card:hover .project-img img {
transform: scale(1.05);
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.project-tag {
background: rgba(100, 255, 218, 0.1);
color: #64ffda;
padding: 0.2rem 0.8rem;
border-radius: 15px;
font-size: 0.75rem;
font-family: 'Fira Code', monospace;
}
.project-links a {
color: #cbd5e1;
margin-right: 15px;
font-size: 1.2rem;
transition: color 0.2s;
}
.project-links a:hover {
color: #64ffda;
}
/* Experience Timeline */
.timeline-item {
background: rgba(30, 41, 59, 0.5);
border-radius: 16px;
padding: 1.8rem;
border-left: 4px solid #64ffda;
backdrop-filter: blur(5px);
margin-bottom: 1.5rem;
transition: all 0.2s;
}
.timeline-item:hover {
background: rgba(30, 41, 59, 0.7);
}
.timeline-date {
color: #64ffda;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
/* Stats */
.stat-card {
text-align: center;
padding: 2rem 1rem;
}
.stat-number {
font-size: 3rem;
font-weight: 800;
color: #64ffda;
font-family: 'Fira Code', monospace;
}
/* Contact */
.contact-card {
background: rgba(30, 41, 59, 0.5);
border-radius: 24px;
padding: 2.5rem;
backdrop-filter: blur(5px);
border: 1px solid rgba(100, 255, 218, 0.15);
}
.contact-icon {
width: 55px;
height: 55px;
background: rgba(100, 255, 218, 0.1);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #64ffda;
font-size: 1.5rem;
}
.contact-input {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(100, 255, 218, 0.2);
color: #e2e8f0;
border-radius: 12px;
padding: 0.9rem 1.2rem;
}
.contact-input:focus {
background: rgba(15, 23, 42, 0.8);
border-color: #64ffda;
color: white;
box-shadow: none;
}
.contact-input::placeholder {
color: #64748b;
}
.btn-submit {
background: transparent;
border: 1.5px solid #64ffda;
color: #64ffda;
border-radius: 12px;
padding: 0.9rem 2rem;
font-weight: 600;
width: 100%;
transition: all 0.2s;
}
.btn-submit:hover {
background: rgba(100, 255, 218, 0.1);
}
/* Footer */
footer {
border-top: 1px solid rgba(100, 255, 218, 0.1);
padding: 2rem 0;
margin-top: 3rem;
}
.social-link {
color: #94a3b8;
font-size: 1.3rem;
margin: 0 10px;
transition: color 0.2s;
}
.social-link:hover {
color: #64ffda;
}
/* Responsive */
@media (max-width: 992px) {
.hero-title {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.section-title {
font-size: 1.8rem;
}
.avatar-img {
max-width: 300px;
margin-top: 2rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}
}
/* Animation */
.glow-text {
text-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}
</style>
</head>
<body>
<!-- ==================== NAVBAR ==================== -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-code-slash me-2"></i>Thomas<span>.dev</span>
</a>
<button class="navbar-toggler border-0" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="filter: invert(0.7);"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projets</a></li>
<li class="nav-item"><a class="nav-link" href="#experience">Expérience</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<a href="#" class="btn btn-outline-accent">CV <i class="bi bi-download ms-1"></i></a>
</div>
</div>
</nav>
<!-- ==================== HERO ==================== -->
<section class="hero-section">
<div class="container position-relative">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="greeting" data-aos="fade-up" data-aos-duration="800">
<i class="bi bi-terminal me-2"></i>Bonjour, je suis
</div>
<h1 class="hero-title" data-aos="fade-up" data-aos-delay="100">
Thomas <span>Dubois</span>
</h1>
<h2 class="hero-subtitle mb-3" data-aos="fade-up" data-aos-delay="200">
Développeur Full Stack
</h2>
<p class="hero-description mb-4" data-aos="fade-up" data-aos-delay="300">
Je conçois et développe des applications web performantes,
avec une passion pour les architectures propres et l'expérience utilisateur.
</p>
<div class="d-flex flex-wrap gap-3 mb-4" data-aos="fade-up" data-aos-delay="400">
<span class="tech-badge"><i class="bi bi-braces me-1"></i>React</span>
<span class="tech-badge"><i class="bi bi-braces me-1"></i>Node.js</span>
<span class="tech-badge"><i class="bi bi-braces me-1"></i>TypeScript</span>
<span class="tech-badge"><i class="bi bi-braces me-1"></i>Python</span>
<span class="tech-badge"><i class="bi bi-braces me-1"></i>AWS</span>
</div>
<div class="d-flex gap-3" data-aos="fade-up" data-aos-delay="500">
<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-accent"><i class="bi bi-chat-dots me-2"></i>Me contacter</a>
</div>
</div>
<div class="col-lg-5 text-center text-lg-end" data-aos="zoom-in" data-aos-delay="200">
<div class="avatar-wrapper">
<img src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Thomas Dubois" class="avatar-img img-fluid"
onerror="this.src='https://placehold.co/400/1e293b/64ffda?text=Thomas+D.'">
</div>
</div>
</div>
</div>
</section>
<!-- ==================== À PROPOS ==================== -->
<section id="about" class="container py-5">
<div data-aos="fade-up">
<div class="section-subtitle"><i class="bi bi-person-circle me-2"></i>Qui suis-je ?</div>
<h2 class="section-title"><span>À propos</span> de moi</h2>
<div class="divider"></div>
</div>
<div class="row g-4 align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<p class="about-text mb-4">
Développeur Full Stack avec <span style="color:#64ffda;">6 ans d'expérience</span>,
j'ai travaillé sur des projets variés allant de startups innovantes à des solutions
d'entreprise complexes. Spécialisé en <span style="color:#64ffda;">React, Node.js et architectures cloud</span>,
je m'efforce de créer des applications robustes, scalables et agréables à utiliser.
</p>
<p class="about-text">
Mon approche combine rigueur technique et créativité. Je suis constamment en veille
sur les nouvelles technologies pour proposer des solutions modernes et efficaces.
</p>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="row g-3">
<div class="col-6">
<div class="skill-item">
<i class="bi bi-window-stack skill-icon"></i>
<h5 class="fw-bold">Frontend</h5>
<p class="small text-secondary mb-0">React, Vue, Next.js, Tailwind</p>
</div>
</div>
<div class="col-6">
<div class="skill-item">
<i class="bi bi-server skill-icon"></i>
<h5 class="fw-bold">Backend</h5>
<p class="small text-secondary mb-0">Node.js, Python, Go, GraphQL</p>
</div>
</div>
<div class="col-6">
<div class="skill-item">
<i class="bi bi-database skill-icon"></i>
<h5 class="fw-bold">Base de données</h5>
<p class="small text-secondary mb-0">PostgreSQL, MongoDB, Redis</p>
</div>
</div>
<div class="col-6">
<div class="skill-item">
<i class="bi bi-cloud skill-icon"></i>
<h5 class="fw-bold">DevOps</h5>
<p class="small text-secondary mb-0">Docker, AWS, CI/CD, Vercel</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== STATS ==================== -->
<section class="container py-4">
<div class="row g-4">
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="0">
<div class="stat-card">
<div class="stat-number">6+</div>
<p class="text-secondary mb-0">Années d'expérience</p>
</div>
</div>
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="100">
<div class="stat-card">
<div class="stat-number">30+</div>
<p class="text-secondary mb-0">Projets réalisés</p>
</div>
</div>
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="200">
<div class="stat-card">
<div class="stat-number">15+</div>
<p class="text-secondary mb-0">Clients satisfaits</p>
</div>
</div>
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="300">
<div class="stat-card">
<div class="stat-number">∞</div>
<p class="text-secondary mb-0">Cafés bus</p>
</div>
</div>
</div>
</section>
<!-- ==================== PROJETS ==================== -->
<section id="projects" class="container py-5">
<div data-aos="fade-up">
<div class="section-subtitle"><i class="bi bi-code-square me-2"></i>Portfolio</div>
<h2 class="section-title"><span>Projets</span> récents</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<!-- Projet 1 -->
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<div class="project-card">
<div class="project-img">
<img src="https://placehold.co/600x400/1e293b/64ffda?text=EcoTrack"
alt="EcoTrack" onerror="this.src='https://placehold.co/600x400/1e293b/64ffda?text=EcoTrack'">
</div>
<div class="p-4">
<h5 class="fw-bold mb-2">EcoTrack</h5>
<p class="small text-secondary mb-3">Plateforme de suivi carbone pour entreprises</p>
<div class="project-tags mb-3">
<span class="project-tag">React</span>
<span class="project-tag">Node.js</span>
<span class="project-tag">D3.js</span>
<span class="project-tag">PostgreSQL</span>
</div>
<p class="small text-secondary mb-3">Dashboard analytique avec visualisation de données en temps réel et exports PDF.</p>
<div class="project-links">
<a href="#" aria-label="GitHub"><i class="bi bi-github"></i></a>
<a href="#" aria-label="Live Demo"><i class="bi bi-box-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
<!-- Projet 2 -->
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="project-card">
<div class="project-img">
<img src="https://placehold.co/600x400/1e293b/64ffda?text=TaskFlow"
alt="TaskFlow" onerror="this.src='https://placehold.co/600x400/1e293b/64ffda?text=TaskFlow'">
</div>
<div class="p-4">
<h5 class="fw-bold mb-2">TaskFlow</h5>
<p class="small text-secondary mb-3">Application de gestion de projet collaborative</p>
<div class="project-tags mb-3">
<span class="project-tag">Next.js</span>
<span class="project-tag">TypeScript</span>
<span class="project-tag">Prisma</span>
<span class="project-tag">WebSocket</span>
</div>
<p class="small text-secondary mb-3">Tableaux Kanban, messagerie intégrée et synchronisation en temps réel.</p>
<div class="project-links">
<a href="#" aria-label="GitHub"><i class="bi bi-github"></i></a>
<a href="#" aria-label="Live Demo"><i class="bi bi-box-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
<!-- Projet 3 -->
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="project-card">
<div class="project-img">
<img src="https://placehold.co/600x400/1e293b/64ffda?text=Portfolio+3.0"
alt="Portfolio v3" onerror="this.src='https://placehold.co/600x400/1e293b/64ffda?text=Portfolio+v3'">
</div>
<div class="p-4">
<h5 class="fw-bold mb-2">Portfolio v3</h5>
<p class="small text-secondary mb-3">Site portfolio personnel</p>
<div class="project-tags mb-3">
<span class="project-tag">Bootstrap 5</span>
<span class="project-tag">Sass</span>
<span class="project-tag">AOS</span>
<span class="project-tag">Vite</span>
</div>
<p class="small text-secondary mb-3">Design moderne avec animations fluides et optimisation SEO.</p>
<div class="project-links">
<a href="#" aria-label="GitHub"><i class="bi bi-github"></i></a>
<a href="#" aria-label="Live Demo"><i class="bi bi-box-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<a href="#" class="btn btn-outline-accent"><i class="bi bi-github me-2"></i>Voir plus sur GitHub</a>
</div>
</section>
<!-- ==================== EXPÉRIENCE ==================== -->
<section id="experience" class="container py-5">
<div data-aos="fade-up">
<div class="section-subtitle"><i class="bi bi-briefcase me-2"></i>Parcours</div>
<h2 class="section-title"><span>Expérience</span> professionnelle</h2>
<div class="divider"></div>
</div>
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-date">2024 - Présent</div>
<h5 class="fw-bold">Lead Developer · TechCorp</h5>
<p class="text-secondary mb-2">Paris · Full-time</p>
<p class="small text-secondary">Direction technique d'une équipe de 5 développeurs. Mise en place d'une architecture microservices, optimisation des performances et mentoring.</p>
<div class="mt-2">
<span class="tech-badge me-1">React</span>
<span class="tech-badge me-1">Node.js</span>
<span class="tech-badge me-1">Kubernetes</span>
</div>
</div>
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-date">2021 - 2024</div>
<h5 class="fw-bold">Développeur Full Stack · WebAgency</h5>
<p class="text-secondary mb-2">Lyon · Full-time</p>
<p class="small text-secondary">Développement d'applications web sur mesure pour des clients grands comptes. Création d'API RESTful, intégration de solutions de paiement et dashboards.</p>
<div class="mt-2">
<span class="tech-badge me-1">Vue.js</span>
<span class="tech-badge me-1">Laravel</span>
<span class="tech-badge me-1">MySQL</span>
</div>
</div>
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-date">2019 - 2021</div>
<h5 class="fw-bold">Développeur Frontend · StartupFlow</h5>
<p class="text-secondary mb-2">Remote · Freelance</p>
<p class="small text-secondary">Création d'interfaces utilisateur responsives et accessibles. Collaboration étroite avec les designers pour implémenter des composants réutilisables.</p>
<div class="mt-2">
<span class="tech-badge me-1">React</span>
<span class="tech-badge me-1">Redux</span>
<span class="tech-badge me-1">Tailwind</span>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== CONTACT ==================== -->
<section id="contact" class="container py-5">
<div data-aos="fade-up">
<div class="section-subtitle"><i class="bi bi-envelope-paper me-2"></i>Travaillons ensemble</div>
<h2 class="section-title"><span>Contactez</span>-moi</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-lg-5" data-aos="fade-right">
<div class="contact-card h-100">
<h4 class="fw-bold mb-4">Discutons de votre projet</h4>
<p class="text-secondary mb-4">Que vous ayez une idée précise ou simplement une envie d'échanger, je suis à votre écoute.</p>
<div class="d-flex align-items-center mb-4">
<div class="contact-icon me-3">
<i class="bi bi-envelope"></i>
</div>
<div>
<small class="text-secondary">Email</small>
<p class="mb-0 fw-medium">thomas.dubois@devfolio.fr</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="contact-icon me-3">
<i class="bi bi-telephone"></i>
</div>
<div>
<small class="text-secondary">Téléphone</small>
<p class="mb-0 fw-medium">+33 6 12 34 56 78</p>
</div>
</div>
<div class="d-flex align-items-center">
<div class="contact-icon me-3">
<i class="bi bi-geo-alt"></i>
</div>
<div>
<small class="text-secondary">Localisation</small>
<p class="mb-0 fw-medium">Paris / Lyon · Remote</p>
</div>
</div>
<hr class="opacity-25 my-4">
<div class="d-flex gap-3">
<a href="#" class="social-link" aria-label="GitHub"><i class="bi bi-github"></i></a>
<a href="#" class="social-link" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
<a href="#" class="social-link" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="social-link" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
</div>
</div>
</div>
<div class="col-lg-7" data-aos="fade-left">
<div class="contact-card">
<form>
<div class="row g-3">
<div class="col-md-6">
<input type="text" class="form-control contact-input" placeholder="Nom complet">
</div>
<div class="col-md-6">
<input type="email" class="form-control contact-input" placeholder="Email">
</div>
<div class="col-12">
<input type="text" class="form-control contact-input" placeholder="Sujet">
</div>
<div class="col-12">
<textarea class="form-control contact-input" rows="5" placeholder="Votre message..."></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn-submit">
<i class="bi bi-send me-2"></i>Envoyer le message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="mb-3 mb-md-0">
<span class="code-font" style="color:#64ffda;">© 2026 Thomas Dubois</span>
<span class="text-secondary ms-3">· Développeur Full Stack</span>
</div>
<div>
<a href="#" class="text-secondary text-decoration-none me-4 small">Mentions légales</a>
<a href="#" class="text-secondary text-decoration-none small">Crédits</a>
</div>
</div>
<div class="text-center mt-4">
<small class="text-secondary">Design & développement avec <i class="bi bi-heart-fill" style="color:#64ffda;"></i> · Bootstrap 5 · AOS</small>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 800,
once: true
});
</script>
</body>
</html>