feat: add CGI theme + restore hero badge typing animation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
LIABEUF, Stephane (External)
parent
ae0f46160b
commit
49bde2b10b
1 changed files with 472 additions and 2 deletions
474
index.html
474
index.html
|
|
@ -382,6 +382,14 @@
|
|||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.theme-btn.btn-cgi {
|
||||
background: #E31937;
|
||||
color: #fff;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
/* burger par thème */
|
||||
[data-theme="cyberpunk"] .burger-btn { top: 24px; right: 64px; }
|
||||
|
|
@ -1821,6 +1829,453 @@
|
|||
color: #34d399
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
CGI
|
||||
════════════════════════════════════════ */
|
||||
[data-theme="cgi"] body {
|
||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||
background: #f4f4f4;
|
||||
color: #1a1a1a;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] body::before,
|
||||
[data-theme="cgi"] body::after { display: none }
|
||||
|
||||
[data-theme="cgi"] .cursor-dot { display: none }
|
||||
|
||||
[data-theme="cgi"] .hero {
|
||||
background: #1a1a1a;
|
||||
animation: none;
|
||||
min-height: 90vh;
|
||||
border-bottom: 4px solid #E31937;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .hero-bg {
|
||||
background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(227,25,55,.12) 0%, transparent 70%),
|
||||
linear-gradient(135deg, #1a1a1a 60%, #2a0a0f 100%);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .corner-bracket,
|
||||
[data-theme="cgi"] .hero-scroll { display: none }
|
||||
|
||||
[data-theme="cgi"] .hero-badge {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,.5);
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
background: rgba(227,25,55,.15);
|
||||
border: 1px solid rgba(227,25,55,.3);
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .hero-name {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.02em;
|
||||
line-height: .9;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .hero-name-line2 {
|
||||
color: #E31937;
|
||||
-webkit-text-stroke: 0;
|
||||
text-shadow: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .hero-subtitle {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,.55);
|
||||
letter-spacing: .05em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .hero-subtitle::before { display: none }
|
||||
|
||||
[data-theme="cgi"] .stat-box {
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(227,25,55,.3);
|
||||
border-top: 2px solid #E31937;
|
||||
border-radius: 0;
|
||||
clip-path: none;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .stat-num {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 800;
|
||||
color: #E31937;
|
||||
font-size: 36px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .stat-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: rgba(255,255,255,.4);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .14em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] nav {
|
||||
background: #fff;
|
||||
border-bottom: 3px solid #E31937;
|
||||
backdrop-filter: none;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .nav-logo {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 800;
|
||||
color: #E31937;
|
||||
font-size: 16px;
|
||||
text-shadow: none;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] nav a {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
text-transform: none;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] nav a::before { display: none }
|
||||
|
||||
[data-theme="cgi"] nav a:hover { color: #E31937 }
|
||||
|
||||
[data-theme="cgi"] #experience { background: #fff }
|
||||
[data-theme="cgi"] #competences { background: #f4f4f4 }
|
||||
[data-theme="cgi"] #secteurs { background: #fff }
|
||||
[data-theme="cgi"] #formation { background: #f4f4f4 }
|
||||
|
||||
[data-theme="cgi"] footer {
|
||||
background: #1a1a1a;
|
||||
border-top: 3px solid #E31937;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .section-id {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #E31937;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .section-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
text-transform: none;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .section-title::after {
|
||||
background: #E31937;
|
||||
height: 3px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .group-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .14em;
|
||||
color: #fff;
|
||||
background: #E31937;
|
||||
border-radius: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .group-label.sec {
|
||||
background: #A5ACB0;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-item {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-left: 3px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-item:hover {
|
||||
border-left-color: #E31937;
|
||||
background: #fff9f9;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-period {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #E31937;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-co {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-role {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
font-size: 15px;
|
||||
text-transform: none;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-program {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #991F3D;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-objective {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
border-left: 2px solid #E31937;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-objective strong { color: #E31937; font-style: normal }
|
||||
|
||||
[data-theme="cgi"] .exp-desc {
|
||||
color: #555;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-results {
|
||||
border: 1px solid rgba(242,162,0,.3);
|
||||
background: rgba(242,162,0,.04);
|
||||
clip-path: none;
|
||||
border-radius: 2px;
|
||||
border-left: 3px solid #F2A200;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-results-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #F2A200;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-results li {
|
||||
color: #444;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .exp-results li::before { content: '▸ '; color: #F2A200 }
|
||||
|
||||
[data-theme="cgi"] .tag {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #E31937;
|
||||
border: 1px solid rgba(227,25,55,.25);
|
||||
background: rgba(227,25,55,.05);
|
||||
border-radius: 2px;
|
||||
clip-path: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .tag.mag {
|
||||
color: #991F3D;
|
||||
border-color: rgba(153,31,61,.3);
|
||||
background: rgba(153,31,61,.05);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .tag.grn {
|
||||
color: #1a7a40;
|
||||
border-color: rgba(26,122,64,.3);
|
||||
background: rgba(26,122,64,.05);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-panel {
|
||||
border: 1px solid #e8e8e8;
|
||||
background: #fff;
|
||||
clip-path: none;
|
||||
border-radius: 2px;
|
||||
border-top: 3px solid #E31937;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.06);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-panel::before { display: none }
|
||||
|
||||
[data-theme="cgi"] .skill-cat {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #E31937;
|
||||
letter-spacing: .16em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-name {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-meta {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #A5ACB0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-bar {
|
||||
background: #ececec;
|
||||
border-radius: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-fill {
|
||||
background: linear-gradient(90deg, #E31937, #991F3D);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .skill-fill::after { display: none }
|
||||
|
||||
[data-theme="cgi"] .sector-cell {
|
||||
border: 1px solid #e8e8e8;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
color: #555;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .sector-cell::before { content: ''; display: none }
|
||||
|
||||
[data-theme="cgi"] .sector-cell:hover {
|
||||
color: #E31937;
|
||||
border-color: #E31937;
|
||||
background: rgba(227,25,55,.04);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .edu-card {
|
||||
border: 1px solid #e8e8e8;
|
||||
background: #fff;
|
||||
clip-path: none;
|
||||
border-radius: 2px;
|
||||
border-top: 3px solid #E31937;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.06);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .edu-card::before { display: none }
|
||||
|
||||
[data-theme="cgi"] .edu-year {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #A5ACB0;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .edu-degree {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
text-transform: none;
|
||||
font-size: 18px;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .edu-school {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .certs-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: .16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .cert-chip {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #E31937;
|
||||
border: 1px solid rgba(227,25,55,.25);
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .footer-name {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-shadow: none;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .footer-info {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: rgba(255,255,255,.45);
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .footer-status { color: #F2A200 }
|
||||
|
||||
[data-theme="cgi"] .contact-bar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .contact-link {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #E31937;
|
||||
border: 1px solid rgba(227,25,55,.25);
|
||||
background: rgba(227,25,55,.04);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .contact-link:hover {
|
||||
background: #E31937;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="cgi"] .burger-btn { top: 20px; right: 20px; }
|
||||
[data-theme="cgi"] .burger-btn span { background: #E31937 }
|
||||
[data-theme="cgi"] #theme-menu {
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-top: 3px solid #E31937;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ════ BASE LAYOUT ════ */
|
||||
.cursor-dot {
|
||||
position: fixed;
|
||||
|
|
@ -2431,6 +2886,7 @@
|
|||
<button class="theme-btn btn-cyberpunk" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
|
||||
<button class="theme-btn btn-bd" onclick="setTheme('bd')">💥 BANDE DESSINÉE</button>
|
||||
<button class="theme-btn btn-itpro" onclick="setTheme('itpro')">💼 IT PROFESSIONNEL</button>
|
||||
<button class="theme-btn btn-cgi" onclick="setTheme('cgi')">◆ CGI</button>
|
||||
</div>
|
||||
|
||||
<!-- Contenu injecté dynamiquement -->
|
||||
|
|
@ -2542,7 +2998,7 @@
|
|||
<div class="hero-bg"></div>
|
||||
<div class="corner-bracket tl"></div><div class="corner-bracket tr"></div>
|
||||
<div class="corner-bracket bl"></div><div class="corner-bracket br"></div>
|
||||
<span class="hero-badge">Bienvenue sur le CV en ligne de</span>
|
||||
<span class="hero-badge" id="heroBadge">Bienvenue sur le CV en ligne de</span>
|
||||
<h1 class="hero-name">
|
||||
${esc(id.nom)}<span class="hero-name-line2">${esc(id.prenom)}</span>
|
||||
</h1>
|
||||
|
|
@ -2724,7 +3180,7 @@
|
|||
|
||||
// Restaurer le thème sauvegardé
|
||||
const saved = localStorage.getItem('cv-theme');
|
||||
if (saved) setTheme(saved);
|
||||
if (saved && ['cyberpunk','bd','itpro','cgi'].includes(saved)) setTheme(saved);
|
||||
|
||||
// Scroll reveal — fix: sections already in viewport au chargement
|
||||
document.querySelectorAll('section').forEach(s => {
|
||||
|
|
@ -2749,6 +3205,20 @@
|
|||
}, { threshold: 0.08 });
|
||||
document.querySelectorAll('section').forEach(s => obs.observe(s));
|
||||
|
||||
// Typing effect hero badge
|
||||
const badge = document.getElementById('heroBadge');
|
||||
if (badge) {
|
||||
const txt = badge.textContent;
|
||||
badge.textContent = '';
|
||||
let i = 0;
|
||||
setTimeout(() => {
|
||||
const t = setInterval(() => {
|
||||
badge.textContent = txt.slice(0, i++);
|
||||
if (i > txt.length) clearInterval(t);
|
||||
}, 40);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Cacher le loading
|
||||
const ld = document.getElementById('loading');
|
||||
ld.style.opacity = '0';
|
||||
|
|
|
|||
Loading…
Reference in a new issue