cv/index-template.html at main · EtienneLescot/cv · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!doctype html>
<html lang="fr" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title data-i18n="title"></title>
    <script>
      // Apply stored theme immediately to prevent flash of wrong theme
      (function() {
        const storedTheme = localStorage.getItem('theme');
        if (storedTheme) {
          document.documentElement.setAttribute('data-theme', storedTheme);
        }
      })();
    </script>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://etiennelescot.com/cv" />
    <meta property="og:image" content="https://etiennelescot.com/images/profile.jpg" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="" />
    <meta name="twitter:description" data-i18n="profile-desc" content="" />
    <meta name="twitter:image" content="https://etiennelescot.com/images/profile.jpg" />
    <link rel="stylesheet" href="style.min.css" />
  </head>

  <body>
    <main class="container">
      <!-- Header Section -->
      <header class="header-section">
        <div class="top-right-buttons">
          <div class="lang-dropdown">
            <button id="lang-button" class="lang-button" aria-label="">[ LANG ]</button>
            <ul id="lang-menu" class="lang-menu">
              <!-- Language options will be injected by build process -->
            </ul>
          </div>
          <button id="toggle" aria-label="">[ THEME ]</button>
          <a id="print-btn" href="#" target="_blank" rel="noopener" aria-label="">PDF</a>
        </div>
        <h1 data-i18n="name">Etienne Lescot</h1>
        <p class="tagline" data-i18n="tagline">Directeur Technique et Produit - SaaS, IoT, IA</p>
      </header>

      <!-- Contact Section -->
      <section class="contact-section">
        <div class="section neonbox">
          <h2 data-i18n="contact-title">Contact</h2>
          <ul>
            <li data-i18n="contact-phone">Tel: +33 6 80 51 21 20</li>
            <li data-i18n="contact-email">Email: etiennelescot@gmail.com</li>
            <li data-i18n="contact-linkedin">LinkedIn: https://...</li>
            <li data-contact-github>GitHub: https://github.com/EtienneLescot</li>
            <li><span data-i18n="contact-cv">CV en ligne :</span> <a id="online-cv-link" href="#" target="_blank" rel="noopener">https://etiennelescot.github.io/cv/</a></li>
          </ul>
        </div>
      </section>

      <!-- Profile Section -->
      <section class="profile-section">
        <div class="section neonbox">
          <h2 data-i18n="profile-title">Profil</h2>
          <p data-i18n="profile-desc">Directeur Technique et Produit...</p>
        </div>
      </section>

      <!-- Skills Section -->
      <section class="skills-section">
        <div class="section neonbox">
          <h2 data-i18n="skills-title">Compétences</h2>
          <ul>
            <li data-i18n="skill-1">Vision et Stratégie Produit...</li>
            <li data-i18n="skill-2">Expérience Utilisateur et Design...</li>
            <li data-i18n="skill-3">Solutions IoT et Géolocalisation Indoor...</li>
            <li data-i18n="skill-4">Architecture et Direction Technique...</li>
            <li data-i18n="skill-5">Intelligence Artificielle et Automation...</li>
            <li data-i18n="skill-6">Management et Pilotage...</li>
          </ul>
        </div>
      </section>

      <div class="pdf-page-break"></div>

      <!-- Experiences Section -->
      <div class="full-bleed-wrap">
        <div class="full-bleed-bg" aria-hidden="true"></div>
        <section class="experiences-section">
          <div class="section neonbox">
          <h2 data-i18n="experiences-title">Expériences Professionnelles</h2>

          <!-- CTO Fractional & Cofondateur (2022-2025) -->
          <article class="experience-item">
            <h3 data-i18n="exp-fractional-title">CTO Fractional & Cofondateur (2022-2025)</h3>
            <p data-i18n="exp-fractional-subtitle">Accompagnement technique et produit de startups early-stage + Projets Open Source</p>

            <h4 data-i18n="exp-fractional-opensource-heading">Projets Open Source Maintenus</h4>

            <div class="sub-experience">
              <div class="sub-header">
                <h5 data-i18n="exp-fractional-opensource-stimm-title">Stimm Platform</h5>
                <small class="stack" data-i18n="exp-fractional-opensource-stimm-stack">Stack : Voice AI, WebRTC, real-time processing</small>
                <a href="https://github.com/stimm-ai/stimm" target="_blank" data-i18n="exp-fractional-opensource-stimm-link">github.com/stimm-ai/stimm</a>
              </div>
              <p data-i18n="exp-fractional-opensource-stimm">Plateforme open source pour agents vocaux IA. Orchestration de pipelines IA ultra-low latency pour conversations temps réel sur WebRTC.</p>
            </div>

            <div class="sub-experience">
              <div class="sub-header">
                <h5 data-i18n="exp-fractional-opensource-n8n-title">n8n-as-code</h5>
                <small class="stack" data-i18n="exp-fractional-opensource-n8n-stack">Stack : n8n, VS Code extension, AI workflow generation</small>
                <a href="https://github.com/EtienneLescot/n8n-as-code" target="_blank" data-i18n="exp-fractional-opensource-n8n-link">github.com/EtienneLescot/n8n-as-code</a>
              </div>
              <p data-i18n="exp-fractional-opensource-n8n">Synchronisation bidirectionnelle n8n - VS Code. Génération de workflows via IA et GitOps. Stop clicking, start coding.</p>
            </div>

            <h4 data-i18n="exp-fractional-missions-heading">Missions CTO & Cofondations</h4>

            <div class="sub-experience">
              <div class="sub-header">
                <h5 data-i18n="exp1-title">Saraé (2024-2025) - Cofondateur & CTO</h5>
                <small class="sector" data-i18n="exp1-sector">Secteur : Architecture & Services</small>
              </div>
              <ul>
                <li data-i18n="exp1-point1">Stratégie cloud (AWS), intégration IA conversationnelle...</li>
                <li data-i18n="exp1-project-sarae">Projet SARAE...</li>
              </ul>
            </div>

            <div class="sub-experience">
              <div class="sub-header">
                <h5 data-i18n="exp2-title">Exalgo (2022-2023) - Cofondateur & CTO</h5>
                <small class="sector" data-i18n="exp2-sector">Secteur : IA & Développement logiciel</small>
              </div>
              <ul>
                <li data-i18n="exp2-point1">Direction de la R&D et définition de la vision technologique et produit de la plateforme SaaS</li>
                <li data-i18n="exp2-point2">Management de la stratégie d'infrastructure cloud-native (Kubernetes, DevOps, CI/CD) et garant de la scalabilité</li>
                <li data-i18n="exp2-point3">Pilotage de la performance technique et de la sécurité des services</li>
                <li data-i18n="exp2-project-exalbot">Projet Exalbot...</li>
              </ul>
            </div>
          </article>

          <!-- Experience 3: CTO Leni (2019-2022) -->
          <article class="experience-item">
            <div class="sub-header">
              <h3 data-i18n="exp3-title">CTO - Leni (2019-2022)</h3>
              <small class="sector" data-i18n="exp3-sector">Secteur : Technologies pour l'événementiel et Solutions IoT</small>
            </div>
            <ul>
              <li data-i18n="exp3-point1">Direction pôle R&D...</li>
              <li data-i18n="exp3-point2">Pilotage portefeuille produits SaaS...</li>
              <li data-i18n="exp3-point3">Supervision architecture cloud...</li>
              <li data-i18n="exp3-project-appkiosk">Projet AppKiosk...</li>
            </ul>
          </article>

          <!-- Experience 4: Freelance (2007-2019) -->
          <article class="experience-item experience-page-break">
            <div class="sub-header">
              <h3 data-i18n="exp4-title">Lead Dev et Directeur de Projet - Freelance (2007-2019)</h3>
              <small class="sector" data-i18n="exp4-sectors">Secteurs : Santé, Luxe, Événementiel, Services</small>
            </div>
            <ul>
              <li data-i18n="exp4-tech">Technologies...</li>
              <li data-i18n="exp4-project-digitec">DigitecPharma (2017-2019)...</li>
              <li data-i18n="exp4-project-serious">Serious Game Unity 3D...</li>
              <li data-i18n="exp4-project-luxury">Campagnes digitales innovantes...</li>
              <li data-i18n="exp4-point1">Pilotage de A à Z...</li>
              <li data-i18n="exp4-point2">Prise en charge relation client...</li>
              <li data-i18n="exp4-point3">Garant du respect des engagements...</li>
            </ul>
          </article>
        </div>
        </section>
      </div>

      <!-- Formation Section -->
      <section class="formation-section">
        <div class="section neonbox">
          <h2 data-i18n="formation-title">Formation</h2>
          <ul>
            <li data-i18n="formation-bts">BTS Logistique, ESPL, Angers, 2005</li>
            <li data-i18n="formation-autodidacte">Autodidacte et Veille Technologique (2007 - Aujourd'hui)</li>
          </ul>
        </div>
      </section>

      <!-- Languages Section -->
      <section class="languages-section">
        <div class="section neonbox">
          <h2 data-i18n="languages-title">Langues</h2>
          <ul>
            <li data-i18n="lang-fr">Français - Natif</li>
            <li data-i18n="lang-en">Anglais - B2 Niveau avancé</li>
          </ul>
        </div>
      </section>

      <!-- Interests Section -->
      <section class="interests-section">
        <div class="section neonbox">
          <h2 data-i18n="interests-title">Centres d'intérêt</h2>
          <ul>
            <li data-i18n="interest-1">Boxe: Discipline et dépassement de soi</li>
            <li data-i18n="interest-2">Domotique et IoT...</li>
            <li data-i18n="interest-3">Rénovation immobilière...</li>
          </ul>
        </div>
      </section>
    </main>
  </body>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const langButton = document.getElementById('lang-button');
      const langMenu = document.getElementById('lang-menu');
      const themeToggle = document.getElementById('toggle');
      const pdfButton = document.getElementById('print-btn');
      const htmlElement = document.documentElement;

      function updatePdfLink() {
        if (!pdfButton) {
          return;
        }

        const locale = htmlElement.lang || 'fr';
        const theme = htmlElement.getAttribute('data-theme') || 'light';
        const basePath = htmlElement.getAttribute('data-base-path') || '';
        const normalizedBase = basePath ? basePath.replace(/\/$/, '') : '.';
        const fileName = `cv-${locale}-${theme}.pdf`;
        const href = `${normalizedBase}/pdf/${fileName}`;

        pdfButton.setAttribute('href', href);
      }

      function updateOnlineCvLink() {
        const onlineLink = document.getElementById('online-cv-link');
        if (!onlineLink) return;

        // If the link already has an absolute URL (starts with http:// or https://),
        // don't override it (it was set by build-static-locales.js)
        const currentHref = onlineLink.getAttribute('href');
        if (currentHref && /^https?:\/\//.test(currentHref)) {
          return;
        }

        const locale = htmlElement.lang || 'fr';
        const basePath = htmlElement.getAttribute('data-base-path') || '';
        const normalizedBase = basePath ? basePath.replace(/\/$/, '') : '.';
        const indexFile = locale === 'fr' ? '/index.html' : `/index-${locale}.html`;

        let href;
        if (normalizedBase === '.') {
          href = `.${indexFile}`;
        } else if (/^https?:\/\//.test(normalizedBase)) {
          href = `${normalizedBase}${indexFile}`;
        } else if (normalizedBase.startsWith('/')) {
          href = `${window.location.origin}${normalizedBase}${indexFile}`;
        } else {
          href = `${normalizedBase}${indexFile}`;
        }

        onlineLink.setAttribute('href', href);
        onlineLink.textContent = href;
      }

      if (langButton && langMenu) {
        // Toggle dropdown visibility
        langButton.addEventListener('click', function(e) {
          e.stopPropagation();
          langMenu.style.display = langMenu.style.display === 'block' ? 'none' : 'block';
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function() {
          langMenu.style.display = 'none';
        });

        // Handle language selection
        langMenu.addEventListener('click', function(e) {
          if (e.target.tagName === 'LI' && e.target.dataset.href) {
            window.location.href = e.target.dataset.href;
          }
        });
      }

      // Theme toggle functionality
      if (themeToggle) {
        // Apply stored theme on page load, default to light if none stored
        const storedTheme = localStorage.getItem('theme');
        const defaultTheme = 'light';
        const themeToApply = storedTheme || defaultTheme;

        htmlElement.setAttribute('data-theme', themeToApply);
        themeToggle.textContent = themeToApply === 'dark' ? '[ LIGHT ]' : '[ DARK ]';

        // Function to update print theme style
        function updatePrintThemeStyle(theme) {
          const style = document.createElement('style');
          style.id = 'print-theme-style';
          style.innerHTML = `
            @media print {
              @page {
                background: ${theme === 'dark' ? '#1A1A1A' : '#ffffff'} !important;
              }
            }
          `;
          // Remove any existing print theme style
          const existingStyle = document.getElementById('print-theme-style');
          if (existingStyle) {
            document.head.removeChild(existingStyle);
          }
          document.head.appendChild(style);
        }

        // Set initial print theme style
        updatePrintThemeStyle(themeToApply);
        updatePdfLink();
        updateOnlineCvLink();

        themeToggle.addEventListener('click', function() {
          const currentTheme = htmlElement.getAttribute('data-theme');
          const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
          htmlElement.setAttribute('data-theme', newTheme);

          // Store theme preference
          localStorage.setItem('theme', newTheme);

          // Update button text
          themeToggle.textContent = newTheme === 'dark' ? '[ LIGHT ]' : '[ DARK ]';

          // Update print theme style
          updatePrintThemeStyle(newTheme);
          updatePdfLink();
          updateOnlineCvLink();
        });
      }
    });
  </script>
</html>