stephane.liabeuf/cv-web-liabeuf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixing

Browse source
This commit is contained in:
Jooliwa Studio 2026-03-30 09:39:44 +02:00 committed by GitHub
parent e10bed37c6
commit a77059f138
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 879 additions and 889 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

224
index.html
View file

@ -1,40 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIABEUF_STÉPHANE // CV.EXE</title> <title>LIABEUF_STÉPHANE // CV.EXE</title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Primary: Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Fallback: Bunny Fonts (GDPR-friendly mirror) -->
<link href="https://fonts.bunny.net/css2?family=orbitron:wght@400;700;900&family=share-tech-mono&family=rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet">
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
–bg: #050810; --bg: #050810;
–bg2: #080d1a; --bg2: #080d1a;
–cyan: #00f5ff; --cyan: #00f5ff;
–magenta: #ff00aa; --magenta: #ff00aa;
–yellow: #ffe600; --yellow: #ffe600;
–green: #00ff88; --green: #00ff88;
–dark-cyan: #003d40; --dark-cyan: #003d40;
–text: #c8d8e8; --text: #c8d8e8;
–muted: #4a6080; --muted: #4a6080;
–grid: rgba(0,245,255,0.04); --grid: rgba(0,245,255,0.04);
} }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { body {
font-family: ‘Rajdhani’, sans-serif; font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
background: var(–bg); background: var(--bg);
color: var(–text); color: var(--text);
overflow-x: hidden; overflow-x: hidden;
cursor: crosshair; cursor: crosshair;
} }
/* ── SCANLINES overlay ── */ /* ── SCANLINES overlay ── */
body::before { body::before {
content: ‘’; content: '';
position: fixed; position: fixed;
inset: 0; inset: 0;
background: repeating-linear-gradient( background: repeating-linear-gradient(
@ -50,12 +54,12 @@ z-index: 9999;
/* ── GRID background ── */ /* ── GRID background ── */
body::after { body::after {
content: ‘’; content: '';
position: fixed; position: fixed;
inset: 0; inset: 0;
background-image: background-image:
linear-gradient(var(–grid) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(–grid) 1px, transparent 1px); linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 40px 40px; background-size: 40px 40px;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
@ -72,12 +76,12 @@ top: 0; left: 0;
width: 100%; height: 100%; width: 100%; height: 100%;
} }
.glitch::before { .glitch::before {
color: var(–magenta); color: var(--magenta);
animation: glitch1 3s infinite; animation: glitch1 3s infinite;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
} }
.glitch::after { .glitch::after {
color: var(–cyan); color: var(--cyan);
animation: glitch2 3s infinite; animation: glitch2 3s infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
} }
@ -120,9 +124,9 @@ z-index: 0;
.hero-corner { .hero-corner {
position: absolute; position: absolute;
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
color: var(–muted); color: var(--muted);
z-index: 2; z-index: 2;
} }
.hero-corner.tl { top: 32px; left: 80px; } .hero-corner.tl { top: 32px; left: 80px; }
@ -136,29 +140,29 @@ position: absolute;
width: 24px; height: 24px; width: 24px; height: 24px;
z-index: 2; z-index: 2;
} }
.corner-bracket.tl { top: 20px; left: 60px; border-top: 2px solid var(–cyan); border-left: 2px solid var(–cyan); } .corner-bracket.tl { top: 20px; left: 60px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.corner-bracket.tr { top: 20px; right: 60px; border-top: 2px solid var(–cyan); border-right: 2px solid var(–cyan); } .corner-bracket.tr { top: 20px; right: 60px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.corner-bracket.bl { bottom: 20px; left: 60px; border-bottom: 2px solid var(–cyan); border-left: 2px solid var(–cyan); } .corner-bracket.bl { bottom: 20px; left: 60px; border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.corner-bracket.br { bottom: 20px; right: 60px; border-bottom: 2px solid var(–cyan); border-right: 2px solid var(–cyan); } .corner-bracket.br { bottom: 20px; right: 60px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.hero-id { .hero-id {
position: relative; position: relative;
z-index: 2; z-index: 2;
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 12px; font-size: 12px;
color: var(–cyan); color: var(--cyan);
letter-spacing: 0.3em; letter-spacing: 0.3em;
margin-bottom: 20px; margin-bottom: 20px;
opacity: 0; opacity: 0;
animation: fadeIn 0.5s ease 0.3s forwards; animation: fadeIn 0.5s ease 0.3s forwards;
} }
.hero-id span { color: var(–magenta); } .hero-id span { color: var(--magenta); }
.hero-name { .hero-name {
position: relative; position: relative;
z-index: 2; z-index: 2;
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: clamp(48px, 8vw, 110px); font-size: clamp(48px, 8vw, 110px);
font-weight: 900; font-weight: 900;
line-height: 0.9; line-height: 0.9;
@ -172,7 +176,7 @@ animation: fadeIn 0.6s ease 0.5s forwards;
.hero-name .line2 { .hero-name .line2 {
display: block; display: block;
color: transparent; color: transparent;
-webkit-text-stroke: 1px var(–cyan); -webkit-text-stroke: 1px var(--cyan);
text-shadow: 0 0 30px rgba(0,245,255,0.4); text-shadow: 0 0 30px rgba(0,245,255,0.4);
} }
@ -180,15 +184,15 @@ text-shadow: 0 0 30px rgba(0,245,255,0.4);
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 24px; margin-top: 24px;
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 14px; font-size: 14px;
color: var(–magenta); color: var(--magenta);
letter-spacing: 0.2em; letter-spacing: 0.2em;
opacity: 0; opacity: 0;
animation: fadeIn 0.6s ease 0.7s forwards; animation: fadeIn 0.6s ease 0.7s forwards;
} }
.hero-subtitle::before { content: ’> ’; color: var(–green); } .hero-subtitle::before { content: '> '; color: var(--green); }
.hero-stats { .hero-stats {
position: relative; position: relative;
@ -209,29 +213,29 @@ clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0
} }
.stat-box::before { .stat-box::before {
content: ‘’; content: '';
position: absolute; position: absolute;
top: -1px; left: -1px; right: -1px; bottom: -1px; top: -1px; left: -1px; right: -1px; bottom: -1px;
background: linear-gradient(135deg, var(–cyan), transparent 50%); background: linear-gradient(135deg, var(--cyan), transparent 50%);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
z-index: -1; z-index: -1;
opacity: 0.3; opacity: 0.3;
} }
.stat-num { .stat-num {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 36px; font-size: 36px;
font-weight: 700; font-weight: 700;
color: var(–cyan); color: var(--cyan);
display: block; display: block;
text-shadow: 0 0 20px rgba(0,245,255,0.6); text-shadow: 0 0 20px rgba(0,245,255,0.6);
} }
.stat-label { .stat-label {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 10px; font-size: 10px;
letter-spacing: 0.15em; letter-spacing: 0.15em;
color: var(–muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
} }
@ -241,10 +245,10 @@ bottom: 48px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2; z-index: 2;
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 10px; font-size: 10px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: var(–muted); color: var(--muted);
text-align: center; text-align: center;
animation: pulse 2s ease infinite; animation: pulse 2s ease infinite;
} }
@ -269,21 +273,21 @@ gap: 0;
} }
.nav-logo { .nav-logo {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: var(–cyan); color: var(--cyan);
letter-spacing: 0.2em; letter-spacing: 0.2em;
margin-right: auto; margin-right: auto;
text-shadow: 0 0 10px rgba(0,245,255,0.5); text-shadow: 0 0 10px rgba(0,245,255,0.5);
} }
nav a { nav a {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
color: var(–muted); color: var(--muted);
text-decoration: none; text-decoration: none;
padding: 18px 24px; padding: 18px 24px;
transition: color 0.2s; transition: color 0.2s;
@ -291,14 +295,14 @@ position: relative;
} }
nav a::before { nav a::before {
content: ‘//’; content: '//';
color: var(–magenta); color: var(--magenta);
margin-right: 6px; margin-right: 6px;
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
nav a:hover { color: var(–cyan); } nav a:hover { color: var(--cyan); }
nav a:hover::before { opacity: 1; } nav a:hover::before { opacity: 1; }
/* ── SECTIONS ── */ /* ── SECTIONS ── */
@ -318,15 +322,15 @@ margin-bottom: 64px;
} }
.section-id { .section-id {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
color: var(–magenta); color: var(--magenta);
letter-spacing: 0.3em; letter-spacing: 0.3em;
margin-bottom: 12px; margin-bottom: 12px;
} }
.section-title { .section-title {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: clamp(28px, 4vw, 48px); font-size: clamp(28px, 4vw, 48px);
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
@ -337,15 +341,15 @@ display: inline-block;
} }
.section-title::after { .section-title::after {
content: ‘’; content: '';
display: block; display: block;
margin-top: 12px; margin-top: 12px;
height: 2px; height: 2px;
background: linear-gradient(90deg, var(–cyan), var(–magenta), transparent); background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent);
} }
/* ── EXPERIENCE ── */ /* ── EXPERIENCE ── */
#experience { background: var(–bg); } #experience { background: var(--bg); }
.exp-list { display: grid; gap: 2px; } .exp-list { display: grid; gap: 2px; }
@ -362,7 +366,7 @@ position: relative;
.exp-item:last-child { border-bottom: 1px solid rgba(0,245,255,0.1); } .exp-item:last-child { border-bottom: 1px solid rgba(0,245,255,0.1); }
.exp-item::before { .exp-item::before {
content: ‘’; content: '';
position: absolute; position: absolute;
left: -80px; right: -80px; top: 0; bottom: 0; left: -80px; right: -80px; top: 0; bottom: 0;
background: rgba(0,245,255,0.02); background: rgba(0,245,255,0.02);
@ -378,23 +382,23 @@ padding-top: 4px;
} }
.exp-period { .exp-period {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
color: var(–cyan); color: var(--cyan);
letter-spacing: 0.1em; letter-spacing: 0.1em;
margin-bottom: 8px; margin-bottom: 8px;
} }
.exp-co { .exp-co {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 10px; font-size: 10px;
color: var(–muted); color: var(--muted);
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
} }
.exp-role { .exp-role {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
@ -405,9 +409,9 @@ line-height: 1.3;
} }
.exp-program { .exp-program {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
color: var(–magenta); color: var(--magenta);
letter-spacing: 0.1em; letter-spacing: 0.1em;
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -427,10 +431,10 @@ margin-top: 16px;
} }
.exp-tag { .exp-tag {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 10px; font-size: 10px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(–cyan); color: var(--cyan);
border: 1px solid rgba(0,245,255,0.3); border: 1px solid rgba(0,245,255,0.3);
padding: 3px 10px; padding: 3px 10px;
text-transform: uppercase; text-transform: uppercase;
@ -439,7 +443,7 @@ background: rgba(0,245,255,0.05);
} }
/* ── SKILLS ── */ /* ── SKILLS ── */
#competences { background: var(–bg2); } #competences { background: var(--bg2); }
.skills-grid { .skills-grid {
display: grid; display: grid;
@ -456,7 +460,7 @@ clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
} }
.skill-panel::before { .skill-panel::before {
content: ‘’; content: '';
position: absolute; position: absolute;
top: 0; right: 0; top: 0; right: 0;
width: 0; height: 0; width: 0; height: 0;
@ -465,10 +469,10 @@ border-left: 16px solid transparent;
} }
.skill-panel-title { .skill-panel-title {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
color: var(–magenta); color: var(--magenta);
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 24px; margin-bottom: 24px;
@ -487,17 +491,17 @@ margin-bottom: 6px;
} }
.skill-name { .skill-name {
font-family: ‘Rajdhani’, sans-serif; font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(–text); color: var(--text);
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.skill-meta { .skill-meta {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 10px; font-size: 10px;
color: var(–muted); color: var(--muted);
} }
.skill-bar { .skill-bar {
@ -510,23 +514,23 @@ overflow: visible;
.skill-fill { .skill-fill {
height: 100%; height: 100%;
width: 0; width: 0;
background: linear-gradient(90deg, var(–cyan), var(–green)); background: linear-gradient(90deg, var(--cyan), var(--green));
box-shadow: 0 0 8px var(–cyan); box-shadow: 0 0 8px var(--cyan);
transition: width 1.4s cubic-bezier(0.4,0,0.2,1); transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
position: relative; position: relative;
} }
.skill-fill::after { .skill-fill::after {
content: ‘’; content: '';
position: absolute; position: absolute;
right: -1px; top: -3px; right: -1px; top: -3px;
width: 2px; height: 9px; width: 2px; height: 9px;
background: #fff; background: #fff;
box-shadow: 0 0 6px var(–cyan); box-shadow: 0 0 6px var(--cyan);
} }
/* ── SECTORS ── */ /* ── SECTORS ── */
#secteurs { background: var(–bg); } #secteurs { background: var(--bg); }
.sectors-grid { .sectors-grid {
display: grid; display: grid;
@ -537,12 +541,12 @@ gap: 2px;
.sector-cell { .sector-cell {
border: 1px solid rgba(0,245,255,0.08); border: 1px solid rgba(0,245,255,0.08);
padding: 20px 24px; padding: 20px 24px;
font-family: ‘Rajdhani’, sans-serif; font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(–muted); color: var(--muted);
transition: all 0.2s; transition: all 0.2s;
cursor: default; cursor: default;
position: relative; position: relative;
@ -550,14 +554,14 @@ overflow: hidden;
} }
.sector-cell::before { .sector-cell::before {
content: ‘◈’; content: '◈';
margin-right: 10px; margin-right: 10px;
color: var(–magenta); color: var(--magenta);
font-size: 10px; font-size: 10px;
} }
.sector-cell::after { .sector-cell::after {
content: ‘’; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(0,245,255,0.07), transparent); background: linear-gradient(135deg, rgba(0,245,255,0.07), transparent);
@ -566,14 +570,14 @@ transition: opacity 0.25s;
} }
.sector-cell:hover { .sector-cell:hover {
color: var(–cyan); color: var(--cyan);
border-color: rgba(0,245,255,0.4); border-color: rgba(0,245,255,0.4);
} }
.sector-cell:hover::after { opacity: 1; } .sector-cell:hover::after { opacity: 1; }
/* ── FORMATION ── */ /* ── FORMATION ── */
#formation { background: var(–bg2); } #formation { background: var(--bg2); }
.edu-grid { .edu-grid {
display: grid; display: grid;
@ -591,7 +595,7 @@ clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
} }
.edu-card::before { .edu-card::before {
content: ‘’; content: '';
position: absolute; position: absolute;
top: 0; right: 0; top: 0; right: 0;
width: 0; height: 0; width: 0; height: 0;
@ -600,15 +604,15 @@ border-left: 20px solid transparent;
} }
.edu-year { .edu-year {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
color: var(–magenta); color: var(--magenta);
letter-spacing: 0.2em; letter-spacing: 0.2em;
margin-bottom: 12px; margin-bottom: 12px;
} }
.edu-degree { .edu-degree {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 17px; font-size: 17px;
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
@ -617,15 +621,15 @@ text-transform: uppercase;
} }
.edu-school { .edu-school {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 12px; font-size: 12px;
color: var(–muted); color: var(--muted);
} }
.certs-title { .certs-title {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 12px; font-size: 12px;
color: var(–cyan); color: var(--cyan);
letter-spacing: 0.2em; letter-spacing: 0.2em;
margin-bottom: 20px; margin-bottom: 20px;
text-transform: uppercase; text-transform: uppercase;
@ -638,10 +642,10 @@ gap: 10px;
} }
.cert-chip { .cert-chip {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(–green); color: var(--green);
border: 1px solid rgba(0,255,136,0.25); border: 1px solid rgba(0,255,136,0.25);
padding: 6px 14px; padding: 6px 14px;
background: rgba(0,255,136,0.04); background: rgba(0,255,136,0.04);
@ -652,7 +656,7 @@ text-transform: uppercase;
footer { footer {
position: relative; position: relative;
z-index: 1; z-index: 1;
background: var(–bg); background: var(--bg);
border-top: 1px solid rgba(0,245,255,0.15); border-top: 1px solid rgba(0,245,255,0.15);
padding: 48px 80px; padding: 48px 80px;
display: flex; display: flex;
@ -661,18 +665,18 @@ align-items: center;
} }
.footer-name { .footer-name {
font-family: ‘Orbitron’, monospace; font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
font-size: 20px; font-size: 20px;
font-weight: 900; font-weight: 900;
color: var(–cyan); color: var(--cyan);
text-shadow: 0 0 20px rgba(0,245,255,0.5); text-shadow: 0 0 20px rgba(0,245,255,0.5);
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
.footer-info { .footer-info {
font-family: ‘Share Tech Mono’, monospace; font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
font-size: 11px; font-size: 11px;
color: var(–muted); color: var(--muted);
text-align: right; text-align: right;
line-height: 1.8; line-height: 1.8;
} }
@ -681,12 +685,12 @@ line-height: 1.8;
.cursor-dot { .cursor-dot {
position: fixed; position: fixed;
width: 8px; height: 8px; width: 8px; height: 8px;
background: var(–cyan); background: var(--cyan);
border-radius: 50%; border-radius: 50%;
pointer-events: none; pointer-events: none;
z-index: 10000; z-index: 10000;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-shadow: 0 0 10px var(–cyan), 0 0 20px rgba(0,245,255,0.5); box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(0,245,255,0.5);
transition: transform 0.05s; transition: transform 0.05s;
} }
@ -720,14 +724,12 @@ nav { padding: 0 16px; }
nav a { padding: 14px 12px; font-size: 10px; } nav a { padding: 14px 12px; font-size: 10px; }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="cursor-dot" id="cursorDot"></div> <div class="cursor-dot" id="cursorDot"></div>
<!-- HERO --> <!-- HERO -->
<header class="hero"> <header class="hero">
<div class="hero-bg"></div> <div class="hero-bg"></div>
@ -773,7 +775,6 @@ nav a { padding: 14px 12px; font-size: 10px; }
</header> </header>
<!-- NAV --> <!-- NAV -->
<nav> <nav>
<span class="nav-logo">SL://CV</span> <span class="nav-logo">SL://CV</span>
<a href="#experience">Parcours</a> <a href="#experience">Parcours</a>
@ -783,7 +784,6 @@ nav a { padding: 14px 12px; font-size: 10px; }
</nav> </nav>
<!-- EXPERIENCE --> <!-- EXPERIENCE -->
<section id="experience"> <section id="experience">
<div class="section-header"> <div class="section-header">
<p class="section-id">// MODULE_01 :: EXPERIENCE.LOG</p> <p class="section-id">// MODULE_01 :: EXPERIENCE.LOG</p>
@ -792,7 +792,6 @@ nav a { padding: 14px 12px; font-size: 10px; }
<div class="exp-list"> <div class="exp-list">
```
<div class="exp-item"> <div class="exp-item">
<div class="exp-left"> <div class="exp-left">
<p class="exp-period">2021 → NOW</p> <p class="exp-period">2021 → NOW</p>
@ -928,13 +927,11 @@ nav a { padding: 14px 12px; font-size: 10px; }
<div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Plasturgie</span></div> <div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Plasturgie</span></div>
</div> </div>
</div> </div>
```
</div> </div>
</section> </section>
<!-- COMPETENCES --> <!-- COMPETENCES -->
<section id="competences"> <section id="competences">
<div class="section-header"> <div class="section-header">
<p class="section-id">// MODULE_02 :: SKILLS.DAT</p> <p class="section-id">// MODULE_02 :: SKILLS.DAT</p>
@ -970,7 +967,6 @@ nav a { padding: 14px 12px; font-size: 10px; }
</div> </div>
</div> </div>
```
<div class="skill-panel"> <div class="skill-panel">
<p class="skill-panel-title">// Technologies IT</p> <p class="skill-panel-title">// Technologies IT</p>
<div class="skill-row" data-level="75"> <div class="skill-row" data-level="75">
@ -1014,13 +1010,10 @@ nav a { padding: 14px 12px; font-size: 10px; }
<div class="skill-bar"><div class="skill-fill"></div></div> <div class="skill-bar"><div class="skill-fill"></div></div>
</div> </div>
</div> </div>
```
</div> </div>
</section> </section>
<!-- SECTEURS --> <!-- SECTEURS -->
<section id="secteurs"> <section id="secteurs">
<div class="section-header"> <div class="section-header">
<p class="section-id">// MODULE_03 :: SECTORS.MAP</p> <p class="section-id">// MODULE_03 :: SECTORS.MAP</p>
@ -1044,7 +1037,6 @@ nav a { padding: 14px 12px; font-size: 10px; }
</section> </section>
<!-- FORMATION --> <!-- FORMATION -->
<section id="formation"> <section id="formation">
<div class="section-header"> <div class="section-header">
<p class="section-id">// MODULE_04 :: EDUCATION.SYS</p> <p class="section-id">// MODULE_04 :: EDUCATION.SYS</p>
@ -1076,7 +1068,6 @@ nav a { padding: 14px 12px; font-size: 10px; }
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<div class="footer-name">LIABEUF_STÉPHANE</div> <div class="footer-name">LIABEUF_STÉPHANE</div>
<div class="footer-info"> <div class="footer-info">
@ -1124,6 +1115,5 @@ nav a { padding: 14px 12px; font-size: 10px; }
}, 18); }, 18);
}, 400); }, 400);
</script> </script>
</body> </body>
</html> </html>