-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
463 lines (434 loc) · 27.3 KB
/
Copy pathindex.html
File metadata and controls
463 lines (434 loc) · 27.3 KB
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
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Khalil Benazzouz — Senior Software Engineer · Team Leader Fintech</title>
<meta name="description" content="Khalil Benazzouz — Senior Software Engineer, Team Leader B3G. 7+ ans en .NET, microservices et solutions de paiement." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css?v=7" />
<script src="shared.js?v=6" defer></script>
</head>
<body>
<header class="nav">
<div class="wrap nav-inner">
<a class="brand" href="index.html">
<span class="brand-mark">KB</span>
<span>Khalil Benazzouz</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#work" data-lang="fr">Parcours</a><a href="#work" data-lang="en">Work</a>
<a href="#projects" data-lang="fr">Projets</a><a href="#projects" data-lang="en">Projects</a>
<a href="#skills" data-lang="fr">Compétences</a><a href="#skills" data-lang="en">Skills</a>
<a href="blog.html">Blog</a>
<a href="#contact">Contact</a>
</nav>
<div class="nav-tools">
<button class="icon-btn" data-action="toggle-locale" type="button">FR</button>
<button class="icon-btn" data-action="toggle-theme" type="button" aria-label="Toggle theme">
<svg data-icon="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>
<svg data-icon="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" hidden><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
</button>
</div>
</div>
</header>
<main class="wrap">
<!-- HERO -->
<section class="hero" style="border-top:0">
<p class="eyebrow"><span data-lang="fr">Disponible pour de nouvelles opportunités</span><span data-lang="en">Available for new opportunities</span></p>
<div style="display:grid;grid-template-columns:1fr auto;gap:48px;align-items:start;margin-top:18px" class="hero-grid">
<div>
<h1>
<span data-lang="fr">Khalil Benazzouz.<br/>Senior <span class="accent">Software Engineer</span> & Team Leader sur les solutions de paiement.</span>
<span data-lang="en">Khalil Benazzouz.<br/>Senior <span class="accent">Software Engineer</span> & Team Leader in digital payments.</span>
</h1>
<p class="lede" style="margin-top:22px">
<span data-lang="fr">7+ ans en .NET, microservices et fintech. Aujourd’hui Team Leader chez B3G, où je pilote les plateformes critiques de paiement digital — du wallet à l’API.</span>
<span data-lang="en">7+ years across .NET, microservices and fintech. Currently Team Leader at B3G, where I lead the critical digital-payment platforms — wallet to API.</span>
</p>
<div class="hero-meta">
<span><span class="dot"></span><span data-lang="fr">Ouvert aux opportunités</span><span data-lang="en">Open to opportunities</span></span>
<span>FR · EN · AR</span>
<span data-lang="fr">2× Master 2</span><span data-lang="en">Dual Master’s</span>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="#contact">
<span data-lang="fr">Me contacter</span><span data-lang="en">Get in touch</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>
</a>
<a class="btn btn-ghost" href="https://linkedin.com/in/khalilbenazzouz" target="_blank" rel="noopener">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05c.53-1 1.82-2.05 3.75-2.05 4 0 4.74 2.63 4.74 6.05V21h-4v-5.4c0-1.29-.03-2.96-1.8-2.96-1.8 0-2.08 1.41-2.08 2.86V21h-4V9Z"/></svg>
LinkedIn
</a>
<a class="btn btn-ghost" href="https://github.com/khalilbenaz" target="_blank" rel="noopener">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1.1-.8.1-.8.1-.8 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .5Z"/></svg>
GitHub
</a>
</div>
</div>
<!-- Photo placeholder. Drop your real photo at photo.jpg next to this file then swap the src below. -->
<div style="width:180px;height:180px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,var(--bg-soft),var(--bg-elev));display:grid;place-items:center;flex-shrink:0;position:relative">
<span style="font-family:var(--font-serif);font-size:64px;color:var(--text-3);letter-spacing:-0.04em">KB</span>
<span style="position:absolute;bottom:8px;font-family:var(--font-mono);font-size:9px;color:var(--text-3);letter-spacing:0.06em">PHOTO · photo.jpg</span>
</div>
</div>
<!-- Stats strip -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:48px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
<div style="background:var(--bg-elev);padding:20px 22px">
<div style="font-size:28px;font-weight:600;letter-spacing:-0.02em">7+</div>
<div style="color:var(--text-3);font-size:12px;font-family:var(--font-mono);margin-top:4px"><span data-lang="fr">ANS D’EXPÉRIENCE</span><span data-lang="en">YEARS OF EXPERIENCE</span></div>
</div>
<div style="background:var(--bg-elev);padding:20px 22px">
<div style="font-size:28px;font-weight:600;letter-spacing:-0.02em">.NET</div>
<div style="color:var(--text-3);font-size:12px;font-family:var(--font-mono);margin-top:4px"><span data-lang="fr">STACK PRINCIPALE</span><span data-lang="en">CORE STACK</span></div>
</div>
<div style="background:var(--bg-elev);padding:20px 22px">
<div style="font-size:28px;font-weight:600;letter-spacing:-0.02em">B3G</div>
<div style="color:var(--text-3);font-size:12px;font-family:var(--font-mono);margin-top:4px">TEAM LEADER</div>
</div>
<div style="background:var(--bg-elev);padding:20px 22px">
<div style="font-size:28px;font-weight:600;letter-spacing:-0.02em">2×</div>
<div style="color:var(--text-3);font-size:12px;font-family:var(--font-mono);margin-top:4px">MASTER 2</div>
</div>
</div>
<!-- Quote -->
<blockquote style="margin:48px 0 0;padding:20px 0 0;border-top:1px solid var(--border);font-family:var(--font-serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--text-2);max-width:60ch">
<span data-lang="fr">« C’est votre attitude, bien plus que votre aptitude, qui détermine votre altitude. »</span>
<span data-lang="en">“It is your attitude, more than your aptitude, that determines your altitude.”</span>
</blockquote>
</section>
<!-- WORK -->
<section id="work">
<div class="section-head">
<p class="eyebrow">01 · <span data-lang="fr">Expérience professionnelle</span><span data-lang="en">Experience</span></p>
<h2 data-lang="fr">Sept ans à construire des plateformes de paiement.</h2>
<h2 data-lang="en">Seven years building payment platforms.</h2>
</div>
<div class="timeline">
<article class="exp">
<div><div class="when">Oct 2024 — <span data-lang="fr">aujourd’hui</span><span data-lang="en">present</span></div></div>
<div>
<h3>Team Leader</h3>
<p class="where">B3G</p>
<ul>
<li data-lang="fr">Leadership technique et gestion d’équipe pour les solutions de paiement numérique.</li>
<li data-lang="en">Technical leadership and team management for digital-payment solutions.</li>
<li data-lang="fr">Coordination de projets critiques et supervision du développement.</li>
<li data-lang="en">Coordinating critical projects and overseeing development.</li>
<li data-lang="fr">Amélioration des processus de développement et des standards de qualité.</li>
<li data-lang="en">Improving development processes and quality standards.</li>
</ul>
<div class="tags">
<span class="tag accent">.NET</span><span class="tag">Microservices</span><span class="tag">Leadership</span>
</div>
</div>
</article>
<article class="exp">
<div><div class="when">Mai 2021 — Oct 2024</div></div>
<div>
<h3>Full Stack Engineer .NET</h3>
<p class="where">B3G</p>
<ul>
<li data-lang="fr">Développement full stack sur les plateformes critiques de l’entreprise.</li>
<li data-lang="en">Full-stack development on the company’s critical platforms.</li>
<li data-lang="fr">Conception et implémentation de solutions de paiement digital.</li>
<li data-lang="en">Designed and built digital-payment solutions.</li>
<li data-lang="fr">Développement de microservices et APIs robustes.</li>
<li data-lang="en">Built robust microservices and APIs.</li>
</ul>
<div class="tags">
<span class="tag">ASP.NET</span><span class="tag">C#</span><span class="tag">SQL Server</span><span class="tag">REST API</span>
</div>
</div>
</article>
<article class="exp">
<div><div class="when">Mai 2019 — Mai 2021</div></div>
<div>
<h3>Software Engineer .NET</h3>
<p class="where">B3G</p>
<ul>
<li data-lang="fr">Évolution et maintenance des systèmes financiers et portefeuilles électroniques.</li>
<li data-lang="en">Evolved and maintained financial systems and electronic wallets.</li>
<li data-lang="fr">Développement de fonctionnalités pour solutions de paiement.</li>
<li data-lang="en">Delivered new features for payment solutions.</li>
<li data-lang="fr">Optimisation des performances et sécurité des applications.</li>
<li data-lang="en">Optimized application performance and security.</li>
</ul>
<div class="tags">
<span class="tag">C#</span><span class="tag">Wallet</span><span class="tag">Payments</span>
</div>
</div>
</article>
<article class="exp">
<div><div class="when">Jan 2019</div></div>
<div>
<h3>Ingénieur Études et Dev .NET</h3>
<p class="where">ISIC Rabat</p>
<ul>
<li data-lang="fr">Développement d’un site intranet de bibliothèque.</li>
<li data-lang="en">Built an intranet library website.</li>
</ul>
<div class="tags">
<span class="tag">ASP.NET</span><span class="tag">SQL Server</span><span class="tag">Razor</span>
</div>
</div>
</article>
<article class="exp">
<div><div class="when">Jan — Juin 2018</div></div>
<div>
<h3>Ingénieur Études et Dev</h3>
<p class="where">Rabat Fluid</p>
<ul>
<li data-lang="fr">Développement d’un site web e-commerce.</li>
<li data-lang="en">Built an e-commerce website.</li>
</ul>
<div class="tags">
<span class="tag">WordPress</span><span class="tag">MySQL</span>
</div>
</div>
</article>
<article class="exp">
<div><div class="when">Mai — Déc 2017</div></div>
<div>
<h3 data-lang="fr">Ingénieur Stagiaire (PFE Master)</h3>
<h3 data-lang="en">Engineering Intern (Master’s thesis)</h3>
<p class="where">SNTL Group</p>
<ul>
<li data-lang="fr">Application mobile de géolocalisation et déclaration de sinistre.</li>
<li data-lang="en">Mobile app for geolocation and claim reporting.</li>
<li data-lang="fr">API REST backend.</li>
<li data-lang="en">REST API backend.</li>
</ul>
<div class="tags">
<span class="tag">Laravel</span><span class="tag">PHP</span><span class="tag">Ionic</span><span class="tag">MySQL</span>
</div>
</div>
</article>
</div>
</section>
<!-- PROJECTS -->
<section id="projects">
<div class="section-head">
<p class="eyebrow">02 · <span data-lang="fr">Projets & open source</span><span data-lang="en">Projects & open source</span></p>
<h2 data-lang="fr">Ce que je construis le soir.</h2>
<h2 data-lang="en">What I build after hours.</h2>
</div>
<div class="grid-2">
<a class="card" href="https://github.com/khalilbenaz/RIVORA" target="_blank" rel="noopener">
<div class="meta">◆ ENTERPRISE FRAMEWORK</div>
<h3>RIVORA</h3>
<p data-lang="fr">Framework cloud-native pour .NET 9 basé sur Clean Architecture, DDD et multi-tenancy. Conçu pour les applications SaaS professionnelles. 89% Native AOT, 93 tests.</p>
<p data-lang="en">Cloud-native framework for .NET 9 built on Clean Architecture, DDD and multi-tenancy. Made for professional SaaS apps. 89% Native AOT, 93 tests.</p>
<div class="tags">
<span class="tag accent">.NET 9</span><span class="tag">React 19</span><span class="tag">EF Core</span><span class="tag">CQRS</span><span class="tag">GraphQL</span><span class="tag">Docker</span>
</div>
</a>
<a class="card" href="https://github.com/khalilbenaz/MDAN" target="_blank" rel="noopener">
<div class="meta">★ AI AGENT NETWORK</div>
<h3>MDAN</h3>
<p data-lang="fr">Multi-Agent Development Agentic Network. 25+ wizards en 5 phases (Discover → Ship), 19+ agents spécialisés, modes Discussion / Débat / Consensus. Compatible Claude Code & Cursor via MCP.</p>
<p data-lang="en">Multi-Agent Development Agentic Network. 25+ wizards across 5 phases (Discover → Ship), 19+ specialised agents, Discussion / Debate / Consensus modes. Compatible with Claude Code & Cursor via MCP.</p>
<div class="tags">
<span class="tag accent">Node.js</span><span class="tag">MCP</span><span class="tag">Claude Code</span><span class="tag">YAML</span>
</div>
</a>
<a class="card" href="https://github.com/khalilbenaz/QRLIB" target="_blank" rel="noopener">
<div class="meta">▩ NUGET LIBRARY</div>
<h3>QRLIB</h3>
<p data-lang="fr">Librairie .NET 8 zéro-dépendance pour générer, parser et valider les QR Codes EMVCo Merchant (MPM). Conforme EMVCo et ISO/IEC 18004. CRC16-CCITT automatique.</p>
<p data-lang="en">Zero-dependency .NET 8 library for generating, parsing and validating EMVCo Merchant QR Codes (MPM). EMVCo & ISO/IEC 18004 compliant. Automatic CRC16-CCITT.</p>
<div class="tags">
<span class="tag accent">.NET 8</span><span class="tag">C#</span><span class="tag">EMVCo</span><span class="tag">NuGet</span>
</div>
</a>
<a class="card" href="https://mock-a.netlify.app/" target="_blank" rel="noopener">
<div class="meta">⚡ SAAS · DEMO LIVE</div>
<h3>Mocka</h3>
<p data-lang="fr">Plateforme pour créer des serveurs mock API instantanément. URLs live, tous les verbes HTTP, CORS intégré, simulation de latence, partage d’équipe.</p>
<p data-lang="en">Platform for spinning up mock API servers instantly. Live URLs, every HTTP verb, built-in CORS, latency simulation, team sharing.</p>
<div class="tags">
<span class="tag accent">Next.js</span><span class="tag">React</span><span class="tag">Tailwind</span><span class="tag">Clerk</span><span class="tag">Vercel</span>
</div>
</a>
<a class="card" href="https://github.com/khalilbenaz/ultra-tv" target="_blank" rel="noopener">
<div class="meta">📺 ANDROID TV · DESKTOP · WEB</div>
<h3>Ultra TV</h3>
<p data-lang="fr">Lecteur IPTV moderne pour Android TV / Google TV (natif Compose-TV), desktop et web. Xtream, M3U, Stalker · HLS/DASH/MPEG-TS · EPG, DVR, Chromecast, multi-langues (EN/FR/ES/AR).</p>
<p data-lang="en">Modern IPTV player for Android TV / Google TV (native Compose-TV), desktop and web. Xtream, M3U, Stalker · HLS/DASH/MPEG-TS · EPG, DVR, Chromecast, multi-language (EN/FR/ES/AR).</p>
<div class="tags">
<span class="tag accent">Kotlin</span><span class="tag">Compose-TV</span><span class="tag">Media3</span><span class="tag">Room</span><span class="tag">Hilt</span>
</div>
</a>
<a class="card" href="https://khalilbenaz.github.io/DBTeam/" target="_blank" rel="noopener">
<div class="meta">🗄 WINDOWS DESKTOP IDE</div>
<h3>DB TEAM</h3>
<p data-lang="fr">IDE SQL Server professionnel pour Windows — modulaire, bilingue (EN/FR), thèmes. Schema/Data Compare, Query Profiler, Table Designer, Data Generator, AI assistant intégré.</p>
<p data-lang="en">Professional SQL Server IDE for Windows — modular, bilingual (EN/FR), themeable. Schema/Data Compare, Query Profiler, Table Designer, Data Generator, built-in AI assistant.</p>
<div class="tags">
<span class="tag accent">.NET 8</span><span class="tag">WPF</span><span class="tag">AvalonEdit</span><span class="tag">MVVM</span><span class="tag">Bogus</span>
</div>
</a>
<a class="card" href="https://github.com/khalilbenaz/cleanmac-pro" target="_blank" rel="noopener">
<div class="meta">🧹 MACOS · NATIVE</div>
<h3>CleanMac Pro</h3>
<p data-lang="fr">Cleaner natif Swift pour macOS — rapide, transparent, open source. Binaire ~4 MB, zéro télémétrie. Dashboard SwiftUI : Smart Scan, Space Lens (treemap), audit Privacy/Security.</p>
<p data-lang="en">Native Swift cleaner for macOS — fast, transparent, open source. ~4 MB binary, zero telemetry. SwiftUI dashboard: Smart Scan, Space Lens treemap, Privacy/Security audit.</p>
<div class="tags">
<span class="tag accent">Swift</span><span class="tag">SwiftUI</span><span class="tag">macOS 14+</span><span class="tag">MIT</span>
</div>
</a>
<a class="card" href="https://github.com/khalilbenaz/claude-skills-collection" target="_blank" rel="noopener">
<div class="meta">⚙ PLUGIN · OPEN SOURCE</div>
<h3>Claude Skills Collection</h3>
<p data-lang="fr">La plus grande collection open source de skills pour Claude Code : <strong>347 skills, 32 domaines</strong>. Agents, dev, frameworks IA, orchestration multi-agents. Installable en un clic.</p>
<p data-lang="en">The largest open-source skills collection for Claude Code: <strong>347 skills across 32 domains</strong>. Agents, dev, AI frameworks, multi-agent orchestration. One-click install.</p>
<div class="tags">
<span class="tag accent">Claude Code</span><span class="tag">MCP</span><span class="tag">347 skills</span><span class="tag">32 domaines</span>
</div>
</a>
</div>
</section>
<!-- SKILLS -->
<section id="skills">
<div class="section-head">
<p class="eyebrow">03 · <span data-lang="fr">Compétences</span><span data-lang="en">Skills</span></p>
<h2 data-lang="fr">Stack & expertise.</h2>
<h2 data-lang="en">Stack & expertise.</h2>
</div>
<div>
<div class="skill-group">
<h4>Backend</h4>
<div class="skill-list">
<span class="tag">C#</span><span class="tag">.NET</span><span class="tag">ASP.NET Core</span><span class="tag">REST API</span><span class="tag">Microservices</span>
</div>
</div>
<div class="skill-group">
<h4>Frontend</h4>
<div class="skill-list">
<span class="tag">JavaScript</span><span class="tag">React</span><span class="tag">Razor</span><span class="tag">CSS</span><span class="tag">Ionic</span><span class="tag">WordPress</span>
</div>
</div>
<div class="skill-group">
<h4>Data & Infra</h4>
<div class="skill-list">
<span class="tag">SQL Server</span><span class="tag">MySQL</span><span class="tag">EF Core</span><span class="tag">Git</span><span class="tag">Docker</span>
</div>
</div>
<div class="skill-group">
<h4><span data-lang="fr">Domaine</span><span data-lang="en">Domain</span></h4>
<div class="skill-list">
<span class="tag">Fintech</span><span class="tag">Payments</span><span class="tag">Wallet</span><span class="tag">Leadership</span>
</div>
</div>
</div>
</section>
<!-- CERTS + EDU + LANG -->
<section id="credentials">
<div class="section-head">
<p class="eyebrow">04 · <span data-lang="fr">Formation, certifications & langues</span><span data-lang="en">Education, certifications & languages</span></p>
<h2 data-lang="fr">Bases académiques.</h2>
<h2 data-lang="en">Academic foundations.</h2>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px" class="creds-grid">
<div>
<h3 style="margin-bottom:14px" data-lang="fr">Formation</h3>
<h3 style="margin-bottom:14px" data-lang="en">Education</h3>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;font-size:14px">
<li>
<div style="color:var(--text);font-weight:500">Master 2 — <span data-lang="fr">Systèmes d’Informations Distribués</span><span data-lang="en">Distributed Information Systems</span></div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px">Université de Lorraine · 2016—2017</div>
</li>
<li>
<div style="color:var(--text);font-weight:500">Master 2 — <span data-lang="fr">Ingénierie logicielle & développement web</span><span data-lang="en">Software engineering & web dev</span></div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px">Groupe ISGA · 2016—2017</div>
</li>
</ul>
</div>
<div>
<h3 style="margin-bottom:14px">Certifications</h3>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;font-size:14px">
<li>
<div style="color:var(--text);font-weight:500">🏆 Big Data Developer</div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px">Explorer Award · 2016</div>
</li>
<li>
<div style="color:var(--text);font-weight:500">💻 Python Developer</div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px">OpenClassrooms</div>
</li>
</ul>
</div>
<div>
<h3 style="margin-bottom:14px" data-lang="fr">Langues</h3>
<h3 style="margin-bottom:14px" data-lang="en">Languages</h3>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;font-size:14px">
<li>
<div style="color:var(--text);font-weight:500">🇫🇷 <span data-lang="fr">Français</span><span data-lang="en">French</span></div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px"><span data-lang="fr">Natif</span><span data-lang="en">Native</span></div>
</li>
<li>
<div style="color:var(--text);font-weight:500">🇬🇧 <span data-lang="fr">Anglais</span><span data-lang="en">English</span></div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px"><span data-lang="fr">Professionnel</span><span data-lang="en">Professional</span></div>
</li>
<li>
<div style="color:var(--text);font-weight:500">🇲🇦 <span data-lang="fr">Arabe</span><span data-lang="en">Arabic</span></div>
<div class="meta" style="color:var(--text-3);font-family:var(--font-mono);font-size:12px;margin-top:3px"><span data-lang="fr">Courant</span><span data-lang="en">Fluent</span></div>
</li>
</ul>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact">
<div class="section-head">
<p class="eyebrow">05 · Contact</p>
<h2 data-lang="fr">Travaillons ensemble.</h2>
<h2 data-lang="en">Let’s work together.</h2>
</div>
<div style="display:grid;grid-template-columns:140px 1fr;gap:36px">
<div></div>
<div>
<p class="lede" style="margin-bottom:24px">
<span data-lang="fr">Disponible pour discuter de vos projets et opportunités — Team Lead, architecture .NET, plateformes de paiement, ou simplement échanger.</span>
<span data-lang="en">Available to discuss projects and opportunities — Team Lead roles, .NET architecture, payment platforms, or just to chat.</span>
</p>
<div style="display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
<a href="https://linkedin.com/in/khalilbenazzouz" target="_blank" rel="noopener" style="display:flex;justify-content:space-between;padding:14px 18px;background:var(--bg-elev);border-bottom:1px solid var(--border)">
<span style="color:var(--text-3);font-family:var(--font-mono);font-size:12px">LINKEDIN</span>
<span>/in/khalilbenazzouz ↗</span>
</a>
<a href="https://github.com/khalilbenaz" target="_blank" rel="noopener" style="display:flex;justify-content:space-between;padding:14px 18px;background:var(--bg-elev);border-bottom:1px solid var(--border)">
<span style="color:var(--text-3);font-family:var(--font-mono);font-size:12px">GITHUB</span>
<span>@khalilbenaz ↗</span>
</a>
<a href="blog.html" style="display:flex;justify-content:space-between;padding:14px 18px;background:var(--bg-elev)">
<span style="color:var(--text-3);font-family:var(--font-mono);font-size:12px">BLOG</span>
<span data-lang="fr">Lire le blog →</span><span data-lang="en">Read the blog →</span>
</a>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap foot">
<div>© 2026 Khalil Benazzouz</div>
<div style="display:flex;gap:18px">
<a href="blog.html">Blog</a>
<a href="https://linkedin.com/in/khalilbenazzouz" target="_blank" rel="noopener">LinkedIn</a>
<a href="https://github.com/khalilbenaz" target="_blank" rel="noopener">GitHub</a>
</div>
</div>
</footer>
<style>
@media (max-width: 720px) {
.hero-grid { grid-template-columns: 1fr !important; }
.creds-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 920px) {
.creds-grid { grid-template-columns: 1fr 1fr !important; }
}
</style>
</body>
</html>