houcemben-dev.github.o/index.html at main · houcemben-dev/houcemben-dev.github.o · 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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Houcem Benguermoud | Développeur IA | Portfolio</title>

  <!-- CSS -->
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
<link rel="shortcut icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Portfolio de Houcem Benguermoud, développeur IA en alternance. Projets Python, automatisation, data et intelligence artificielle.">
  <meta name="google-site-verification" content="DgxhOqDgjw14g8e71N6pFbX2oQJUNOvhvFft7ySRjBg" />


</head>

<body>

  <!-- HEADER -->
  <header class="header">
    <div class="logo">Houcem Benguermoud</div>
<button class="burger" aria-label="Menu">
    ☰
  </button>
    <nav class="nav">
  <a href="#hero">Accueil</a>
  <a href="#projects">Projets</a>
  <a href="#skills">Compétences</a>
   <a href="#parcours">Parcours & Expériences</a>
  <a href="#about">À propos</a>
  <a href="#contact">Me contacter</a>
    </nav>
  </header>

  <section id="hero" class="hero">
  <div class="hero-content">

    <!-- GAUCHE : texte -->
    <div class="hero-text">
      <h1>Houcem Benguermoud</h1>
      <h2>Alternance Développeur IA</h2>

      <p>
        Étudiant en informatique au sein du parcours Développeur IA chez OpenClassrooms,
        orienté Python, data et automatisation. Je recherche une alternance pour développer
        des solutions concrètes et renforcer mes compétences en intelligence artificielle.
      </p>

      <a href="CV Alternance IA.pdf"
         target="_blank"
         class="btn primary">
        Voir mon CV (PDF)
      </a>
    </div>

    <!-- DROITE : photo -->
    <div class="hero-image">
      <img src="photo_cv.png" alt="Photo de Houcem Benguermoud">
    </div>

  </div>
</section>

  <!-- PROJETS -->
  <section id="projects">
    <h2>Mes Projets</h2>

    <!-- Filtres (JS) -->
    <div class="filters">
      <button class="filter active" data-type="all">Tous</button>
      <button class="filter" data-type="python">Python</button>
    </div>

<!-- Cartes (JS filtre via class python/web/data) -->
<div class="cards">

  <article class="card python">
    <span class="tag">Python</span>
    <h3>Générateur de mots de passe</h3>
    <p>
      Application Python permettant de générer des mots de passe sécurisés
      selon plusieurs critères (longueur, caractères, aléatoire).
    </p>
     <a href="https://github.com/houcemben-dev/password-generator-python"
   target="_blank"
   rel="noopener"
   class="btn primary">
  <i class="fa-brands fa-github"></i> Voir sur GitHub
</a>
  </article>

 <article class="card python">
  <span class="tag">Python</span>
  <h3>To-do list dynamique</h3>
  <p>
    Application de gestion de tâches avec une logique en Python
    pour le traitement et l’organisation des données,
    et une interface simple pour l’interaction utilisateur.
  </p>
   <a href="https://github.com/houcemben-dev/To-Do-List"
   target="_blank"
   rel="noopener"
   class="btn primary">
  <i class="fa-brands fa-github"></i> Voir sur GitHub
</a>
</article>

  <article class="card python">
    <span class="tag">Python</span>
    <h3>Automatisation de processus de candidature</h3>
    <p>
      Outil Python permettant d’automatiser des tâches répétitives liées à la recherche d’emploi,
      comme la préparation de candidatures, la gestion des informations et le suivi des envois.
      Objectif : gagner du temps, structurer le processus et améliorer l’efficacité.
    </p>
    <a href="https://github.com/houcemben-dev/assistant-candidatures-python"
   target="_blank"
   rel="noopener"
   class="btn primary">
  <i class="fa-brands fa-github"></i> Voir sur GitHub
</a>
  </article>

</div>
    </div>
  </section>

  <!-- COMPÉTENCES -->
  <section id="skills">
    <h2>Compétences</h2>

    <!-- (Optionnel) filtres visuels - pas liés au JS ici -->

    <div class="skills">
      <div class="skill">Python</div>
      <div class="skill">Pandas</div>
      <div class="skill">HTML</div>
      <div class="skill">CSS</div>
      <div class="skill">JavaScript</div>
      <div class="skill">SQL</div>
      <div class="skill">Marketing digital</div>
      <div class="skill">Management</div>
      <div class="skill">Ressources humaines</div>
      <div class="skill">Anglais (Niveau C1)</div>
    </div>
  </section>
