feat: add Infrastructure SI button in hero with theme-aware styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
LIABEUF, Stephane (External) 2026-05-18 02:13:07 +02:00
parent 4118c9937a
commit 8f45b413f1

View file

@ -2386,6 +2386,66 @@
animation: fadeIn .6s ease .7s forwards animation: fadeIn .6s ease .7s forwards
} }
.infra-btn {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
transition: all .25s ease;
}
[data-theme="cyberpunk"] .infra-btn {
font-family: 'Share Tech Mono', monospace;
color: #00f5ff;
border: 1px solid rgba(0,245,255,.35);
background: rgba(0,245,255,.06);
box-shadow: 0 0 20px rgba(0,245,255,.12);
}
[data-theme="cyberpunk"] .infra-btn:hover {
background: rgba(0,245,255,.14);
border-color: #00f5ff;
transform: translateY(-2px);
}
[data-theme="bd"] .infra-btn {
font-family: 'Comic Neue', cursive;
color: #1a1a1a;
background: #FFE033;
border: 3px solid #1a1a1a;
box-shadow: 4px 4px 0 #1a1a1a;
}
[data-theme="bd"] .infra-btn:hover {
transform: translate(-2px,-2px);
box-shadow: 6px 6px 0 #1a1a1a;
}
[data-theme="itpro"] .infra-btn {
font-family: 'Inter', sans-serif;
color: #1a56db;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 30px;
}
[data-theme="itpro"] .infra-btn:hover {
background: #1a56db;
color: #fff;
}
[data-theme="cgi"] .infra-btn {
font-family: Arial, sans-serif;
color: #5236AB;
background: #fff;
border: 1px solid rgba(82,54,171,.3);
border-left: 4px solid #5236AB;
}
[data-theme="cgi"] .infra-btn:hover {
background: #5236AB;
color: #fff;
}
.hero-stats { .hero-stats {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -3012,6 +3072,7 @@
${esc(id.nom)}<span class="hero-name-line2">${esc(id.prenom)}</span> ${esc(id.nom)}<span class="hero-name-line2">${esc(id.prenom)}</span>
</h1> </h1>
<p class="hero-subtitle">${esc(id.accroche)}</p> <p class="hero-subtitle">${esc(id.accroche)}</p>
<div style="margin-top:20px;display:inline-block"><a href="infrastructure.html" target="_blank" class="infra-btn">⚡ Voir mon infrastructure</a></div>
<div class="hero-stats"> <div class="hero-stats">
${d.stats.map(s => ` ${d.stats.map(s => `
<div class="stat-box"> <div class="stat-box">