-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
595 lines (522 loc) · 33.2 KB
/
index.html
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
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<html >
<head>
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h1>Portfolio d'Antoine Hoebaer</h1>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Afficher tout</button>
<button class="btn" onclick="filterSelection('moi')"> A propos de moi </button>
<button class="btn" onclick="filterSelection('job')"> Insertion professionnelle </button>
<button class="btn" onclick="filterSelection('hackaton')"> Hackaton</button>
<button class="btn" onclick="filterSelection('Conférences')"> Conférences</button>
<button class="btn" onclick="filterSelection('malte')"> Malte</button>
<button class="btn" onclick="filterSelection('formation')"> Formations</button>
<button class="btn" onclick="filterSelection('hardware')"> Hardware</button>
<button class="btn" onclick="filterSelection('recap')"> Tableau récapitulatif </button>
<button class="btn" onclick="filterSelection('curriculum_vitae')"> CV & contact</button>
</div>
<div class="row">
<div class="theme moi quarter">
<div class="content">
</div>
</div>
<div class="theme moi quarter">
<div class="content">
<div>
<h3>En quelques mots</h3>
</div>
<div>
<p>
<ul>
<li>Statut : Etudiant en BAC 3 en Technologie de l'Informatique à l'EPHEC</li>
<li>Age : 23 ans</li>
<li> Intérêts : <ol>
<li>intelligence artificielle (deep learning)</li>
<li>developpeur backend (Laravel 5.8)</li>
</ol>
</li>
<li>Projet futur : Déployement d'un site web hébergé sur Raspberry Pi</li>
</ul>
</p>
</div>
</div>
</div>
<div class="theme moi quarter">
<div class="content">
<img clas="" src="img/moi.png" alt="hackaton" style="width:100%">
</div>
</div>
<div class="theme moi quarter">
<div class="content">
</div>
</div>
<!-- theme sciensano -->
<div class="theme intro job">
<h2>Sciensano</h2>
<p>
Sciensano est le produit de la fusion récente entre l'Institut Scientifique de Santé Publique (ISP) ainsi que du Centre d’Étude et de Recherches Vétérinaires et Agrochimiques.
<br>
Sciensano fut mon premier job d'étudiant dans la sphère de l'informatique.
J'y ai passé quelques mois, étalé sur plusieurs années, et ce, dans différents services.
</p>
</div>
<div class="theme job third">
<div class="content">
<img src="img/sciensano/chiffresciensano.jpg" alt="sciensano" style="width:100%">
<h5>Covid19</h5>
</div>
</div>
<div class="theme job third vert">
<h4 class="title_text">Environnement</h4>
<p>
J'ai essentiellement exercé mes jobs d'étudiants dans le service IT, plus spécifiquement dans le service Helpdesk.
Et j'y ai découvert plusieurs équipes composé de gens formidables. Travailler avec eux a été un véritable plaisir.
<br>
Cependant, chaque service avait sa propre ambiance, ce qui ne m'a pas empecher de m'y intégrer très facilement.
</p>
</div>
<div class="theme job third">
<div class="content">
<img src="img/sciensano/sciensanochiffre.jpg" alt="sciensano" style="width:100%">
<h5>Quelques chiffres ...</h5>
</div>
</div>
<div class="theme job third vert_clair">
<h4 class="title_text">Activités</h4>
<p>
Durant mes différents job d'étudiants à Sciensano, j'ai pu travailler dans différents services, notamment HR, IT, Dispatching.
Au cours de ces différentes missions, j'ai essentiellement travaillé pour le coté Helpdesk du service IT.
<br><br>
J'y effectuais différentes tâches très variées tel que la préparation des laptops pour les différents services, l'installation des desktops des nouveaux employés et de manière plus générale, je répondais aux diverses requêtes (tickets) émanant des autres services.
<br><br>
Evidemment on y parlait néérlandais, anglais et français, ce qui me permit de recupérer le néérlandais que j'avais quelque peu perdu.
</p>
</div>
<div class="theme job third">
<div class="content">
<img src="img/sciensano/sciensano.jpg" alt="sciensano" style="width:100%">
<h5>ISP & CERVA = Sciensano</h5>
</div>
</div>
<div class="theme job third vert_fonce">
<h4 class="title_text">Enseignement</h4>
<p>
Cette expérience fut très enrichissante en enseignement autant du point de vue de la vie en entreprise que des connaissances en informatique.
Si certaines de mes missions comme du classement ou encore la gestion de stock, étaient moins captivantes que d'autres.
<br><br>
Je suis content d'avoir pu travailler dans différents services car cela m'a permit de rencontrer des gens formidables d'une part et de l'autre d'avoir une vue plus globale quant au fonctionnement de l'entreprise, en comprendre ces rouages plus en profondeur.
</p>
</div>
<!-- theme hackaton -->
<div class="theme intro hackaton">
<h2>Wirehack</h2>
<p>
Hackaton accompagné par Immoweb et Deloitte
</p>
</div>
<div class="theme hackaton third">
<div class="content">
<p>
Ce hackaton fut mon premier (et le seul jusqu'a présent) et s'est déroulé durant un weekend à Bruxelles.
J'y ai participé avec quelques amis par pure curiosité.
<br>
<br>
Le thême de l'activité était "Le batiment" et son but était de développer et mettre en place un micro-projet en lien avec le theme en moins de deux jours.
<br>
<br>
Samedi, nous avons créé des groupes, brainstormé, choisi les projets les plus intéressants et commencé à travailler dessus.
</p>
<img src="img/hackaton/wirehack.jpg" alt="hackaton" style="width:100%">
<h5>Wirehack edition 2018 !</h5>
<p>
J'ai choisi un projet dont le but était d'utiliser la technologie du blockchain pour stocker et sécuriser l'ensemble des information d'un batiment tel que
<ul>
<li>l'historique de ses travaux de rénovations, réparations,</li>
<li>ses scores énergétiques,</li>
<li>revues et commentaires,</li>
<li>l'historique des propriétaires,</li>
<li>etc.</li>
</ul>
</p>
</div>
</div>
<div class="theme hackaton third">
<div class="content">
<p>2 ans plus tard j'ai toujours l'impression que cette idée était prometteuse. Malheureusement, la technologie du blockchain était en dehors de nos compétences de l'époque, nous qui venions à peine de rentrer en Bac 2.
<br>
Le projet n'a pas abouti et nous ne l'avons défendu que théoriquement, sans rien de fonctionnel.
</p>
<img src="img/hackaton/place.jpg" alt="hackaton" style="width:100%">
<h5>Les locaux</h5>
</div>
</div>
<div class="theme hackaton third">
<div class="content">
<img src="img/hackaton/preuve2.jpg" alt="hackaton" style="width:100%">
<h5 class="annot_Right">Attestation de participation</h5>
<p>
Meme si l'ambiance était assez bonne, mon expérience à ce hackaton a été ternie par un membre assez oppressant tout au long du weekend.
Autre point noir, les groupes étaient très mal répartis en matière de compétences en informatique (certains faisaient des masters, d'autres n'étaient même pas en informatique, ...)
<br>
Selon moi je n'étais pas encore réellement près pour un nouvel hackaton après ce dernier.
Cela dit, étant maintenant en BAC3, je retenterais bien l'expérience, qui sait ?
</p>
</div>
</div>
<!-- theme conférence -->
<div class="theme intro Conférences">
<h2>Conférences</h2>
<p>
Au cours de mon bachelier j'ai pu participer à quelques conférences ainsi que présentations comme par exemple le DevDay, des présentations de la société Odoo, une conférence organisée par le Cercle francophone des Décideurs des technologies du Numérique, des activités internes à l'EPHEC (FREE) ...
</p>
</div>
<div class="theme Conférences third">
<div class="content">
<p>
La conférence organisée par le CfDtN (Cercle francophone des Décideurs des technologies du Numérique) m'a permis de rencontrer de nombreuses personnes travaillant dans le domaine de l'informatique.
<br>
<br>
J'y ai appris un grand nombre de choses tel que l'état actuel des entreprises travaillant partiellement, voir totalement dans le domaine de l'informatique.
Mais aussi les compétences recherchées par l'employeurs, les softs skills, ...
<br>
<br>
Cette rencontre avec les professionels du métier ainsi que d'autres étudiants (UCL) me permit d'avoir une vision plus complète de la période post-étude.
</p>
<br>
<img src="img/conférences/cercles du lac.jpg" alt="hackaton" style="width:100%">
<h5 >Cercle du Numérique</h5>
</div>
</div>
<div class="theme Conférences third">
<div class="content">
<img clas="bigImage" src="img/conférences/devday.png" alt="hackaton" style="width:100%">
<h5>Devday</h5>
</div>
</div>
<div class="theme Conférences third">
<div class="content">
<p>
<h5>Odoo</h5>
Grâce à la présentation d'Odoo j'ai pu avoir un aperçu interne d'un société 100% informatique, cependant je regrette le fait qu'il n'y a pas une plus grande diversité des entreprises faisant leur promotion au sein de l'EPHEC.
Au lieu d'avoir 2 présentations, j'aurais aimé voir une seconde entreprise. Quoi qu'il en soit, cette présentation fut toujours intéressante car présentait un cas concret d'entreprise.
</p>
<img class="pic_odoo" src="img/conférences/odoo2.png" alt="hackaton" style="width:100%">
<p>
<h5>Devday</h5>
Le Devday a amené un grand nombre de themes divers particulièrement intéressants.
J'ai fait le choix d'aller à celles qui me parlaient le plus (intelligence artificielle notamment), ce que, avec le recul, je regrette un peu.
J'aurais du profiter de cette opportunité pour assister à des présentations abordants des sujets que je maitrise moins, voir pas du tout.
<br>
<br>
Finalement, j'ai trouvé les présentations très intéressantes mais j'ai souvent été perdus durant ces dernières.
A mon humble avis ce genre de conférente est réservée à un public plus averti, expérimenté que je ne l'étais à ce moment là.
</p>
</div>
</div>
<!-- theme Malte -->
<div class="theme malte third ">
<div class="content">
<h4>Meilleur ...</h4>
<p>
En début de BAC3, un voyage a Malte a été organisé et j'ai rejoins un groupe de 5 étudiants que je ne connaissais pas, pour la plupart.
Ce groupe avait une bonne dynamique et je me suis très rapidement intégré à ce dernier.
<br>
<br>
Une fois sur place il nous a fallu nous organiser (notamment pour les courses, les activités ainsi que la question de la mobilité).
Etant arrivé quelques jours plus tot nous avons eu l'opportunité de planifier différentes activités en plus de celles organisée par l'EPHEC.
<br>
Durant toute la durée du séjour, nous avons parlé anglais à l'extérieur ce qui était un très bon exercice en situation réelle.
</p>
<img src="img/malte/bro.jpg" alt="Malte" style="width:100%">
</div>
</div>
<div class="theme malte third">
<div class="content">
<h4 style=" text-align: center;">... voyage ...</h4>
<img src="img/malte/bro3.jpg" alt="Malte" style="width:100%">
</div>
</div>
<div class="theme malte third">
<div class="content">
<h4 style="float: right;">... EVER !!!</h4>
<img src="img/malte/bro2.jpg" alt="Malte" style="width:100%">
<p>
En ce qui concerne les activités organisées par l'EPHEC, je retiens surtout la présentation de l'entreprise de cyber-sécurité PwC.
Elle était très intéressante et abordable avec notre niveau. L'équipe qui présentait l'entreprise était jeune et savait comment capter notre attention.
<h5>En résumé</h5>
C'était, pour moi, la première fois que je partais aussi loin avec un groupe de cette taille et ce fut toute une expérience.
Nous avions une bonne cohésion de groupe, les activités étaient relativement bien organisés et riches en contenu et de plus, on c'est bien amusé sur le coté.
<br>
<br>
On me reproposerait le voyage, je ne dirait pas non.
</p>
</div>
</div>
<div class="theme malte one">
<div class="content">
<img src="img/malte/port.jpg" alt="Malte" style="width:100%">
<h6 style="text-align: right;">Une dernière pour la route ?</h6>
</div>
</div>
<!-- theme python -->
<div class="theme duble_intro formation half">
<h2>Sololearn</h2>
</div>
<div style="text-align: right;" class="theme duble_intro formation half">
<h2>Git</h2>
</div>
<div class="theme formation third">
<div class="content">
<img class ="" src="img/formation//certif.jpg" alt="certificat" style="width:100%">
<h5>Mon certificat de formation Python</h5>
</div>
</div>
<div class="theme formation third">
<div class="content">
<p>
</p>
</div>
</div>
<div class="theme formation third">
<div class="content">
<img class ="" src="img/formation/github.jpg" alt="github" style="width:100%">
<h5>L'après formation</h5>
</div>
</div>
<div class="theme formation third">
<div class="content">
<p>
Dans le cadre de mon TFE ainsi que de mon stage, j'ai été amené à travailler en Python.
Je l'avais déjà pratiqué quelques temps auparavant mais plus depuis mon entrée à l'EPHEC.
Pour me remettre sur les rails j'ai donc décidé de suivre une formation sur l'application mobile Sololearn.
<br>
<br>
Je n'ai pas eu trop de mal à me remettre dans le bain, Python étant un langage assez simple de par sa syntaxe.
Cette formation m'a notamment appris l'orienté objet, notion que je n'avais pas encore acquise dans ce langage.
<br>
J'ai aussi suivi d'autres formations sur cette application tel que Java, C++ ou encore le C, mais n'en ai terminé aucune parmi ces dernières.
<br>
<br>
Sololearn a une approche plus orienté marketing que d'autres formations avec une communauté, un système de défi, etc, ce qui, je trouve, est un avantage.
J'ai trouvé cette application très utile pour <b>commencer</b> à apprendre un nouveau langage ou (dans mon cas) se remettre à jour.
Cependant je ne baserais pas entierement l'apprentissage d'un langage dessus, la formation reste très théorique malgré le nombre conséquent d'exercices.
<br>
</p>
</div>
</div>
<div class="theme formation third">
<div class="content">
<img class =" smartphone" src="img/formation/courses2.jpg" alt="courses" style="width:100%">
<h5>Mes autres formations</h5>
</div>
</div>
<div class="theme formation third">
<div class="content">
<p>
Dans le courant de ma seconde année à l'EPHEC, j'ai participé à une formation Github avec plusieurs étudiants de l'EPHEC.
Je ne suis pas un très grand utilisateurs de git, c'est d'ailleurs l'une de mes faiblesses les plus flagrante.
<br>
<br>
J'ai donc participé à cette formation dans le but de mieux comprendre l'outil. J'y ai appris à utiliser git desktop ainsi que les commandes de bases.
<br>
La formation était simple à comprendre et très bien expliquée. Je n'ai malheureusement pas eu l'occasion de m'y mettre sérieusement dans mon travail journalier.
<br>
<br>
Pour les projets de groupes, j'utilise encore principalement github et en ce qui concerne les projets personnels, je continue de travailler en local, ce qui, je sais, n'est pas très conseillé.
</p>
</div>
</div>
<!-- theme hardware -->
<div class="theme intro hardware">
<h2>Construire sa propre tour</h2>
<p>
Pour palier à mon laptop se faisant vieux, je me suis lancé dans le montage de mon propre desktop.
</p>
</div>
<div class="theme hardware third">
<div class="content">
<img src="img/hardware/pc2.jpg" alt="challenge" style="width:100%">
<p>
<h5>Les débuts </h5>
Ne connaissant rien en montage d'ordinateur, je me suis donc renseigné sur le sujet durant les 2 mois de mon job d'étudiant.
<br>
J'ai commencé par suivre des tutoriels de montages. Je me suis inscrit sur des groupes d'hardware. J'ai commencé à sélectionner mes composants en ligne tout en demandant l'avis de la communauté quant à l'équilibrage de ces derniers et éviter ainsi d'avoir des composants qui limiteraient les performances de la configuration générale.
<br>
</p>
</div>
</div>
<div class="theme hardware third">
<div class="content">
<h5>Contexte</h5>
<p>
Il va sans dire que les études d'informatique ne peuvent se passer de matériel informatique.
<br>
Je viens de finir ma première année à l'EPHEC et mon laptop commençait à atteindre ces limites.
Je décide donc d'investir dans un dekstop assez puissant pour ne pas être dépassé d'ici quelques années et disposant d'une puissance de calcul intéressante pour l'entrainement d'IA.
Pour financer ce projet j'ai donc décroché un job d'étudiant d'une durée de 2 mois à Sciensano.
<br>
Ne partant de rien, il me fallait un setup complet (composants d'ordinateur mais aussi écran, clavier, casque, ...)
</p>
<img src="img/hardware/commande.jpg" alt="commande" style="width:100%">
</div>
</div>
<div class="theme hardware third">
<div class="content">
<img src="img/hardware/pc3.jpg" alt="network" style="width:100%">
<p>
Une fois la configuration ai été la plus optimisé possible. L'argent de mon job d'étudiant me permis de passer commande d'une traite, il ne restait plus que le montage.
<br>
Le montage m'a pris une bonne partie de la journée : entre le déballage, les précautions prises car je me sais parfois très maladroit, l'installation des composants puis de windows.
Le premier démarrage c'est passé sans accro, se dont je suis personnellement très fier. Léger détail : j'ai du rebrancher quelques cables car le coté RGB ne fonctionnait pas sur certains ventilateurs.
</p>
</div>
</div>
<div class="theme hardware half ">
<div class="content">
<h5>Retour d'expérience</h5>
Ce fut un chouette projet, finançé et entierement réalisé de manière 100% autonome et sans aucun problème tout du long. Je suis très fier du résultat accompli.
J'en suis ressorti avec une plus grande confiance en mes capacités et un nouveau domaine de connaissances.
<br>
Depuis la fin de ce projet, j'ai arreté de m'interesser à l'hardware mais mon TFE, grandement dépendant des cartes graphiques m'y a ramené.
Il n'est pas impossible que dans le futur je fasse un nouvel investissement (carte graphique) pour améliorer les performances lié à l'entrainement des IA.
</div>
</div>
<div class="theme hardware half ">
<div class="content">
</div>
</div>
<!-- Tableau récap -->
<div class="theme recap one">
<h2>Tableau récapitulatif</h2>
<p>
Résumé de l'ensemble des activités
</p>
<div class="content">
<table style="width:100%" class="table table-striped">
<tr>
<th scope="col">Theme</th>
<th scope="col">Activité</th>
<th scope="col">Heures max</th>
<th scope="col">Heures réelles</th>
<th scope="col">Preuves</th>
</tr>
<tr>
<td style="font-weight: bold;">Insertion professionnelle</td>
<td style="font-weight: bold;">Job d'étudiant</td>
<td style="font-weight: bold;">10h</td>
<td style="font-weight: bold;">334h</td>
<td><a href="img/sciensano/preuve.jpg" download><button style="width: 60%" type="button" class="btn btn-primary">Fiche de paye</button></a></td>
</tr>
<tr>
<td style="font-weight: bold;">Developpement</td>
<td style="font-weight: bold;">Hackaton</td>
<td style="font-weight: bold;">10h</td>
<td style="font-weight: bold;">16h</td>
<td><a href="img/hackaton/preuve2.jpg" download><button style="width: 60%" type="button" class="btn btn-primary">Mail de participation</button></a></td>
</tr>
<tr>
<td>Conférences</td>
<td>Cercle du Numérique</td>
<td></td>
<td>3h</td>
<td><button type="button" class="btn btn-primary" onclick="filterSelection('Conférence')">Voir Conférences</button></td>
</tr>
<tr>
<td>Conférences</td>
<td>Odoo</td>
<td></td>
<td>1h30</td>
<td><a href="img/conférences/preuve.jpg" download><button style="width: 60%" type="button" class="btn btn-primary">Mail de participation Odoo</button></a></td>
</tr>
<tr>
<td>Conférences</td>
<td>Devday</td>
<td></td>
<td>8h</td>
<td><button type="button" class="btn btn-primary" onclick="filterSelection('Conférence')">Voir Conférences</button></td>
</tr>
<tr>
<td style="font-weight: bold;">Conférences</td>
<td style="font-weight: bold;">Total :</td>
<td style="font-weight: bold;">10h</td>
<td style="font-weight: bold;">12h30</td>
<td ><button type="button" class="btn btn-primary" onclick="filterSelection('Conférence')">Voir Conférences</button></td>
</tr>
<tr>
<td style="font-weight: bold;">Malte</td>
<td style="font-weight: bold;">Voyage linguistique</td>
<td style="font-weight: bold;">10h</td>
<td style="font-weight: bold;">5 jours</td>
<td style="font-weight: bold;"><button type="button" class="btn btn-primary" onclick="filterSelection('malte')">Voir Malte</button></td>
</tr>
<tr>
<td>Formations</td>
<td>Formation python</td>
<td></td>
<td>10h</td>
<td><a href="img/formation/certif.jpg" download><button style="width: 60%" type="button" class="btn btn-primary">Certificat de formation</button></a></td>
</tr>
<tr>
<td>Formations</td>
<td>Formation Github</td>
<td></td>
<td>2h</td>
<td><button type="button" class="btn btn-primary" onclick="filterSelection('formation')">Voir Formation</button></td>
</tr>
<tr>
<td style="font-weight: bold;">Formations</td>
<td style="font-weight: bold;">Total</td>
<td style="font-weight: bold;">10h</td>
<td style="font-weight: bold;">12h</td>
<td style="font-weight: bold;"><button type="button" class="btn btn-primary" onclick="filterSelection('formation')">Voir Formation</button></a></td>
</tr>
<tr>
<td style="font-weight: bold;">Projet personnel</td>
<td style="font-weight: bold;">Hardware</td>
<td style="font-weight: bold;">10h</td>
<td style="font-weight: bold;">24h</td>
<td style="font-weight: bold;"><button type="button" class="btn btn-primary" onclick="filterSelection('hardware')">Voir Hardware</button></a></td>
</tr>
<tr>
<td style="font-weight: bold;">Total</td>
<td></td>
<td style="font-weight: bold;">60h</td>
<td style="font-weight: bold;">518h30</td>
<td></td>
</tr>
</table>
</div>
</div>
<!-- CV & Contact -->
<div class="theme curriculum_vitae half">
<img style="margin-top: 20px" src="img/cv.png" alt="Curriculum vitae" >
<div>
<a href="Cv.pdf" download><button type="button" class="btn btn-primary">Télécharger mon CV</button></a>
</div>
</div>
<div class="theme curriculum_vitae half contact">
<form action="https://formspree.io/mnqgqawg" method="POST" enctype="multipart/form-data">
<div>
<h4>Vous pouvez aussi me contacter </h4>
</div>
<div class="form-group">
<label id="mail">
Votre email : <input type="email" name="_replyto" class="form-control">
</label>
</div>
<div class="form-group">
<label>
Votre message : <textarea name="message" cols="30" rows="10" class="form-control"></textarea>
</label>
</div>
<button class="btn btn-primary" type="submit">Envoyer</button>
</form>
</div>
</div>
</body>
</html>