dc1bfc6ae9
This commit adds a complete HTML structure for a personal CV webpage, including sections for experience, skills, sectors, education, and a footer.
859 lines
22 KiB
HTML
859 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Stéphane Liabeuf — CV</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
–ink: #0e0e10;
|
||
–paper: #f5f2ec;
|
||
–accent: #c8532a;
|
||
–accent2: #e8a87c;
|
||
–muted: #7a7269;
|
||
–line: #d9d4cb;
|
||
–card: #ffffff;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: ‘DM Sans’, sans-serif;
|
||
background: var(–paper);
|
||
color: var(–ink);
|
||
font-size: 15px;
|
||
line-height: 1.65;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── HERO ── */
|
||
.hero {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-left {
|
||
background: var(–ink);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 80px 64px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-left::after {
|
||
content: ‘’;
|
||
position: absolute;
|
||
right: -60px;
|
||
top: 0; bottom: 0;
|
||
width: 120px;
|
||
background: var(–ink);
|
||
clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%);
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-right {
|
||
background: var(–paper);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
padding: 80px 80px 80px 120px;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-right::before {
|
||
content: ‘SL’;
|
||
position: absolute;
|
||
top: -20px;
|
||
right: 40px;
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 280px;
|
||
font-weight: 300;
|
||
color: var(–line);
|
||
line-height: 1;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(–accent);
|
||
border: 1px solid var(–accent);
|
||
padding: 4px 12px;
|
||
margin-bottom: 32px;
|
||
opacity: 0;
|
||
animation: fadeUp 0.6s ease 0.1s forwards;
|
||
}
|
||
|
||
.hero-name {
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: clamp(52px, 6vw, 84px);
|
||
font-weight: 300;
|
||
color: #ffffff;
|
||
line-height: 1.05;
|
||
opacity: 0;
|
||
animation: fadeUp 0.7s ease 0.2s forwards;
|
||
}
|
||
|
||
.hero-name em {
|
||
font-style: italic;
|
||
color: var(–accent2);
|
||
}
|
||
|
||
.hero-title {
|
||
margin-top: 24px;
|
||
font-size: 13px;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(–muted);
|
||
color: #9e9689;
|
||
opacity: 0;
|
||
animation: fadeUp 0.7s ease 0.35s forwards;
|
||
}
|
||
|
||
.hero-summary {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 420px;
|
||
opacity: 0;
|
||
animation: fadeUp 0.8s ease 0.5s forwards;
|
||
}
|
||
|
||
.hero-summary p {
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 20px;
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
color: var(–ink);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-meta {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin-top: 40px;
|
||
display: flex;
|
||
gap: 40px;
|
||
opacity: 0;
|
||
animation: fadeUp 0.8s ease 0.65s forwards;
|
||
}
|
||
|
||
.meta-item strong {
|
||
display: block;
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
color: var(–accent);
|
||
line-height: 1;
|
||
}
|
||
|
||
.meta-item span {
|
||
font-size: 11px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(–muted);
|
||
}
|
||
|
||
/* ── NAV ── */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(14,14,16,0.95);
|
||
backdrop-filter: blur(12px);
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
|
||
nav a {
|
||
font-size: 11px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: #9e9689;
|
||
text-decoration: none;
|
||
padding: 16px 28px;
|
||
transition: color 0.25s;
|
||
position: relative;
|
||
}
|
||
|
||
nav a::after {
|
||
content: ‘’;
|
||
position: absolute;
|
||
bottom: 0; left: 28px; right: 28px;
|
||
height: 2px;
|
||
background: var(–accent);
|
||
transform: scaleX(0);
|
||
transition: transform 0.25s;
|
||
}
|
||
|
||
nav a:hover { color: #fff; }
|
||
nav a:hover::after { transform: scaleX(1); }
|
||
|
||
/* ── SECTIONS ── */
|
||
section {
|
||
padding: 100px 0;
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.7s ease, transform 0.7s ease;
|
||
}
|
||
|
||
section.visible { opacity: 1; transform: none; }
|
||
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 48px;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 11px;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: var(–accent);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: clamp(36px, 4vw, 52px);
|
||
font-weight: 300;
|
||
line-height: 1.1;
|
||
margin-bottom: 56px;
|
||
position: relative;
|
||
padding-bottom: 24px;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: ‘’;
|
||
position: absolute;
|
||
bottom: 0; left: 0;
|
||
width: 48px; height: 2px;
|
||
background: var(–accent);
|
||
}
|
||
|
||
/* ── EXPERIENCE ── */
|
||
#experience { background: var(–paper); }
|
||
|
||
.exp-grid {
|
||
display: grid;
|
||
gap: 2px;
|
||
}
|
||
|
||
.exp-item {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
gap: 0;
|
||
border-top: 1px solid var(–line);
|
||
padding: 32px 0;
|
||
transition: background 0.25s;
|
||
}
|
||
|
||
.exp-item:last-child { border-bottom: 1px solid var(–line); }
|
||
|
||
.exp-date {
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
color: var(–muted);
|
||
padding-top: 4px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
.exp-company {
|
||
font-size: 11px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(–accent);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.exp-role {
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 24px;
|
||
font-weight: 400;
|
||
margin-bottom: 12px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.exp-sub {
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(–muted);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.exp-body {
|
||
font-size: 14px;
|
||
color: #4a4640;
|
||
line-height: 1.7;
|
||
max-width: 620px;
|
||
}
|
||
|
||
.exp-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.exp-tag {
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
background: #f0ede7;
|
||
color: #7a7269;
|
||
padding: 4px 10px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* ── SKILLS ── */
|
||
#competences { background: var(–ink); color: #fff; }
|
||
#competences .section-title { color: #fff; }
|
||
|
||
.skills-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 32px;
|
||
}
|
||
|
||
.skill-group h3 {
|
||
font-size: 11px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(–accent2);
|
||
margin-bottom: 24px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
|
||
.skill-row {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.skill-name {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 13px;
|
||
margin-bottom: 6px;
|
||
color: #ccc9c2;
|
||
}
|
||
|
||
.skill-years {
|
||
font-size: 11px;
|
||
color: var(–muted);
|
||
}
|
||
|
||
.skill-bar {
|
||
height: 2px;
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 1px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.skill-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(–accent), var(–accent2));
|
||
border-radius: 1px;
|
||
width: 0;
|
||
transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
|
||
/* ── SECTORS ── */
|
||
#secteurs { background: #f9f6f0; }
|
||
|
||
.sectors-wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.sector-pill {
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
padding: 10px 24px;
|
||
border: 1px solid var(–line);
|
||
border-radius: 40px;
|
||
color: var(–ink);
|
||
transition: all 0.25s;
|
||
cursor: default;
|
||
}
|
||
|
||
.sector-pill:hover {
|
||
background: var(–accent);
|
||
border-color: var(–accent);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* ── FORMATION ── */
|
||
#formation { background: var(–paper); }
|
||
|
||
.edu-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.edu-card {
|
||
background: var(–card);
|
||
padding: 36px;
|
||
border-left: 3px solid var(–accent);
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.04);
|
||
}
|
||
|
||
.edu-year {
|
||
font-size: 11px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(–muted);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.edu-degree {
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.edu-school {
|
||
font-size: 13px;
|
||
color: var(–muted);
|
||
}
|
||
|
||
/* ── CERTIFICATIONS ── */
|
||
.certs-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 48px;
|
||
}
|
||
|
||
.cert-chip {
|
||
background: var(–ink);
|
||
color: #ccc9c2;
|
||
font-size: 12px;
|
||
letter-spacing: 0.06em;
|
||
padding: 8px 18px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
background: var(–ink);
|
||
color: #9e9689;
|
||
text-align: center;
|
||
padding: 40px;
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
footer strong {
|
||
color: var(–accent2);
|
||
font-family: ‘Cormorant Garamond’, serif;
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ── ANIMATIONS ── */
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width: 768px) {
|
||
.hero { grid-template-columns: 1fr; min-height: auto; }
|
||
.hero-left { padding: 60px 32px; }
|
||
.hero-left::after { display: none; }
|
||
.hero-right { padding: 48px 32px; }
|
||
.hero-right::before { display: none; }
|
||
.hero-meta { flex-wrap: wrap; gap: 24px; }
|
||
.exp-item { grid-template-columns: 1fr; }
|
||
.exp-date { margin-bottom: 8px; }
|
||
.skills-grid { grid-template-columns: 1fr; }
|
||
.edu-grid { grid-template-columns: 1fr; }
|
||
.container { padding: 0 24px; }
|
||
nav { flex-wrap: wrap; gap: 0; }
|
||
nav a { padding: 12px 16px; }
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HERO -->
|
||
|
||
<header class="hero">
|
||
<div class="hero-left">
|
||
<span class="tag">Directeur Conseil · CGI</span>
|
||
<h1 class="hero-name">Stéphane<br><em>Liabeuf</em></h1>
|
||
<p class="hero-title">UX & Digital Manager · Expert Digital & E-Commerce</p>
|
||
</div>
|
||
<div class="hero-right">
|
||
<div class="hero-summary">
|
||
<p>Plus de 20 ans d'expérience dans le digital, le e-commerce et l'IT — gérer des projets innovants et ambitieux avec créativité et ténacité.</p>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<div class="meta-item">
|
||
<strong>20+</strong>
|
||
<span>Ans d'expérience</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>40</strong>
|
||
<span>Squads pilotées</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>39</strong>
|
||
<span>Pays couverts</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- NAV -->
|
||
|
||
<nav>
|
||
<a href="#experience">Parcours</a>
|
||
<a href="#competences">Compétences</a>
|
||
<a href="#secteurs">Secteurs</a>
|
||
<a href="#formation">Formation</a>
|
||
</nav>
|
||
|
||
<!-- EXPERIENCE -->
|
||
|
||
<section id="experience">
|
||
<div class="container">
|
||
<p class="section-label">Parcours professionnel</p>
|
||
<h2 class="section-title">Expériences</h2>
|
||
|
||
```
|
||
<div class="exp-grid">
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2021 → Aujourd'hui</div>
|
||
<div>
|
||
<p class="exp-company">CGI</p>
|
||
<h3 class="exp-role">Directeur Conseil<br>UX & Digital Manager</h3>
|
||
<p class="exp-body">Développement de l'offre UX/UI sur le marché de Clermont-Ferrand. Accompagnement du déploiement UX/UI au sein des business units Michelin, mise en œuvre de KPIs spécifiques pour évaluer la progression et améliorer l'expérience utilisateur.</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">UX/UI</span>
|
||
<span class="exp-tag">KPIs</span>
|
||
<span class="exp-tag">Michelin</span>
|
||
<span class="exp-tag">Business development</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2019 → 2021</div>
|
||
<div>
|
||
<p class="exp-company">CGI · Michelin</p>
|
||
<h3 class="exp-role">Delivery Manager</h3>
|
||
<p class="exp-sub">Programme Engage — Salesforce</p>
|
||
<p class="exp-body">Garantir l'intégration complète des outils et services Michelin dans la plateforme Salesforce. Maîtrise de la planification dans un environnement complexe de ~40 squads réparties sur 3 pays (USA, France, Maroc) en mode agile distribué.</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">Salesforce</span>
|
||
<span class="exp-tag">Agile distribué</span>
|
||
<span class="exp-tag">40 squads</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2017 → 2019</div>
|
||
<div>
|
||
<p class="exp-company">CGI · Michelin</p>
|
||
<h3 class="exp-role">Directeur Projet</h3>
|
||
<p class="exp-sub">Projet BI Europe — Programme Engage</p>
|
||
<p class="exp-body">Développement d'un outil BI Europe pour les 2 000 commerciaux Michelin dans 39 pays et 25 langues. Pilotage des ventes et commandes jusqu'au niveau SKU, intégré dans la CRM Salesforce dans le cadre du programme de transformation customer-centric.</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">Business Intelligence</span>
|
||
<span class="exp-tag">2000 utilisateurs</span>
|
||
<span class="exp-tag">39 pays</span>
|
||
<span class="exp-tag">Salesforce</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2016 → 2017</div>
|
||
<div>
|
||
<p class="exp-company">Le Temps des Travaux</p>
|
||
<h3 class="exp-role">Directeur Associé E-Commerce & CTO</h3>
|
||
<p class="exp-body">Élaboration du SI, stratégie de marque et refonte complète du site E-Commerce (CA de 450 k€ dès la 1ère année). Définition et déploiement de la stratégie webmarketing de conquête et fidélisation. Gestion hébergement et sécurité serveur dédié.</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">E-Commerce</span>
|
||
<span class="exp-tag">CTO</span>
|
||
<span class="exp-tag">Webmarketing</span>
|
||
<span class="exp-tag">450 k€ CA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2013 → 2016</div>
|
||
<div>
|
||
<p class="exp-company">Trismégiste International</p>
|
||
<h3 class="exp-role">Directeur E-Commerce</h3>
|
||
<p class="exp-sub">vetality.fr</p>
|
||
<p class="exp-body">Création du pôle E-Commerce de zéro : positionnement de marque, recrutement, SI, logistique. CA de 900 k€ dès la 1ère année (objectif 1 M€), rentabilité atteinte au 15e mois (objectif 24 mois).</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">Création ex-nihilo</span>
|
||
<span class="exp-tag">900 k€ CA</span>
|
||
<span class="exp-tag">Retail</span>
|
||
<span class="exp-tag">Logistique</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2010 → 2013</div>
|
||
<div>
|
||
<p class="exp-company">Indépendant</p>
|
||
<h3 class="exp-role">Consultant Digital & UX Designer</h3>
|
||
<p class="exp-body">Conseil en stratégie digitale, audit & préconisation, webmarketing, social media acquisition, conception digitale et développement.</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">Conseil</span>
|
||
<span class="exp-tag">UX Design</span>
|
||
<span class="exp-tag">Social Media</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2005 → 2010</div>
|
||
<div>
|
||
<p class="exp-company">Sescoi International (Hexagon)</p>
|
||
<h3 class="exp-role">Resp. Produit ERP · Innovation & Industrialisation</h3>
|
||
<p class="exp-body">Responsable produit ERP et pilotage de l'innovation et de l'industrialisation au sein d'un éditeur logiciel international.</p>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">ERP</span>
|
||
<span class="exp-tag">Product Management</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">2001 → 2005</div>
|
||
<div>
|
||
<p class="exp-company">Sescoi International (Hexagon)</p>
|
||
<h3 class="exp-role">Resp. Développement Scheduling & Business Analyste ERP Europe</h3>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">ERP</span>
|
||
<span class="exp-tag">Business Analysis</span>
|
||
<span class="exp-tag">Europe</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exp-item">
|
||
<div class="exp-date">1999 → 2001</div>
|
||
<div>
|
||
<p class="exp-company">Moul'Anjou Plastique</p>
|
||
<h3 class="exp-role">Responsable Projet ERP · Injection Plastique</h3>
|
||
<div class="exp-tags">
|
||
<span class="exp-tag">ERP</span>
|
||
<span class="exp-tag">Plasturgie</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
```
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPETENCES -->
|
||
|
||
<section id="competences">
|
||
<div class="container">
|
||
<p class="section-label" style="color: var(--accent2)">Savoir-faire</p>
|
||
<h2 class="section-title">Compétences</h2>
|
||
|
||
```
|
||
<div class="skills-grid">
|
||
<div class="skill-group">
|
||
<h3>Compétences techniques</h3>
|
||
<div class="skill-row" data-level="100" data-years="19 ans">
|
||
<div class="skill-name"><span>Gestion de projet</span><span class="skill-years">19 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="75" data-years="15 ans">
|
||
<div class="skill-name"><span>Méthodologies Agiles</span><span class="skill-years">15 ans · Très élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="100" data-years="5 ans">
|
||
<div class="skill-name"><span>Scheduling</span><span class="skill-years">5 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="75" data-years="15 ans">
|
||
<div class="skill-name"><span>UX / UI</span><span class="skill-years">15 ans · Très élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="100" data-years="6 ans">
|
||
<div class="skill-name"><span>CMS E-Commerce</span><span class="skill-years">6 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="50" data-years="8 ans">
|
||
<div class="skill-name"><span>Dev. Html/CSS/PHP/JS</span><span class="skill-years">8 ans · Élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h3>Technologies de l'information</h3>
|
||
<div class="skill-row" data-level="75" data-years="10 ans">
|
||
<div class="skill-name"><span>ERP</span><span class="skill-years">10 ans · Très élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="100" data-years="4 ans">
|
||
<div class="skill-name"><span>E-Commerce</span><span class="skill-years">4 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="100" data-years="6 ans">
|
||
<div class="skill-name"><span>Marketing Digital</span><span class="skill-years">6 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="50" data-years="2 ans">
|
||
<div class="skill-name"><span>Business Intelligence</span><span class="skill-years">2 ans · Élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h3>Management & stratégie</h3>
|
||
<div class="skill-row" data-level="100" data-years="19 ans">
|
||
<div class="skill-name"><span>Pilotage de projets</span><span class="skill-years">19 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="100" data-years="19 ans">
|
||
<div class="skill-name"><span>Gestion des risques</span><span class="skill-years">19 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="100" data-years="10 ans">
|
||
<div class="skill-name"><span>Veille technologique</span><span class="skill-years">10 ans · Expert</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="75" data-years="7 ans">
|
||
<div class="skill-name"><span>Web Marketing</span><span class="skill-years">7 ans · Très élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
<div class="skill-row" data-level="75" data-years="5 ans">
|
||
<div class="skill-name"><span>Stratégie commerciale</span><span class="skill-years">5 ans · Très élevé</span></div>
|
||
<div class="skill-bar"><div class="skill-fill"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTEURS -->
|
||
|
||
<section id="secteurs">
|
||
<div class="container">
|
||
<p class="section-label">Domaines</p>
|
||
<h2 class="section-title">Secteurs & Spécialisations</h2>
|
||
<div class="sectors-wrap">
|
||
<span class="sector-pill">User Experience</span>
|
||
<span class="sector-pill">Marketing digital</span>
|
||
<span class="sector-pill">Innovation logicielle</span>
|
||
<span class="sector-pill">E-Commerce</span>
|
||
<span class="sector-pill">Retail</span>
|
||
<span class="sector-pill">Automobile</span>
|
||
<span class="sector-pill">Manufacturing</span>
|
||
<span class="sector-pill">Plasturgie</span>
|
||
<span class="sector-pill">Éditeur logiciel ERP</span>
|
||
<span class="sector-pill">Qualité logicielle</span>
|
||
<span class="sector-pill">Design Thinking</span>
|
||
<span class="sector-pill">Agile & PMI</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FORMATION -->
|
||
|
||
<section id="formation">
|
||
<div class="container">
|
||
<p class="section-label">Parcours académique</p>
|
||
<h2 class="section-title">Formation</h2>
|
||
|
||
```
|
||
<div class="edu-grid">
|
||
<div class="edu-card">
|
||
<p class="edu-year">1999</p>
|
||
<h3 class="edu-degree">Diplôme d'Ingénieur</h3>
|
||
<p class="edu-school">ENISE — École Nationale d'Ingénieurs de Saint-Étienne</p>
|
||
</div>
|
||
<div class="edu-card">
|
||
<p class="edu-year">1994</p>
|
||
<h3 class="edu-degree">BAC E</h3>
|
||
<p class="edu-school">Clermont-Ferrand</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="certs-grid">
|
||
<span class="cert-chip">CMMI</span>
|
||
<span class="cert-chip">HP Quality Center</span>
|
||
<span class="cert-chip">HP Functional Testing & BPT</span>
|
||
<span class="cert-chip">MS Project</span>
|
||
<span class="cert-chip">JIRA · Confluence</span>
|
||
<span class="cert-chip">Prestashop · Magento</span>
|
||
</div>
|
||
```
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
|
||
<footer>
|
||
<strong>Stéphane Liabeuf</strong>
|
||
Directeur Conseil · UX & Digital Manager · CGI — Clermont-Ferrand
|
||
</footer>
|
||
|
||
<script>
|
||
// Intersection Observer for section animations
|
||
const sections = document.querySelectorAll('section');
|
||
const obs = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('visible');
|
||
// Animate skill bars when skills section becomes visible
|
||
if (e.target.id === 'competences') {
|
||
setTimeout(() => {
|
||
document.querySelectorAll('.skill-row').forEach(row => {
|
||
const fill = row.querySelector('.skill-fill');
|
||
fill.style.width = row.dataset.level + '%';
|
||
});
|
||
}, 200);
|
||
}
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
sections.forEach(s => obs.observe(s));
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|