Bootstrap 5
Portfolio
Intro
Hero
Template
Snippet
Responsive
Html Css
Developpeur
Variante
Couleurs
Landing Page
Variante intro portfolio Bootstrap 5 avec hero section redesignée, palette de couleurs alternative et mise en page dynamique pour profil développeur 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 Intro Portfolio Boostrap5 2026 051301 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Outfit:wght@300;500&display=swap" rel="stylesheet">
<!-- Icons & Animations -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
:root {
--primary: #ffffff;
--accent: #ff3e00; /* Orange vibrant pour le contraste */
--bg: #0a0a0a;
--card-bg: #161616;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg);
color: var(--primary);
overflow-x: hidden;
cursor: none; /* On cache le curseur pour le remplacer */
}
h1, h2, .syne { font-family: 'Syne', sans-serif; text-transform: uppercase; }
/* Custom Cursor */
#cursor {
width: 20px; height: 20px;
background: var(--accent);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.1s ease;
}
/* Navbar Glassmorphism */
.navbar {
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
}
/* Hero avec Texte Géant */
.hero {
height: 100vh;
display: flex;
align-items: center;
position: relative;
}
.hero-title {
font-size: clamp(3rem, 10vw, 8rem);
line-height: 0.9;
font-weight: 800;
letter-spacing: -2px;
}
.outline-text {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.3);
}
/* Project Cards Améliorées */
.work-item {
position: relative;
border-radius: 24px;
overflow: hidden;
margin-bottom: 40px;
aspect-ratio: 16/10;
}
.work-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
filter: grayscale(40%);
background: #222;
}
.work-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 40px;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
opacity: 0;
transition: opacity 0.4s;
}
.work-item:hover .work-img { transform: scale(1.08); filter: grayscale(0%); }
.work-item:hover .work-overlay { opacity: 1; }
/* Stats Section */
.stat-box {
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
transition: background 0.3s;
}
.stat-box:hover { background: var(--card-bg); }
/* Button Custom */
.btn-custom {
border: 1px solid var(--primary);
color: var(--primary);
border-radius: 100px;
padding: 15px 40px;
text-transform: uppercase;
font-weight: 700;
transition: all 0.3s;
}
.btn-custom:hover {
background: var(--primary);
color: var(--bg);
}
@media (max-width: 768px) {
body { cursor: auto; }
#cursor { display: none; }
}
</style>
</head>
<body>
<div id="cursor"></div>
<!-- Nav -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand fw-bold text-white fs-3" href="#">STUDIO<span style="color:var(--accent)">.</span></a>
<div class="ms-auto d-none d-lg-block">
<a href="#contact" class="btn btn-custom btn-sm">Parlons de votre projet</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="container">
<div data-aos="fade-right">
<span class="text-uppercase tracking-widest mb-3 d-block" style="letter-spacing: 5px;">Web Designer & Creative Developer</span>
<h1 class="hero-title">DESIGN<br><span class="outline-text">BEYOND</span><br>LIMITS</h1>
</div>
</div>
</section>
<!-- Projects Grid -->
<section class="py-5" id="work">
<div class="container">
<div class="row g-4">
<div class="col-md-7" data-aos="zoom-in-up">
<div class="work-item">
<div class="work-img d-flex align-items-center justify-content-center h-100">Projet Alpha</div>
<div class="work-overlay">
<h3>Branding Électronique</h3>
<p>Visual Design / 2026</p>
</div>
</div>
</div>
<div class="col-md-5" data-aos="zoom-in-up" data-aos-delay="200">
<div class="work-item">
<div class="work-img d-flex align-items-center justify-content-center h-100">Projet Beta</div>
<div class="work-overlay">
<h3>Architecture UI</h3>
<p>Web App / 2026</p>
</div>
</div>
</div>
<div class="col-md-5" data-aos="zoom-in-up">
<div class="work-item">
<div class="work-img d-flex align-items-center justify-content-center h-100">Projet Gamma</div>
<div class="work-overlay">
<h3>Minimal Concept</h3>
<p>Art Direction</p>
</div>
</div>
</div>
<div class="col-md-7" data-aos="zoom-in-up" data-aos-delay="200">
<div class="work-item">
<div class="work-img d-flex align-items-center justify-content-center h-100">Projet Delta</div>
<div class="work-overlay">
<h3>Interface immersive</h3>
<p>Development</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5">
<div class="container">
<hr class="opacity-10 mb-5">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="syne display-3">Prêt à créer ?</h2>
<p class="text-secondary">Disponible pour des collaborations freelances partout dans le monde.</p>
</div>
<div class="col-md-6 text-md-end">
<a href="mailto:hello@designer.com" class="fs-1 syne text-white text-decoration-none">HELLO@DESIGNER.COM</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 1200 });
// Logic pour le curseur personnalisé
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// Effet d'agrandissement sur les éléments cliquables
document.querySelectorAll('a, .work-item').forEach(el => {
el.addEventListener('mouseenter', () => {
cursor.style.transform = 'scale(4)';
cursor.style.background = 'rgba(255, 62, 0, 0.3)';
});
el.addEventListener('mouseleave', () => {
cursor.style.transform = 'scale(1)';
cursor.style.background = 'var(--accent)';
});
});
</script>
</body>
</html>Télécharger le fichier source