Html Css Js
Portfolio
Glassmorphism
Dark Theme
Minimaliste
No Framework
Template
Animations
Css Custom
Snippet
Elegant
Modern Design
Template portfolio HTML CSS JS pur avec glassmorphism, fond sombre, accents bleus et design minimaliste élégant. Zéro dépendance, ultra-léger.
<!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 Shema HTML CSS 2026 05110800 | AngularForAll</title>
<style>
/* ========== VARIABLES & RESET ========== */
:root {
--bg: #050505;
--accent: #0070f3;
--text-main: #ffffff;
--text-sec: #a1a1a1;
--glass: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.08);
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: none; /* Cache le curseur par défaut pour le curseur custom */
}
body {
background-color: var(--bg);
color: var(--text-main);
font-family: var(--font);
overflow-x: hidden;
line-height: 1.6;
}
/* ========== CUSTOM CURSOR ========== */
#cursor {
position: fixed;
width: 20px;
height: 20px;
background: var(--accent);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
mix-blend-mode: difference;
transition: transform 0.1s ease-out;
}
#cursor-blur {
position: fixed;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(0, 112, 243, 0.15) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
transform: translate(-50%, -50%);
}
/* ========== NAVIGATION ========== */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 30px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
backdrop-filter: blur(10px);
}
.logo {
font-weight: 800;
font-size: 1.5rem;
letter-spacing: -1px;
}
.nav-links {
display: flex;
gap: 40px;
}
.nav-links a {
color: var(--text-sec);
text-decoration: none;
font-size: 0.9rem;
transition: 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-links a:hover {
color: var(--text-main);
}
/* ========== HERO SECTION ========== */
section {
padding: 100px 10%;
min-height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero h1 {
font-size: clamp(3rem, 10vw, 8rem);
font-weight: 900;
line-height: 0.9;
margin-bottom: 20px;
letter-spacing: -4px;
}
.hero h1 span {
color: var(--accent);
}
.hero p {
font-size: 1.2rem;
color: var(--text-sec);
max-width: 600px;
margin-bottom: 40px;
}
/* ========== BENTO GRID PROJECTS ========== */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 200px;
gap: 20px;
margin-top: 50px;
}
.grid-item {
background: var(--glass);
border: 1px solid var(--border);
border-radius: 30px;
padding: 30px;
transition: 0.5s cubic-bezier(0.2, 1, 0.3, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.grid-item:hover {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-10px);
}
.grid-item h3 { font-size: 1.5rem; margin-bottom: 10px; }
.grid-item p { color: var(--text-sec); font-size: 0.9rem; }
/* Bento Layout Spans */
.span-8 { grid-column: span 8; }
.span-4 { grid-column: span 4; }
.row-2 { grid-row: span 2; }
/* ========== ANIMATIONS ON SCROLL ========== */
.reveal {
opacity: 0;
transform: translateY(50px);
transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* ========== CONTACT SECTION ========== */
.contact {
text-align: center;
align-items: center;
}
.contact h2 {
font-size: 4rem;
margin-bottom: 30px;
}
.email-btn {
padding: 20px 50px;
background: var(--accent);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
display: inline-block;
}
.email-btn:hover {
box-shadow: 0 0 30px rgba(0, 112, 243, 0.5);
transform: scale(1.05);
}
/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
.grid-item { grid-column: span 12 !important; grid-row: span 1 !important; }
nav { padding: 20px; }
.nav-links { display: none; } /* On cache pour simplifier ici */
#cursor { display: none; } /* Désactive sur mobile */
* { cursor: auto; }
}
</style>
</head>
<body>
<!-- Custom Cursor -->
<div id="cursor"></div>
<div id="cursor-blur"></div>
<!-- Navigation -->
<nav>
<div class="logo">MNX.DEV</div>
<div class="nav-links">
<a href="#work">Travaux</a>
<a href="#about">À propos</a>
<a href="#contact">Contact</a>
</div>
</nav>
<!-- Section Hero -->
<section class="hero">
<h1 class="reveal">DESIGNING<br>THE <span>FUTURE</span></h1>
<p class="reveal">Creative Developer & Digital Architect spécialisé dans la création d'expériences web immersives et ultra-rapides.</p>
<div class="reveal">
<a href="#work" class="email-btn">Découvrir mes projets</a>
</div>
</section>
<!-- Section Portfolio (Bento Grid) -->
<section id="work">
<h2 class="reveal">SÉLECTION DE PROJETS</h2>
<div class="grid">
<div class="grid-item span-8 row-2 reveal">
<h3>Nexus AI</h3>
<p>Interface futuriste pour plateforme SaaS de données.</p>
</div>
<div class="grid-item span-4 reveal">
<h3>Branding</h3>
<p>Identité visuelle moderne.</p>
</div>
<div class="grid-item span-4 reveal">
<h3>Mobile App</h3>
<p>Concept iOS pour la Fintech.</p>
</div>
<div class="grid-item span-4 row-2 reveal">
<h3>Cyber Security</h3>
<p>Dashboard de monitoring temps réel.</p>
</div>
<div class="grid-item span-8 reveal">
<h3>E-Commerce 3.0</h3>
<p>Expérience d'achat immersive.</p>
</div>
</div>
</section>
<!-- Section Contact -->
<section class="contact" id="contact">
<h2 class="reveal">Prêt à créer <br>quelque chose d'unique ?</h2>
<a href="mailto:hello@mnx.dev" class="email-btn reveal">Me contacter</a>
</section>
<script>
/* ========== CURSOR LOGIC ========== */
const cursor = document.getElementById('cursor');
const blur = document.getElementById('cursor-blur');
document.addEventListener('mousemove', (e) => {
// Positionnement fluide du curseur
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
// Positionnement du halo lumineux
blur.style.left = e.clientX + 'px';
blur.style.top = e.clientY + 'px';
});
// Effet d'agrandissement sur les liens
const links = document.querySelectorAll('a, .grid-item');
links.forEach(link => {
link.addEventListener('mouseenter', () => {
cursor.style.transform = 'scale(4)';
cursor.style.background = 'white';
});
link.addEventListener('mouseleave', () => {
cursor.style.transform = 'scale(1)';
cursor.style.background = '#0070f3';
});
});
/* ========== REVEAL ON SCROLL LOGIC ========== */
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
/* ========== SMOOTH SCROLL ========== */
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
Télécharger le fichier source