From 98cd7b919046fce738f588f33b4001bf848d9eb6 Mon Sep 17 00:00:00 2001 From: "LIABEUF, Stephane (External)" Date: Sun, 17 May 2026 22:31:01 +0200 Subject: [PATCH] feat: redesign CGI theme with official branding (purple #5236AB, Cornerstone gradient) Co-Authored-By: Claude Sonnet 4.6 --- cv-data.json | 2 +- index.html | 333 ++++++++++++++++++++++++++------------------------- 2 files changed, 171 insertions(+), 164 deletions(-) diff --git a/cv-data.json b/cv-data.json index 1e253db..aa61809 100644 --- a/cv-data.json +++ b/cv-data.json @@ -7,7 +7,7 @@ "localisation": "Clermont-Ferrand", "accroche": "UX & Digital Manager // Product Manager // E-Commerce Architect // Data Leader", "description": "Fort de 25 ans d'expérience dans l'édition de logiciels, l'e-commerce et les systèmes d'information, Stéphane accompagne la transformation IT des entreprises en alliant vision stratégique, innovation et excellence opérationnelle.", - "disponibilite": "AVAILABLE — CV NOV. 2025", + "disponibilite": "Disponible en Septembre 2026", "contact": { "email": "", "telephone": "", diff --git a/index.html b/index.html index b2f6f72..36476db 100644 --- a/index.html +++ b/index.html @@ -383,9 +383,9 @@ font-weight: 600; } .theme-btn.btn-cgi { - background: #E31937; + background: linear-gradient(to right, #E31937 0%, #A82465 55%, #5236AB 100%); color: #fff; - font-family: 'Inter', 'Segoe UI', sans-serif; + font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; @@ -1830,12 +1830,15 @@ } /* ════════════════════════════════════════ - CGI + CGI — Branding officiel 2024 + Couleurs : Purple #5236AB / Red #E31937 + Gradient Cornerstone : Red → Magenta → Purple + Police : Arial ════════════════════════════════════════ */ [data-theme="cgi"] body { - font-family: 'Inter', 'Segoe UI', Arial, sans-serif; - background: #f4f4f4; - color: #1a1a1a; + font-family: Arial, 'Helvetica Neue', sans-serif; + background: #EEEEEE; + color: #000000; overflow-x: hidden; } @@ -1845,234 +1848,239 @@ [data-theme="cgi"] .cursor-dot { display: none } [data-theme="cgi"] .hero { - background: #1a1a1a; + background: #200A58; animation: none; min-height: 90vh; - border-bottom: 4px solid #E31937; + border-bottom: 4px solid transparent; + border-image: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%) 1; } [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%); + background: radial-gradient(ellipse 55% 70% at 95% 50%, rgba(82,54,171,.25) 0%, transparent 65%), + radial-gradient(ellipse 35% 50% at 5% 80%, rgba(227,25,55,.15) 0%, transparent 60%); } [data-theme="cgi"] .corner-bracket, [data-theme="cgi"] .hero-scroll { display: none } [data-theme="cgi"] .hero-badge { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 11px; - font-weight: 600; - color: rgba(255,255,255,.5); - letter-spacing: .18em; + font-weight: 400; + color: rgba(255,255,255,.55); + letter-spacing: .12em; text-transform: uppercase; - background: rgba(227,25,55,.15); - border: 1px solid rgba(227,25,55,.3); + background: none; + border: none; display: inline-block; - padding: 4px 14px; - border-radius: 2px; + padding: 0; margin-bottom: 20px; } [data-theme="cgi"] .hero-name { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; color: #fff; - font-weight: 800; - letter-spacing: -.02em; + font-weight: 700; + letter-spacing: -.01em; line-height: .9; } [data-theme="cgi"] .hero-name-line2 { - color: #E31937; + background: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; -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-family: Arial, sans-serif; + font-size: 14px; + color: rgba(255,255,255,.5); + letter-spacing: .03em; 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; + background: rgba(255,255,255,.05); + border: none; + border-top: 3px solid transparent; + border-image: linear-gradient(to right, #E31937, #5236AB) 1; 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-family: Arial, sans-serif; + font-weight: 700; + background: linear-gradient(to right, #E31937, #5236AB); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; font-size: 36px; text-shadow: none; } [data-theme="cgi"] .stat-label { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; color: rgba(255,255,255,.4); font-size: 10px; - font-weight: 500; - letter-spacing: .14em; + font-weight: 400; + letter-spacing: .1em; } [data-theme="cgi"] nav { background: #fff; - border-bottom: 3px solid #E31937; + border-bottom: none; + border-image: none; + box-shadow: 0 2px 0 0 #5236AB, 0 3px 8px rgba(0,0,0,.08); 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; + font-family: Arial, sans-serif; + font-weight: 700; + color: #5236AB; + font-size: 15px; text-shadow: none; - letter-spacing: .02em; + letter-spacing: .03em; } [data-theme="cgi"] nav a { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 12px; - font-weight: 500; - color: #555; + font-weight: 400; + color: #333333; text-transform: none; - letter-spacing: .02em; + letter-spacing: .01em; } [data-theme="cgi"] nav a::before { display: none } - - [data-theme="cgi"] nav a:hover { color: #E31937 } + [data-theme="cgi"] nav a:hover { color: #5236AB } [data-theme="cgi"] #experience { background: #fff } - [data-theme="cgi"] #competences { background: #f4f4f4 } + [data-theme="cgi"] #competences { background: #EEEEEE } [data-theme="cgi"] #secteurs { background: #fff } - [data-theme="cgi"] #formation { background: #f4f4f4 } + [data-theme="cgi"] #formation { background: #EEEEEE } [data-theme="cgi"] footer { - background: #1a1a1a; - border-top: 3px solid #E31937; + background: #200A58; + border-top: 4px solid transparent; + border-image: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%) 1; } [data-theme="cgi"] .section-id { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; color: #E31937; - letter-spacing: .18em; + letter-spacing: .16em; text-transform: uppercase; - opacity: .9; } [data-theme="cgi"] .section-title { - font-family: 'Inter', sans-serif; - font-weight: 800; - color: #1a1a1a; + font-family: Arial, sans-serif; + font-weight: 700; + color: #000000; text-transform: none; - letter-spacing: -.01em; + font-size: clamp(24px, 3.5vw, 42px); } [data-theme="cgi"] .section-title::after { - background: #E31937; + background: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%); height: 3px; - width: 48px; + width: 100%; } [data-theme="cgi"] .group-label { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; - letter-spacing: .14em; + letter-spacing: .12em; color: #fff; - background: #E31937; + background: #5236AB; border-radius: 0; text-transform: uppercase; } [data-theme="cgi"] .group-label.sec { - background: #A5ACB0; + background: #777777; } [data-theme="cgi"] .exp-item { - border-top: 1px solid #e8e8e8; + border-top: 1px solid #CCCCCC; border-left: 3px solid transparent; background: transparent; } [data-theme="cgi"] .exp-item:hover { - border-left-color: #E31937; - background: #fff9f9; + border-left-color: #5236AB; + background: rgba(82,54,171,.03); } [data-theme="cgi"] .exp-period { - font-family: 'Inter', sans-serif; - color: #E31937; + font-family: Arial, sans-serif; + color: #5236AB; font-size: 11px; - font-weight: 600; + font-weight: 700; letter-spacing: .06em; } [data-theme="cgi"] .exp-co { - font-family: 'Inter', sans-serif; - color: #888; + font-family: Arial, sans-serif; + color: #777777; font-size: 11px; - font-weight: 500; + font-weight: 400; text-transform: none; } [data-theme="cgi"] .exp-role { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-weight: 700; - color: #1a1a1a; + color: #000000; font-size: 15px; text-transform: none; - letter-spacing: -.01em; } [data-theme="cgi"] .exp-program { - font-family: 'Inter', sans-serif; - color: #991F3D; + font-family: Arial, sans-serif; + color: #A82465; font-size: 11px; - font-weight: 600; + font-weight: 700; letter-spacing: .06em; } [data-theme="cgi"] .exp-objective { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 13px; - color: #555; - border-left: 2px solid #E31937; + color: #555555; + border-left: 2px solid #5236AB; font-style: italic; } - [data-theme="cgi"] .exp-objective strong { color: #E31937; font-style: normal } + [data-theme="cgi"] .exp-objective strong { color: #5236AB; font-style: normal } [data-theme="cgi"] .exp-desc { - color: #555; - font-family: 'Inter', sans-serif; + color: #333333; + font-family: Arial, sans-serif; font-size: 14px; } [data-theme="cgi"] .exp-results { - border: 1px solid rgba(242,162,0,.3); - background: rgba(242,162,0,.04); + border: none; + border-left: 3px solid #5236AB; + background: rgba(82,54,171,.04); clip-path: none; - border-radius: 2px; - border-left: 3px solid #F2A200; + border-radius: 0; } [data-theme="cgi"] .exp-results-title { - font-family: 'Inter', sans-serif; - color: #F2A200; + font-family: Arial, sans-serif; + color: #5236AB; font-size: 10px; font-weight: 700; letter-spacing: .14em; @@ -2080,79 +2088,79 @@ } [data-theme="cgi"] .exp-results li { - color: #444; - font-family: 'Inter', sans-serif; + color: #333333; + font-family: Arial, sans-serif; font-size: 13px; } - [data-theme="cgi"] .exp-results li::before { content: '▸ '; color: #F2A200 } + [data-theme="cgi"] .exp-results li::before { content: '▸ '; color: #5236AB } [data-theme="cgi"] .tag { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 11px; - font-weight: 500; - color: #E31937; - border: 1px solid rgba(227,25,55,.25); - background: rgba(227,25,55,.05); + font-weight: 400; + color: #5236AB; + border: 1px solid rgba(82,54,171,.3); + background: rgba(82,54,171,.06); 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); + color: #A82465; + border-color: rgba(168,36,101,.3); + background: rgba(168,36,101,.06); } [data-theme="cgi"] .tag.grn { - color: #1a7a40; - border-color: rgba(26,122,64,.3); - background: rgba(26,122,64,.05); + color: #128354; + border-color: rgba(18,131,84,.3); + background: rgba(18,131,84,.06); } [data-theme="cgi"] .skill-panel { - border: 1px solid #e8e8e8; + border: 1px solid #CCCCCC; background: #fff; clip-path: none; - border-radius: 2px; - border-top: 3px solid #E31937; + border-radius: 0; + border-top: 3px solid #5236AB; 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-family: Arial, sans-serif; font-size: 10px; font-weight: 700; - color: #E31937; - letter-spacing: .16em; + color: #5236AB; + letter-spacing: .14em; text-transform: uppercase; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid #EEEEEE; } [data-theme="cgi"] .skill-name { - font-family: 'Inter', sans-serif; - color: #1a1a1a; - font-weight: 500; + font-family: Arial, sans-serif; + color: #000000; + font-weight: 400; font-size: 13px; } [data-theme="cgi"] .skill-meta { - font-family: 'Inter', sans-serif; - color: #A5ACB0; + font-family: Arial, sans-serif; + color: #999999; font-size: 11px; } [data-theme="cgi"] .skill-bar { - background: #ececec; + background: #CCCCCC; border-radius: 0; height: 4px; } [data-theme="cgi"] .skill-fill { - background: linear-gradient(90deg, #E31937, #991F3D); + background: linear-gradient(90deg, #E31937 0%, #A82465 60%, #5236AB 100%); box-shadow: none; border-radius: 0; } @@ -2160,120 +2168,119 @@ [data-theme="cgi"] .skill-fill::after { display: none } [data-theme="cgi"] .sector-cell { - border: 1px solid #e8e8e8; + border: 1px solid #CCCCCC; background: #fff; - border-radius: 2px; - color: #555; - font-family: 'Inter', sans-serif; + border-radius: 0; + color: #333333; + font-family: Arial, sans-serif; font-size: 12px; - font-weight: 500; + font-weight: 400; 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); + color: #5236AB; + border-color: #5236AB; + background: rgba(82,54,171,.04); } [data-theme="cgi"] .edu-card { - border: 1px solid #e8e8e8; + border: 1px solid #CCCCCC; background: #fff; clip-path: none; - border-radius: 2px; - border-top: 3px solid #E31937; + border-radius: 0; + border-top: 3px solid transparent; + border-image: linear-gradient(to right, #E31937, #A82465, #5236AB) 1; 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-family: Arial, sans-serif; + color: #999999; font-size: 11px; - font-weight: 500; + font-weight: 400; letter-spacing: .1em; } [data-theme="cgi"] .edu-degree { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-weight: 700; - color: #1a1a1a; + color: #000000; text-transform: none; font-size: 18px; - letter-spacing: -.01em; } [data-theme="cgi"] .edu-school { - font-family: 'Inter', sans-serif; - color: #888; + font-family: Arial, sans-serif; + color: #555555; font-size: 13px; } [data-theme="cgi"] .certs-title { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; - color: #1a1a1a; - letter-spacing: .16em; + color: #000000; + letter-spacing: .14em; text-transform: uppercase; } [data-theme="cgi"] .cert-chip { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; font-size: 11px; - font-weight: 500; - color: #E31937; - border: 1px solid rgba(227,25,55,.25); + font-weight: 400; + color: #5236AB; + border: 1px solid rgba(82,54,171,.3); background: #fff; border-radius: 2px; text-transform: none; } [data-theme="cgi"] .footer-name { - font-family: 'Inter', sans-serif; - font-weight: 800; + font-family: Arial, sans-serif; + font-weight: 700; color: #fff; font-size: 20px; text-shadow: none; - letter-spacing: -.01em; } [data-theme="cgi"] .footer-info { - font-family: 'Inter', sans-serif; + font-family: Arial, sans-serif; color: rgba(255,255,255,.45); } - [data-theme="cgi"] .footer-status { color: #F2A200 } + [data-theme="cgi"] .footer-status { color: #9E83F5 } [data-theme="cgi"] .contact-bar { background: #fff; - border-bottom: 1px solid #e8e8e8; + border-bottom: 1px solid #CCCCCC; } [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); + font-family: Arial, sans-serif; + color: #5236AB; + border: 1px solid rgba(82,54,171,.3); + background: rgba(82,54,171,.05); border-radius: 2px; } [data-theme="cgi"] .contact-link:hover { - background: #E31937; + background: #5236AB; color: #fff; } [data-theme="cgi"] .burger-btn { top: 20px; right: 20px; } - [data-theme="cgi"] .burger-btn span { background: #E31937 } + [data-theme="cgi"] .burger-btn span { background: #5236AB } [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; + border: 1px solid #CCCCCC; + border-top: 3px solid #5236AB; + box-shadow: 0 8px 24px rgba(0,0,0,.12); + border-radius: 0; } /* ════ BASE LAYOUT ════ */