<section id="parcours">
  <h2>Parcours & Expériences</h2>

  <div class="parcours-container">

    <!-- FORMATION -->
    <div class="parcours-block">
      <h3>🎓 Formation</h3>

      <div class="parcours-item">
        <h4>Développeur IA - En cours</h4>
        <p>
          Formation orientée développement Python, data et intelligence artificielle.
          Apprentissage par projets, logique algorithmique et montée en compétences
          progressive sur des problématiques concrètes.
        </p>
        <h4>Master Marketing et ingénierie d'affaires - Validé en 2023</h4>
        <p>
            Formation orientée analyse stratégique, compréhension des besoins clients
            et prise de décision basée sur les données.
            Ce parcours m’a permis de développer une forte logique analytique
            que j’applique aujourd’hui dans mes projets techniques (Python, data, IA).

        </p>
        <h4>Diplome de langue anglaise en situation professionnelle (DULASP) - Validé en 2021</h4>
        <p>
            Diplôme validant la capacité à communiquer et travailler
            en anglais dans un contexte professionnel et technique
            (documentation, outils, échanges écrits).

        </p>
      </div>
    </div>

    <!-- EXPÉRIENCE PRO -->
    <div class="parcours-block">
      <h3>💼 Expérience professionnelle</h3>

      <div class="parcours-item">
        <h4>Assistant Store Manager chez Action (2025 - Présent)</h4>
        <p>
          Expérience en gestion d’équipe et pilotage opérationnel,
          avec une forte dimension analytique et organisationnelle.
        </p>

        <ul>
          <li>Suivi et analyse de KPI (performance, flux, résultats)</li>
          <li>Optimisation de l’organisation et des process</li>
          <li>Prise de décision basée sur des données concrètes</li>
          <li>Responsabilité, autonomie et gestion des priorités</li>
        </ul>
        <h4>Resposable départemental chez Primark (2024 - 2025)</h4>
        <p>
          Analyse de performance, optimisation de process et prise de décision
          basées sur des indicateurs concrets
        </p>

        <ul>
          <li>Analyse de performances et suivi de KPI</li>
          <li>Optimisation de process et organisation du travail</li>
          <li>Prise de décision et gestion des priorités</li>
          <li>Responsabilité et autonomie en environnement exigeant</li>
        </ul>
      </div>
    </div>

  </div>
</section>
  <!-- À PROPOS -->
  <section id="about">
  <h2>À propos</h2>

  <div class="about-wrapper">

    <div class="about-grid">
      <!-- Photo -->
      <div class="about-photo">
        <img src="photo_cv.png" alt="Photo de Houcem Benguermoud">
      </div>

      <!-- Texte -->
      <div class="about-content">
        <h3>Houcem Benguermoud</h3>

        <p>
          Actuellement en reconversion vers le développement et l’intelligence artificielle,
je suis le parcours Développeur IA chez OpenClassrooms, avec un focus sur Python,
la logique algorithmique et l’automatisation.

Issu d’un parcours en marketing et ingénierie d’affaires, et actuellement
Assistant Store Manager chez Action, j’ai développé une forte capacité d’analyse,
de structuration de processus et de prise de décision basée sur des indicateurs concrets.

Aujourd’hui, je mets ces compétences au service de projets techniques,
avec l’objectif de concevoir des solutions utiles, fiables et orientées données.
Je recherche une alternance d’une durée d’un an afin de poursuivre cette montée en compétences.
        </p>

        <ul class="about-list">
          <li>✅ Projets concrets en Python / Web</li>
          <li>✅ Disponible dès maintenant</li>
          <li>✅ Anglais professionnel</li>
          <li>✅ Alternance recherchée : 1 an</li>
          <li>✅ Nancy / Paris / Mulhouse / Jura (Suisse)</li>
        </ul>
      </div>
    </div>

    <!-- Contact intégré (dense) -->
    <div class="about-contact">
      <h4>Contact & réseaux</h4>

      <div class="contact">
        <a href="mailto:houcem.benguermoud@gmail.com" aria-label="Email">
          <i class="fa-solid fa-envelope"></i>
        </a>

        <a href="https://www.linkedin.com/in/houcem-benguermoud-9490681a1/" target="_blank" rel="noreferrer" aria-label="LinkedIn">
          <i class="fa-brands fa-linkedin-in"></i>
        </a>

        <a href="https://github.com/houcemben-dev" target="_blank" rel="noreferrer" aria-label="GitHub">
          <i class="fa-brands fa-github"></i>
        </a>
      </div>
    </div>

  </div>
</section>

  <footer style="padding:24px 8%; text-align:center; color:#64748b;">
    © 2026 — Houcem Benguermoud
  </footer>


  <script src="javascript.js"></script>
  <div id="contactModal" class="modal" aria-hidden="true">
  <div class="modal-overlay" data-close></div>

  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <button class="modal-close" type="button" data-close aria-label="Fermer">✕</button>

    <h3 id="modalTitle">Me contacter</h3>

    <div class="modal-actions">
      <a class="modal-row" href="mailto:houcem.benguermoud@gmail.com">
        <span class="modal-label">Email</span>
        <span class="modal-value">houcem.benguermoud@gmail.com</span>
      </a>

      <a class="modal-row" href="tel:+33612345678">
        <span class="modal-label">Téléphone</span>
        <span class="modal-value">+33 6 98 01 42 48</span>
      </a>
    </div>

    <div class="modal-cta">
      <button type="button" class="btn primary" data-close>Fermer</button>
    </div>
  </div>
</div>
</body>

</html>