-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwork.html
More file actions
802 lines (670 loc) · 60.1 KB
/
Copy pathwork.html
File metadata and controls
802 lines (670 loc) · 60.1 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
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
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Rafael Marques E-Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/slicknav.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/css/themify-icons.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/nice-select.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="body-bg">
<script>
function displayModal() {
let url = new URL(location.href);
let modal = url.searchParams.get("modal");
document.getElementById(modal).click();
}
</script>
<!--? Preloader Start -->
<div id="preloader-active">
<div class="preloader d-flex align-items-center justify-content-center">
<div class="preloader-inner position-relative">
<div class="preloader-circle"></div>
<div class="preloader-img pere-text">
<b>R.M</b>
</div>
</div>
</div>
</div>
<header>
<!-- Header Start -->
<div class="header-area header-transparent">
<div class="main-header header-sticky">
<div class="container-fluid">
<div class="menu-wrapper d-flex align-items-center justify-content-between">
<!-- Logo -->
<div class="logo logo2">
<a href="index.html"> Rafael MARQUES </a>
</div>
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li><a href="index.html">Accueil</a></li>
<li><a href="about.html">À propos de moi</a></li>
<li><a href="blog.html">Compétences</a>
<ul class="submenu">
<li><a href="blog.html#competencetechnique">Compétences techniques</a></li>
<li><a href="blog.html#competencetransverses">Compétences transverses</a></li>
</ul>
</li>
<li><a href="work.html">Mes réalisations</a></li>
<li><a href="parcours.html">Mon parcours</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
</header>
<!-- Header End -->
</header>
<main>
<!--? Hero Start -->
<div class="slider-area2">
<div class="slider-height2 hero-overly d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="hero-cap hero-cap2 text-center pt-80">
<h2>Mes projets</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hero End -->
<!--? Gallery Area Start -->
<div class="gallery-area pt-30 pb-40">
<div class="container-fluid p-0 fix">
<div class="row">
<div class="col-xl-6 col-lg-4 col-md-6 pc">
<div role="button" data-toggle="modal" data-target=".protocole" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery1.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 5
</div>
<div class="thumb-content">
<h3><span>Protocole F01</span>Informatique</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".protocole" id="protocole"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-4 col-md-6 mobile">
<div role="button" data-toggle="modal" data-target=".protocole" class="single-gallery mb-30 button_cursor">
<div class="gallery-img mobile" style="background-image: url(assets/img/gallery/gallery1_mobile.jpg);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 5
</div>
<div class="thumb-content">
<h3><span>Protocole F01</span>Informatique</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".protocole" id="protocole"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div role="button" data-toggle="modal" data-target=".vgaia" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery2.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 4
</div>
<div class="thumb-content">
<h3><span>V-GAIA</span>Informatique</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".vgaia" id="vgaia"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div role="button" data-toggle="modal" data-target=".thedoor" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery3.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 3
</div>
<div class="thumb-content">
<h3><span>The Door</span>PFH</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".thedoor" id="thedoor"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div role="button" data-toggle="modal" data-target=".ods" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery4.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 4
</div>
<div class="thumb-content">
<h3><span>OPENDATASOFT</span>Informatique</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".ods" id="ods"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div role="button" data-toggle="modal" data-target=".goodrentree" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery5.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Eté 2018
</div>
<div class="thumb-content">
<h3><span>GR</span>Projet Perso</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".goodrentree" id="goodrentree"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-4 col-md-6 pc">
<div role="button" data-toggle="modal" data-target=".springtech" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery6.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 4
</div>
<div class="thumb-content">
<h3><span>Spring Tech</span>PFH</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".springtech" id="springtech"></button>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-4 col-md-6 mobile">
<div role="button" data-toggle="modal" data-target=".springtech" class="single-gallery mb-30 button_cursor">
<div class="gallery-img" style="background-image: url(assets/img/gallery/gallery6_mobile.png);"></div>
<div class="thumb-content-box">
<div class="semestre">
Semestre 4
</div>
<div class="thumb-content">
<h3><span>Spring Tech</span>PFH</h3>
<button type="button" class="fas fa-angle-right beuteun" data-toggle="modal" data-target=".springtech" id="springtech"></button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade protocole" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>PROTOCOLE F01
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</h4>
</div>
<div class="modal-body">
<p>Protocole F01 a été l'un des projets que j'ai préféré: Une très bonne entente d'équipe, un projet intéressant techniquement, mais également de par son contexte
et le fait que cela aurait pu être un réel projet tout en ayant une histoire de film d'espionnage.
</p>
<br>
<h5>Description</h5>
<p>
Protocole F01 est lié à une histoire:<br>
2021, une troisième guerre mondiale risque d’éclater, les Etats-Unis cherchent à empêcher cette nouvelle guerre en dérobant les plans d'attaques de la Corée du Nord. Le Protocole F-01 réunit les meilleurs espions missionnés pour récupérer ces informations.</p>
<p>Un espion doit alors se rendre sur place afin de récuperer une clé USB dissimulée quelque part par un agent infiltré.
La problématique est que si l'espion se fait controler avec la clé USB ou un ordinateur ayant envoyé ces données il sera repéré.
C'est là que Protocole-F01 intervient: un envoi automatisé, chiffré, et par un réseau sécurisé de tout le contenu d'une clé USB, grâce à... une deuxième clé USB !
<p>Avec l'utilisation d'un système Tails sur clé USB, mais également de plusieurs scripts bash et python, l'utilisation était la plus simple possible.
L'espion n'avait qu'a branché la première clé, démarrer l'ordinateur, puis brancher la deuxième clé afin de chiffrer les données de celle-ci et de les envoyer de façon sécurisée.
</p>
<h5>
Objectifs
</h5>
<p>
Le produit final allait principalement tourner autour de 2 éléments : Le système qui envoie les données, et celui qui les réceptionne.
Le système envoyant les données se trouvait alors sur Tails, une distribution Linux basée sur Debian, qui avait pour particularité de préserver l’anonymat et la confidentialité.</p>
<p>En effet, ce système était installé sur clé USB, et était totalement vierge à chaque redémarrage !
Il avait aussi déjà Tor d’installé, ce qui nous permettrait d’envoyer nos données chiffrées et de manière totalement anonyme.</p>
<p>Nous avions alors plusieurs objectifs sur Tails:</p>
<p>Tout d’abord, il fallait pouvoir activer une petite partition du système qui serait persistante et chiffrée, afin de conserver les services nécessaires, et nos scripts d’automatisation.</p>
<p>Il fallait ensuite pouvoir chiffrer les données demandées, grâce à l’outil Veracrypt.
Effectivement, même si le réseau Tor chiffre déjà les données, la connexion entre le premier nœud de ce réseau, et notre système n’est pas chiffré ! Il fallait alors trouver un moyen que les données soient chiffrées de bout en bout.<br>
Tor était donc la prochaine étape : pouvoir se connecter à ce réseau et envoyer les données à la machine réceptrice.</p>
<p>Après avoir réussi toutes ces étapes à la main, il fallait tout automatiser !
Pour le serveur récepteur des données chiffrées, il fallait tout simplement qu’il soit connecté sur le réseau Tor.</p>
<p>La dernière étape était bien évidemment de posséder une deuxième clé USB, avec des données dites « sensibles » afin de pouvoir envoyer celles-ci de manière sécurisée et anonyme.
<h5>Résultats</h5>
<p>Le résultat a tout simplement été… un succès ! L’automatisation fonctionnait parfaitement, et il suffisait de brancher la clé USB contenant Tails, attendre que le script demande d’insérer la 2ème clé USB contenant les données, et le tour était joué ! Un envoi parfaitement sécurisé, qui ne laisse aucune trace sur l’ordinateur hôte, ou sur le système Tails.</p>
</p>
<h5>Ma contribution</h5>
<p>J'ai beaucoup participé sur ce projet, car j'étais très intéréssé par la partie technique, et que mes coéquipiers ont pu travailler sur d'autres tâches.
</br>
Ainsi, j'ai pu me concentrer sur les objectifs suivants:
</p>
<ul>
<li>Scripts d'automatisation ( bash et python )</li>
<li>Paramétrage de Tails et de Tor</li>
<li>Chiffrement du contenu de la clé usb (Veracrypt)</li>
</ul>
</div>
<div class="modal-footer">
<div class="container">
<div class="row competence-espace">
<h5 class="col-12 text-center modal-text-title">Compétences acquises</h5>
</div>
<div class="row justify-content-center">
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=systeme">Système</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=reseaux">Réseaux</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=python">Python</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=autonomie">Autonomie</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=flexibilite">Flexibilité</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=organisation">Organisation</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade vgaia" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>VGAIA
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</h4>
</div>
<div class="modal-body">
<p>Le projet VGAIA a été un gros bond vers l’avant qui nécessitait de nombreuses capacités, cela m’a permis de voir une net amélioration depuis mon arrivée à INTECH.<br>
Il aura surtout été une grosse introduction à une technologie que j’utilise quotidiennement en entreprise, et dans mes projets personnels: la virtualisation.</p>
<h5>Description</h5>
<p>VGAIA est un outil permettant de fournir et d’automatiser la création d’une infrastructure et l'installation de services sur celles-ci.</p>
<p>Mais concrètement, ça veut dire quoi ?</p>
<p>Cet outil se présentait sous forme d’une plateforme web, avec plusieurs champs à remplir : système d’exploitation, mémoire vive, nombre de CPU, capacité de stockage, services a installer ( MySQL, Apache, Postfix, Bind9…).</p>
<p>Ces champs remplis selon les besoins des utilisateurs, étaient ensuite récupérés et utilisés par l'outil de provisionning Ansible.
Ce logiciel de provisionning, comme son nom l’indique, allait créer la machine demandée, et la provisionner, c’est-à-dire, lui apporter les paquets et les configurations nécessaires afin d’avoir une machine prête à l’emploi en seulement quelques minutes.</p>
<p>Cette utilisation qui peut paraitre très simple du point de vue de l’utilisateur, incluait tout de même de nombreux services.</p>
<h5>Objectifs</h5>
<p>Il fallait tout d’abord créer une interface WEB, et l’exposer sur un DNS local (Bind9) à l’aide d’un serveur LAMP (Linux Apache MySQL PHP).</p>
<p>Nous devions aussi installer Ansible et le configurer afin qu’il récupère tous les champs nécessaires à la création de la machine.</p>
<p>Afin de pouvoir héberger nos machines virtuelles, nous avions besoin d’une autre équipe dont le projet était la création d’un VCenter, un serveur de gestion centralisée de machines virtuelles.
Nous devions alors configurer un client VSphere, qui se connecterait à ce VCenter afin d’y installer les machines sur un ESXI dédié.<br>
Un ESXI est tout simplement un hyperviseur, donc un service permettant au serveur hôte de prendre en charge plusieurs machines virtuelles.</p>
<p>Il fallait ensuite pouvoir envoyer les informations de connexion à l’utilisateur, par mail, qu’il devra changer dès sa première connexion.</p>
<h5>Résultats</h5>
<p>Je ne vais pas vous cacher que ce projet a présenté une difficulté qui a altéré grandement l’avancée du projet : L’esprit d’équipe.<br>
En effet, il y a eu un gros manque de communication dans cette équipe, ce qui a valu de n’avoir aucun suivi sur nos tâches.</p>
<p>Je vous invite à lire l’article <a href="blog.html?modal=equipe">esprit d’équipe</a> pour en savoir plus!</p>
<p>Malgré cela, quand nous nous sommes rendu compte de la charge de travail qu’il restait à effectuer afin de rendre le produit dans les temps, nous avons d’autant plus travaillé afin qu'il soit fonctionnel à la date prévue.
Lors de la date de fin du projet, nous étions capable de fournir une machine virtuelle à notre utilisateur selon ses besoins, excepté quelques services qui n’étaient pas disponibles.<br>
Par exemple, l’utilisateur pouvait avoir une machine virtuelle avec le système d’exploitation qu’il souhaitait, mais ne pouvait pas décider d’installer Postfix sur celle-ci.</p>
<p>Le projet n’a alors pas été une entière réussite, mais aura tout de même rempli les objectifs principaux.
Pour ma part, ce projet m’a beaucoup apporté techniquement, mais aussi humainement car il m’a fait comprendre l’importance d’avoir une équipe soudée et bien organisée.</p>
<h5>Ma contribution</h5>
<p>J’ai principalement travaillé sur 2 tâches:</p>
<p>La première, était la création de la plateforme WEB, afin de fournir une interface utilisateur pour paramétrer sa machine virtuelle.</p>
<p>Deuxièmement, j’ai également contribué à la configuration d’Ansible, afin qu’il récupère les options entrées par l’utilisateur, et qu’il s’en serve ensuite pour créer la machine virtuelle.</p>
</div>
<div class="modal-footer">
<div class="container">
<div class="row competence-espace">
<h5 class="col-12 text-center modal-text-title">Compétences acquises</h5>
</div>
<div class="row justify-content-center">
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=systeme">Système</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=virtualisation">Virtualisation</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=web">Web</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=autonomie">Autonomie</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=flexibilite">Flexibilité</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade thedoor" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>THE DOOR
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</h4>
</div>
<div class="modal-body">
<p>The Door a été un projet dont je me rappellerai toute ma vie. Je me souviens encore arriver à IN’TECH, sans une once de confiance en moi, très timide et ayant peur du jugement.
J’ai alors été mis dans un projet par défaut, sans savoir qu’il allait changer ma vie.</p>
<h5>Description</h5>
<p>Le projet The Door était extrêmement ambitieux, et tournait principalement autour d’un seul objectif : Animer une conférence sur la confiance en soi.</p>
<p>A la manière de David Laroche, nous devions alors réussir à redonner à un public, si possible externe à l’école, confiance en eux.
Autant vous dire que je n’aurais jamais choisi ce projet de moi-même, car comment peut-on animer une conférence parlant de confiance quand je n’ai moi-même pas confiance en moi ?
Vous l’aurez deviné, ce projet qui paraissait pourtant si simple, a été un véritable challenge pour moi, et présentait beaucoup plus qu’un seul objectif</p>
<h5>Objectifs</h5>
<p>Ceux-ci étaient très nombreux. Je pense que c’est le projet le plus ambitieux sur lequel j’ai travaillé, et j’aimerai vous décrire l’avancée de chacun d’entre eux, mais écrire un roman serait plus facile.<br>
Les voici :</p>
<ul>
<li> S’auto former sur la confiance en soi</li>
<li> Se former ensemble sur la prise de parole</li>
<li> Créer une page Facebook et la promouvoir</li>
<li> Créer une vidéo de promotion ( Facebook et youtube )</li>
<li> Créer des flyers, et les distribuer dans la rue</li>
<li> Publier un évènement sur le Facebook de l’école, passer dans les classes</li>
<li> Récupérer le plus de mails possible, puis créer une campagne de mail grâce à Mailchimp</li>
<li> Créer une billetterie pour la conférence</li>
<li> Trouver un endroit pour animer la conférence</li>
<li> Préparer les textes, les slides, et les présentations</li>
<li> Préparer des activités pour animer la conférence ( méditation, exercices, participation du public… )</li>
</ul>
<p>Je ne vais pas le cacher, certains de ces objectifs n’ont pas été une réussite totale. Je pense principalement à la communication qui visait à attirer des personnes externes à l’école pour qu’elles puissent participer à notre conférence.
Il est difficile d’avoir de la visibilité en seulement quelques mois et sans avoir de contacts, mais nous avons tout de même eu quelques personnes externes, qui nous ont toutes donné un retour positif !</p>
<p>Le projet dans sa généralité était une grande réussite, et chaque membre du groupe en est sorti avec une énorme confiance en soi, et une capacité à transmettre ses connaissances aisément.</p>
<h5>Présentations</h5>
<p>
La conférence se tenait en 4 parties, aussi nombreuses que les membres de l’équipe :
</p>
<ol>
<li style="font-weight: bold; list-style-type: decimal;"><div style="font-weight: normal;"> – La peur - Kevin</div></li>
<li style="font-weight: bold; list-style-type: decimal;"> <div style="font-weight: normal;">– Mindset et pensée positive - Quentin</div></li>
<li style="font-weight: bold;list-style-type: decimal;"> <div style="font-weight: normal;">– La visualisation - François</div></li>
<li style="font-weight: bold; list-style-type: decimal;"> <div style="font-weight: normal;">– Les éléments déclencheurs – Rafael (moi)</div></li>
</ol>
<h5>Ma contribution</h5>
<p>Parmi tous ces objectifs, j’ai pu participer à certains d’entre eux.</p>
<p>Bien évidemment mon auto-formation sur le développemnt personnel, mais j’ai aussi créé la page Facebook, et j’avais pour charge de la promouvoir, en utilisant la publicité sur ce réseau. J’ai ensuite fait des statistiques afin de savoir quelles techniques étaient les plus efficaces.<br>
J’ai également participé à la création de la vidéo, en cherchant les musiques, les vidéos à monter, et en écrivant les sous-titres.<br>
J’ai été présent à toutes les distributions de flyers, et pour la communication interne à l’école.<br>
Pour finir, j’ai bien évidemment préparé mon texte et ma présentation, et j’ai aidé mes collègues pour les leurs.</p>
<h5>Vidéo promotionnelle</h5>
<p>Vous pouvez retrouver cette même vidéo sur notre ancienne page Facebook <a href="https://www.facebook.com/thedoorofficial/videos/1999213916961320">>ici<</a> (Sortez les mouchoirs !) :</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fthedoorofficial%2Fvideos%2F1999213916961320%2F&show_text=false&width=560" style="border:none;overflow:hidden; padding: 5%;" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</div>
<h5>Flyers</h5>
<p>Voici les flyers que nous avons distribué:</p>
<p><img src="assets/img/gallery/flyer_the_door-final_recto.jpg" class="img-fluid" style="width:400px;height:600px;position:relative;display: block;margin-left: auto;margin-right: auto;"></p>
<p><img src="assets/img/gallery/flyer_the_door-final_verso.jpg" class="img-fluid" style="width:400px;height:600px;margin: 5%;display: block;margin-left: auto;margin-right: auto;"></p>
</div>
<div class="modal-footer">
<div class="container">
<div class="row competence-espace">
<h5 class="col-12 text-center modal-text-title">Compétences acquises</h5>
</div>
<div class="row justify-content-center">
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=autonomie">Autonomie</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=equipe">Esprit d'équipe</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=organisation">Organisation</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=communication">Communication</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade ods" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>OPENDATASOFT
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</h4>
</div>
<div class="modal-body">
<p>Cet article sera légèrement différent des autres réalisations, car il contiendra les 3 plus gros projets auxquels j’ai pu participer lors de mes 2 années d’alternance chez Opendatasoft. J’ai tenu à réunir ces 3 projets dans un seul article, car ils sont tous fortement liés, et comptent pour moi comme un seul très gros projet.
Le plan ne sera pas alors exactement le même que les autres articles, mais j’espère tout de même vous faire découvrir une grande partie ce que j’ai pu réaliser dans cette entreprise.</p>
<p>Lors de ces 2 années, j’ai occupé le poste de Site Reliability Engineer, ou SRE, qui consiste à construire une infrastructure fiable, et possiblement évolutive.<br>
Toutes les opérations nécessaires, seront alors exécutées à partir de différents logiciels d’automatisation, comme Saltstack, dont j’ai pu vous parler dans ma compétence <a href="blog.html?modal=virtualisation">virtualisation</a>, ou encore Terraform dont j’ai détaillé son utilisation dans l’article <a href="blog.html?modal=cloud">cloud</a>.</p>
<p>Avoir le plus d’automatisation possible, nous permettra ainsi de ne pas passer tout notre temps à des tâches « opérationnelles », tel que réparer des erreurs, répondre à des demandes clients, ou toute administration habituelle.<br>
Nous pourrons alors nous servir de ce temps gagné, afin de développer de nouvelles fonctionnalités.
Mais j’ai également eu de nombreux projets en tant que Devops. Plus précisément j’ai participé à la création d’un serveur d’intégration et de déploiement continus.</p>
<h4 class="ods_titre">Création du serveur d’intégration continue</h4>
<h5>Description</h5>
<p>Arrivé en stage chez Opendatasoft, j’ai dû recréer notre serveur d’intégration continue, qui était hébergé sur une vieille version d'Ubuntu, mais également sur une version de Jenkins Obsolète.
L’intégration continue consiste à tester le code modifié ou créé, avant que celui-ci ne soit déployé sur les environnements de production. Cela permet d’être certain que le nouveau code ne sera pas un souci pour l’application.</p>
<p>Jenkins, quant à lui, est un logiciel permettant de mettre en place cette intégration continue, de manière automatisée. Concrètement, cela veut dire qu’il lancera automatiquement des tests sur le nouveau code publié, sur une « branche de test ».
Cette automatisation est possible grâce à la connexion de Jenkins sur Github, et la détection automatique du code mis à jour sur Github.</p>
<h5>Objectifs</h5>
<p>Pour ce projet, j’ai dû décider d’un nouvel outil d’intégration continue, afin de choisir le plus adapté à nos besoins. Pour ce faire, il fallait tout d’abord que je sache les différents besoins des développeurs, j’ai ensuite pu organiser une réunion afin de présenter les avantages et inconvénients de chacun.<br>
C’est finalement encore une fois Jenkins qui a été choisi, mais dans sa version la plus récente.
Afin de me familiariser avec le code de la plateforme, AWS, et tous les services nécessaires au bon fonctionnement de ce serveur, j’ai fait tout cela … à la main !</p>
<p>Cela veut dire, pas de Saltstack, pas de Terraform, mais une création du serveur directement sur AWS, une installation de chaque service, et la configuration de Jenkins étape par étape.
Ce serveur était dans notre zone dite de pré-production, c’est-à-dire une infrastructure se rapprochant au maximum de celles de production, afin d’y effectuer les tests que nous souhaitons sans risquer une interruption de service ou des corruptions des données.</p>
<h5>Résultats</h5>
<p>Ce serveur d’intégration continue a été un long projet, non seulement car j’avais des connaissances limitées sur toutes les compétences nécessaires, mais aussi car j’étais tout seul à travailler sur ce projet.<br>
Il a tout de même été utilisé par toute l’équipe de développeurs durant environ 6 mois, et nous avons pu ensuite analyser tous les axes d’améliorations.
C’est ici que Docker intervient.</p>
<h4 class="ods_titre">Dockerisation de la plateforme: le déploiement continu</h4>
<h5>Description</h5>
<p>La dockerisation de la plateforme marquera le début de mon alternance.
Docker est un logiciel permettant de lancer ses applications dans des conteneurs isolés. Docker se rapproche de la virtualisation sur certains points, mais est à ne pas confondre avec cette autre technologie !<br>
Ce qu’il faut retenir est que Docker permet de lancer plusieurs applications isolées sur un système hôte et de faire du provisionning afin que ces applications soient fonctionnelles.
Dans notre cas, il nous aura servi pour faire ce que l’on appelle du déploiement continu.</p>
<p>Nous avons parlé d’intégration continue, qui consiste à tester le code avant de le déployer en production. Le déploiement continu lui, déploie le code ! Dans un environnement Docker isolé, bien évidemment, et sur un serveur de pré-production, n’ayez crainte.</p>
<p>Nous pouvons alors automatiser le déploiement d’une plateforme dont le code a été modifié. Cela sert concrètement à tester son code, comme le verrait l’utilisateur final en production: sur l’interface utilisateur.<br>
Nous pouvons alors voir nos nouvelles fonctionnalités, sans que cela soit déjà déployé en production.
Tout le monde peut alors aujourd’hui tester de nouvelles fonctionnalités, sans avoir besoin de connaissances pour déployer une plateforme en local, un clic sur un bouton et le nouvel environnement est prêt !</p>
<h5>Objectifs</h5>
<p>Nous étions 2 sur ce projet, et il a également duré assez longtemps, car il comprenait de nombreux objectifs.</p>
<p>Le premier était bien évidemment de réussir à migrer notre plateforme sur tout un environnement Docker, ce qui a été un travail conséquent.</p>
<p>Le deuxième était de créer plusieurs serveurs, composant une infrastructure isolée, afin d’y accueillir un orchestrateur Jenkins, 2 serveurs d’intégration continue, et un serveur de déploiement continu.</p>
<p>L’orchestrateur Jenkins ne servira qu’à envoyer des ordres aux différentes machines, afin d’y faire des tests ou du déploiement.
Les tests d’intégrations continue se font à présent sur des environnements docker également.</p>
<p>Troisièmement, il fallait recréer et configurer Jenkins et les différents environnements Docker (test ou déploiement).</p>
<p>Ces objectifs n’étaient bien évidemment pas au nombre de 3, mais comprenaient de nombreuses autres problématiques.
Cette fois-ci, toute cette infrastructure était créée à l’aide de Saltstack et de Terraform, afin de pouvoir automatiser l’entière création de ces éléments.</p>
<h5>Résultats</h5>
<p>Malgré de nombreuses difficultés sur la dockerisation de la plateforme, cet environnement de test est encore utilisé aujourd’hui, et est complétement automatisé !
Chaque nouvelle fonctionnalité est alors testée, et peut être déployée au bon vouloir de l’utilisateur.</p>
<h5>Ma contribution</h5>
<p>Pour ce projet, j’ai principalement participé à la dockerisation de la plateforme.
Mais j’ai également créé les serveurs hôtes, et ai effectué le début de la configuration de l’orchestrateur Jenkins. C’est mon collègue qui a fini ensuite cette configuration afin de pouvoir totalement automatiser nos déploiements et nos tests.</p>
<h4 class="ods_titre">Création de la nouvelle infrastructure de pré-production</h4>
<h5>Description</h5>
<p>Ces nouveaux serveurs composaient, comme j’ai pu le dire, une infrastructure isolée de pré-production hébergée sur AWS Irlande.
Effectivement, nous avions déjà une infrastructure de pré-production avant cela, qui nous servait tout simplement à faire différents tests de configurations, afin de nous assurer que cela n’allait pas affecter la production.
Mais cet environnement de pré-production avait 2 problèmes:</p>
<p>Premièrement, ces serveurs étaient obsolètes, car le système était une vieille version d'Ubuntu. L’infrastructure n’était alors plus du tout similaire à la production (version des paquets, sécurité, maintenabilité…)</p>
<p>Deuxièmement, cette infrastructure était un VPC ( Virtual Private Cloud ) hébergé sur la région « Paris » de AWS. Cette région proposait un temps de réponse plus bas, dû à sa proximité, mais était plus onéreuse qu’une autre, comme L’Irlande par exemple.<br>
Il fallait alors recréer une toute nouvelle infrastructure de pré-production, et la faire rejoindre celle d’intégration continue. Tous ces serveurs feront alors partie d’un même VPC.</p>
<h5>Objectifs</h5>
<p>J’étais seul sur ce projet.
J’ai dû tout d’abord créer les différents serveurs à l’aide de Terraform: Frontend, Backend, HA Proxy, et plusieurs autres serveurs hébergeant des services nécessaires au bon fonctionnement de la plateforme.
Après avoir déployé ces différentes instances sur le cloud AWS, il me fallait alors les configurer, encore une fois à l’aide de Saltstack.
Une fois mon nouvel environnement de pré-production créé, je pouvais supprimer l’ancien.</p>
<p>Ces 2 seuls gros objectifs, contiennent bien sûr de nombreuses tâches, qui m’auront valu environ 3 mois de travail.
Je n’ai d’ailleurs pu supprimer l’ancien environnement que 8 mois après, car celui-ci était encore utilisé par un service indispensable, qui m’aura valu un autre projet assez conséquent.</p>
<h5>Résultats</h5>
<p>Aujourd’hui, l’ancien environnement de pré-production est supprimé, et le nouveau est utilisé régulièrement !</p>
<h4>Conclusion</h4>
<p>Ces 3 gros projets, parmi plusieurs autres, m’auront permis de grandement évoluer techniquement. Jamais je n’aurais pensé être capable de réaliser ceux-ci il y a 2 ans.<br>
Même si ces projets auraient peut-être pu être effectués plus rapidement par quelqu’un de plus expérimenté, cela m’a permis d’évoluer aux côtés d’Opendatasoft, et d’avoir aujourd’hui une palette de compétences techniques qui me seront indispensables dans mon avancée professionnelle.</p>
</div>
</div>
</div>
</div>
<div class="modal fade goodrentree" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>GoodRentree
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</h4>
</div>
<div class="modal-body">
<p>GoodRentree est né suite à une discussion avec un ami du lycée qui était passionné par l’auto-entrepreneuriat. Celui-ci avait déjà fait plusieurs plateformes d’e-commerce, et avait réussi à grandement m’intéresser sur le sujet.<br>
Il m’a alors proposé de créer notre propre plateforme de dropshipping, et m’a laissé trouver quels produits nous allions vendre sur celle-ci.</p>
<h5>Description</h5>
<p>Comme nous étions au début des vacances, j’ai pensé qu’il serait intéressant de vendre des fournitures scolaires dans les thèmes à la mode de 2018: Fortnite et les mangas!</p>
<p>Le dropshipping consiste à vendre un produit que l’on n’entrepose pas nous même. On ne fait que la passerelle entre le client et le fournisseur.
Le client se rend alors sur notre plateforme, choisit les produits qu’il souhaite, et une fois ces produits achetés, nous nous occupons de transmettre ses informations au fournisseur afin que le client soit directement livré chez lui.</p>
<p>Le bénéfice se fait alors en vendant le produit légèrement plus cher que si on achète celui-ci directement chez le fournisseur.</p>
<h5>Objectifs</h5>
<p>Pour présenter un produit fonctionnel, et attirer de potentiels clients, il y avait 3 objectifs principaux à accomplir :
<ul>
<li>Créer une plateforme d’e-commerce, l’exposer sur internet, et y ajouter les produits.</li>
<li>Mettre en place de l’automatisation, qui commandera les produits demandés par le client chez le fournisseur, avec les informations de celui-ci.</li>
<li>Faire de la communication, grâce aux publicités sur les réseaux sociaux.</li>
</ul>
<h5>Accomplissement des objectifs</h5>
<p>Comme mon ami était sur plusieurs projets en même temps, j’ai décidé de prendre les choses en main, sur toutes les parties que représentaient ce projet. Il était évidemment là pour m’épauler et me guider sur le sujet de la communication principalement, car il avait plus de connaissances dans ce domaine.</p>
<p>J’ai alors créé la plateforme d’e-commerce grâce à un Template open source appelé WooCommerce, dont j’ai ensuite modifié le code source.</p>
<p>J’ai mis en place l’automatisation grâce à des plugins que l’on pouvait ajouter à ce Template, et ai ajouté tous les produits.</p>
<p>La partie conséquente dans la création de la plateforme, aura été de lui donner une image professionnelle, ce qui a été la partie la plus difficile, en conséquence de mes capacités en développement Web assez limitées cette année-là.</p>
<p>La communication s’est principalement faite sur Facebook, grâce à leur outil de publicité. Il nous fallait alors choisir une niche, c’est-à-dire un ensemble de personne qui correspondent à nos critères.<br>
Pour notre cas, ça aura été par exemple, les parents d’enfants assez jeunes, résidant dans plusieurs pays d’Europe.</p>
<h5>Résultats</h5>
<p>On ne peut pas dire que ce projet a été une réussite, mais il n’a pas été un échec non plus!<br>
En effet, nous n’avons ni perdu, ni gagné d’argent. Cela a été dû à de grosses dépenses sur la publicité Facebook, mais également à un taux d’engagement assez faible.</p>
<p>Eh oui, malgré le fait que beaucoup de personnes se rendaient sur notre site-web, je pense qu’à cause de mes capacités assez limitées en design web, celui-ci ne paraissait pas assez professionnel, et décourageait les potentiels client à finalement acheter.</p>
<p>J’ai tout de même décidé d’ajouter ce projet à mon Portfolio, car il m’aura fait progresser en développement Web, et m’aura appris à créer un plan de communication, qui m’aura été utile ensuite pour <a href="work.html?modal=springtech">Springtech</a> et <a href="work.html?modal=thedoor">The Door</a>.</p>
</div>
<div class="modal-footer">
<div class="container">
<div class="row competence-espace">
<h5 class="col-12 text-center modal-text-title">Compétences acquises</h5>
</div>
<div class="row justify-content-center">
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=web">Web</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=autonomie">Autonomie</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=communication">Communication</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=flexibilite">Flexibilité</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=organisation">Organisation</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade springtech" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>Springtech
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</h4>
</div>
<div class="modal-body">
<p>Tout comme le projet <a href="work.html?modal=thedoor">The Door</a>, Spring Tech a été un projet qui restera à jamais gravé dans ma mémoire (Décidément, les projets de formation humaine !). Spring Tech a été une expérience qui m’a permis de fortifier les liens avec mes équipiers, mais également de voyager à Berlin et de découvrir une culture différente.</p>
<h5>Description</h5>
<p>Spring Tech avait un objectif très simple : Organiser un voyage linguistique et convivial en Europe regroupant des étudiants de différents semestres In’tech. Ce voyage durerait environ 3 jours, et allait comprendre le plus d’activités possibles, avec un prix le plus bas possible !
Malgré un objectif tournant autour des vacances et de la fête, ce projet demandait une charge de travail conséquente.</p>
<h5>Objectifs</h5>
<p>Les objectifs étaient, comme sur <a href="work.html?modal=thedoor">The Door</a>, très nombreux pour pouvoir proposer un voyage correspondant aux attentes de nos « clients », tout en leur évitant le plus d’interactions possible.</p>
<ul>
<li>Générer des recettes pour rendre le prix du voyage le plus abordable possible</li>
<p>Pour pouvoir générer le plus d’argent possible, afin de baisser le prix du voyage pour chacun, nous avons dû organiser des repas et des « cafeteria » au sein de l’école.</p>
<li>Analyser les différentes offres du marché pour proposer les prix les plus bas possible</li>
<p>Pour ce faire, nous avons bien évidemment utilisé des comparateurs de transports et d’hôtelx, mais nous avons également appelé beaucoup (beaucoup) de compagnies de transports et de logements, afin d’avoir un prix fixe qui nous permettrait d’établir un plan de trésorerie le plus tôt possible. Nous devions également réserver le plus tôt possible afin d’éviter une hausse des prix.</p>
<li>Campagne de communication interne pour attirer le plus de personnes</li>
<p>La communication au sein de l’école devait se faire assez classiquement. Une campagne de mails et de sondages, des affiches dans toute l’école avec une charte graphique attirante et un passage dans toutes les classes. Mais le meilleur moyen de communication était de proposer un prix bas, car nous proposions ce voyage à des étudiants.</p>
<li>Mettre en place le voyage, pour que le “client” ait le moins de choses à faire + feuille info pratique</li>
<p>Cette mise en place comprend toutes les réservations, des logements et des transports, mais surtout l’organisation, du point de rendez-vous, des activités sur place, du budget repas et sortie, etc. C’est ici que la mise en place du planning a été très importante.</p>
<li>Mise en place d’un planning pour le voyage</li>
<p>Le planning n’était bien évidemment pas définitif, mais il allait grandement nous servir à prévoir ce qu’il était possible de faire ou non. Il a permis également de faire un maximum d'activités, en créant des « chemins » en fonction des lieux demandés.</p>
</ul>
<h5>Ma contribution</h5>
<p>Pour ce qui est de générer des recettes, nous savons tous mis la main à la patte ! Nous étions bien évidemment tous présents afin de vendre nos bons petits plats, ou pour vendre du café et des viennoiseries encore chaudes.</p>
<p>Mais la partie sur laquelle je me suis le plus penché a été la mise en place des sondages et du planning en fonction des réponses de nos « clients ». J’ai dû établir ce planning pour 3 jours, car il y avait une charge de travail bien assez élevée pour que chaque membre du groupe doive travailler en autonomie.</p>
<h5>Résultats</h5>
<p>La communication était très bien réussi, et beaucoup d’élèves étaient intéressés par ce voyage pour découvrir Berlin, mais malgré un gros travail afin de générer le plus de recettes possible, le prix était encore un peu trop haut. C’est la principale raison qui en a démotivé beaucoup, et nous sommes finalement partis au total de 8 membres.</p>
<p>Le voyage en lui-même a été très bien organisé, et tout s’est passé comme on le souhaitait.<br>
Nous n’avons alors pas vraiment atteint notre objectif pour ce qui était du nombre de participants, mais ce projet a été une énorme réussite pour nous tous, car nous avons réussi à remplir les nombreux objectifs présents pour le bon déroulement de celui-ci.</p>
<p><img src="assets/img/gallery/springtech-team.png" class="img-fluid" style="position:relative;display: block;margin-left: auto;margin-right: auto;"></p>
</div>
<div class="modal-footer">
<div class="container">
<div class="row competence-espace">
<h5 class="col-12 text-center modal-text-title">Compétences acquises</h5>
</div>
<div class="row justify-content-center">
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=equipe">Esprit d'équipe</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=organisation">Organisation</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=flexibilite">Flexibilité</a>
<a class="btn-realisation btn-primary col-auto" href="blog.html?modal=autonomie">Autonomie</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Gallery Area End -->
</main>
<footer>
<!--? Footer Start-->
<div class="footer-area footer-bg ">
<div class="container ">
<div class="footer-bottom ">
<div class="row d-flex justify-content-between align-items-center ">
<div class="col-xl-9 col-lg-8 ">
<div class="footer-copy-right ">
<p>Ce site a été conçu par Colorlib, j'ai pour ma part, modifié une grande partie du site afin de le mettre sous une forme de Portfolio à mon image<br>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End-->
</footer>
<!-- Scroll Up -->
<div id="back-top" >
<a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>
<!-- JS here -->
<!-- All JS Custom Plugins Link Here here -->
<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="./assets/js/jquery.slicknav.min.js"></script>
<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/animated.headline.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>
<!-- Nice-select, sticky -->
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>
<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>
<!-- Jquery Plugins, main Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>
<script>
setTimeout(()=>displayModal(),400);
</script>
</body>
</html>