-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
464 lines (371 loc) · 19.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Pierre Maruejol - Portfolio</title>
<!-- MDB icon -->
<link rel="icon" href="./Picture/p.png">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>
</head>
<body >
<header id="header" class="scrollspy">
<div id="imageG"></div>
<div id="imageD"></div>
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon="" href="#about"></a>
</header>
<div id="bgp" class="flex">
<div class="centerBox">
<div class="categoryWrapper">
<div class="intro">Bonjour, je suis <span class="intro2"> Pierre Maruejol </span><span class="indeks"></span></div>
<div class="intro "> Je suis étudiant à l'École de Technologie Supérieure </div>
<div class="intro padbot">J'aspire à devenir Software Engineer dans les interfaces haptiques </div>
<div class="intro "> </div>
<button id="boop" >
<span>
<span>
<span data-attr-span="Continuer">
Continuer
</span>
</span>
</span>
</button>
</div>
</div>
</div>
<nav id="menu" class="navbar sticky-top navbar-expand-lg cardcolor">
<a class="navbar-brand" href="#">Pierre Maruejol</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#about">Présentation <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#project">Projets</a>
<a class="nav-item nav-link" href="#trans2">Formations</a>
<a class="nav-item nav-link" href="#fcontact">Contactez-moi</a>
</div>
</div>
</nav>
<div id="selfpre" >
<div id="about" class="grad">
<div class="container spacer " data-aos="flip-right">
<div class="card cardcolor padbot">
<div class="row padbot">
<div class="col-sm flex align-self-center ">
<div class="avatar flex">
<img src="./Picture/ID-numérique.JPG" class="rounded-circle pfp" alt="Ma photo">
</div>
<h3 class="card-title margtop">Pierre Maruejol</h3>
<!-- Text -->
<p class="card-text container textac">Je suis actuellement en DUT informatique à Montpellier.
<br>Je compte continuer mes études à l'ÉTS de Montréal,
afin de faire un Baccalauréat en génie Logiciel.
Entre temps je vais effectuer un stage chez <a href="https://www.yogan-developpement.fr/accueil/" alt="lien vers le site de Yogan Développement">Yogan Développement</a>.</p>
</div>
<div class="col-sm margtop">
<div class="container minInteret">
<h4 class="card-title">Intérêts</h4>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="jeuxvideos-tab" data-toggle="tab" href="#jeuxvideos" role="tab" aria-controls="jeuxvideos" class="navbut"
aria-selected="true">Jeux vidéos</a>
</li>
<li class="nav-item">
<a class="nav-link" id="prog-tab" data-toggle="tab" href="#prog" role="tab" aria-controls="prog" class="navbut"
aria-selected="false">Programmation</a>
</li>
<li class="nav-item">
<a class="nav-link" id="manga-tab" data-toggle="tab" href="#manga" role="tab" aria-controls="manga" class="navbut"
aria-selected="false">Manga</a>
</li>
<li class="nav-item">
<a class="nav-link" id="dessins-tab" data-toggle="tab" href="#dessins" role="tab" aria-controls="dessins" class="navbut"
aria-selected="false">Dessins</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sport-tab" data-toggle="tab" href="#sport" role="tab" aria-controls="sport" class="navbut"
aria-selected="false">Natation</a>
</li>
<li class="nav-item">
<a class="nav-link" id="dog-tab" data-toggle="tab" href="#dog" role="tab" aria-controls="dog" class="navbut"
aria-selected="false">Animaux</a>
</li>
</ul>
<div class="tab-content margtop" id="myTabContent">
<div class="tab-pane fade show active" id="jeuxvideos" role="tabpanel" aria-labelledby="jeuxvideos-tab">Depuis tout petit
j'ai été baigné dans les jeux vidéos, dans un premier temps avec la GameCube puis avec l'ordinateur. Aujourd'hui,
les jeux vidéos sont une source de défis de programmation ainsi qu'un passe temps coopératif.
</div>
<div class="tab-pane fade" id="prog" role="tabpanel" aria-labelledby="prog-tab">
Bien sûr, je n'aurai rien à faire ici si je n'aimais pas la programmation. J'aime créer et la programmation est un très bon médium d'expression, surtout que celui-ci est encore jeune, le voir évoluer me passionne. Certains rêves paraissent de moins en moins irréalisable.
</div>
<div class="tab-pane fade" id="manga" role="tabpanel" aria-labelledby="manga-tab">
Les mangas et les animés me permettent de voyager et d'apprendre de moi, ceux-ci sont à la fois simples et complexes au travers de l'histoire qu'ils racontent. Ceux-ci sont moins limités par nos limites de la physique et permettent de voir émerger des mondes plus fantaisistes les uns que les autres.
</div>
<div class="tab-pane fade" id="dessins" role="tabpanel" aria-labelledby="dessins-tab">
J'ai toujours dessiné, même si ce n'était pas très esthétique dans un premier temps, je tiens toujours à m'améliorer pour rendre mes dessins les plus réalistes possibles, je me sers parfois de mes dessins pour schématiser mes programmes ou pour les intégrer au site (logos, bannières, fond...).
</div>
<div class="tab-pane fade" id="sport" role="tabpanel" aria-labelledby="sport-tab">
Le cliché des programmeurs semble être des personnes non-sportives qui sont sédentaires, j'espère aider à contredire ce cliché. La natation est très importante pour
moi en plus de me maintenir en forme, la natation me permet de faire le tri et me concentrer sur les choses importantes.
</div>
<div class="tab-pane fade" id="dog" role="tabpanel" aria-labelledby="dog-tab">
J'éprouve une passion pour les animaux, plus spécialement les chiens, ils ne savent pas à quel point ils nous aident, peu importe ce qu'on fait et comment on est, ils nous aiment toujours autant.
Les aider est la moindre des choses.
</div>
</div>
</div>
<div class="position-absolute container">
<h4 class="card-title">Vous pouvez me croiser ici :</h4>
<button type="button" class="btn btn-dark" data-toggle="popover" data-placement="bottom" title="Numéro de télphone" data-content="+1.438.493.1166"><i class="fas fa-phone-alt"></i></button>
<button type="button" class="btn btn-dark" data-toggle="popover" data-placement="bottom" title="Adresse mail" data-content="[email protected]"><i class="far fa-envelope"></i></button>
<a href="#fcontact"><button type="button" class="btn btn-dark"><i class="fas fa-comment-alt" ></i></button></a>
<a href="https://github.com/CelesteMaru/" target="_blank"><button type="button" class="btn btn-dark"><i class="fab fa-github"></i></button></a>
<a href="https://www.linkedin.com/in/pierre-maruejol-845711170/" target="_blank"><button type="button" class="btn btn-dark"><i class="fab fa-linkedin"></i></button></a>
</div>
</div>
</div>
</div>
<div class="row margtop padup">
<div class=" container col" data-aos="fade-right">
<div class="card cardcolor flex textac">
<i class="fas fa-redo fa-4x padup"></i>
<h4 class="padup"><time>Autodidacte<time></h4>
<p>Se mettre au niveau n'est pas un soucis</p>
</div>
</div>
<div class="container col" data-aos="fade-right">
<div class="card cardcolor flex textac">
<i class="fas fa-book fa-4x padup"></i>
<h4 class="padup"><time>Soif de savoir<time></h4>
<p> Apprendre n'est qu'un défi</p>
</div>
</div>
<div class="container col " data-aos="fade-right" >
<div class="card cardcolor flex textac" >
<i class="fas fa-bullseye fa-4x padup"></i>
<h4 class="padup"><time>Persévérant<time></h4>
<p>Je ne m'arrête qu'avec une <br> solution</p>
</div>
</div>
<div class="container col " data-aos="fade-right">
<div class="card cardcolor flex textac">
<i class="fas fa-star fa-4x padup"></i>
<h4 class="padup"><time>Soin du détail<time></h4>
<p>Tout doit être bien fait</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trans" >
<div class="soustitre" id="project">
<h1 class="menuH1">Projets<h1>
</div>
</div>
<div id="bgpro" >
<div class="grad2">
<div class="container">
<div class="row padup " data-aos="zoom-in-up">
<div class="container col">
<div class="card cardcolor">
<!-- Card image -->
<iframe class="vid" src="https://www.youtube.com/embed/WusLZXlTm7k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Génération Procédurale</a></h4>
<!-- Text -->
<p class="card-text">Ce projet a été réalisé sur Unity en C# et me permet d'apprendre à utiliser le bruit de perlin afin de faire de la génération procédurale</p>
<!-- Button -->
</div>
</div>
</div>
<div class="container col">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/TTFF7.png" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Triple Triad</a></h4>
<!-- Text -->
<p class="card-text">Le Triple Triad est un projet réalisé en groupe de 4 réalisé en JavaScript, PHP, HTML/CSS durant un tuteura</p>
<!-- Button -->
<a href="http://webinfo.iutmontp.univ-montp2.fr/~martinezf/TripleTriad/" target="_blank" class="btn btn-primary">Jouer</a>
</div>
</div>
</div>
<div class="container col">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/CuteOnTime.png" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Code Game Jam 2020</a></h4>
<!-- Text -->
<p class="card-text">Nous avions 30 heures pour réaliser un jeu sur le thème Cute And Creepy nous l'avons réalisé en C# </p>
<!-- Button -->
<a href="http://codegamejam.extragames.fr/" target="_blank" class="btn btn-primary">En savoir plus sur l'évènement</a>
</div>
</div>
</div>
</div>
<div class="row padup" data-aos="zoom-in-up">
<div class=" container col">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/NuitDeLInfo.PNG" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>La nuit de l'info 2019</a></h4>
<!-- Text -->
<p class="card-text">Dans cette évêment nous devions une application en une nuit cette saison c'était un site web d'orientation vers les ressources étudiantes</p>
<!-- Button -->
<a href="https://www.nuitdelinfo.com/" class="btn btn-primary" target="_blank">En savoir plus sur l'évènement</a>
</div>
</div>
</div>
<div class=" container col">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/eCommerce.png" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Site de "Ecommerce"</a></h4>
<!-- Text -->
<p class="card-text">Ce site était un projet d'apprentissage de php visant à nous faire recréer un site d'Ecommerce avec un panier une boutique une vérification par mail en PHP</p>
<!-- Button -->
<a href="http://webinfo.iutmontp.univ-montp2.fr/~maruejolp/projetPHP/" class="btn btn-primary">Accéder au site</a>
</div>
</div>
</div>
<div class="container col ">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/projetMixt.png" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>"Projet Mixt"</a></h4>
<!-- Text -->
<p class="card-text">Nous devions réaliser un site web en utilisant WordPress, en applicant la méthode agile et avec des "clients" qui essayaient d'être exigeant</p>
</div>
</div>
</div>
</div>
<div class="row padup" data-aos="zoom-in-up">
<div class=" container col">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/dominion.png" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Dominion</a></h4>
<!-- Text -->
<p class="card-text">Dans ce projet nous devions réaliser l'aspect backend d'un jeu de carte Dominion en Java</p>
</div>
</div>
</div>
<div class=" container col">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/AssassinsWood.PNG" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Code Game Jam 2019</a></h4>
<!-- Text -->
<p class="card-text">Cette Code Game Jam a été réalisé sur le thème de balade en forêt et programmé en GameMakerLanguage (Notre jeu sera bientôt disponnible sur le site)</p>
<!-- Button -->
<a href="http://codegamejam.extragames.fr/" target="_blank"class="btn btn-primary">En savoir plus sur l'évènement</a>
</div>
</div>
</div>
<div class="container col ">
<div class="card cardcolor">
<!-- Card image -->
<img class="card-img-top" src="./Picture/Démineur.PNG" alt="Card image cap">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Démineur</a></h4>
<!-- Text -->
<p class="card-text">J'ai programmé un démineur pour ma spécialité ISN de mon bac en Python en 2018.</p>
<!-- Button -->
<a href="https://drive.google.com/file/d/1mLZvXHRwGsPg0T0RyW8WiMQUS5qjZm-m/view" target="_blank" class="btn btn-primary télé">Télécharger</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trans2" >
<div class="soustitre" id="project">
<h1 class="menuH1">Formations et expériences<h1>
</div>
<canvas id='world'></canvas>
</div>
<section class="timeline">
<ul>
<li>
<div data-aos="fade-left">
<time>2018</time> En 2018, j'ai passé mon Bac S SVT spé ISN au Lycée Jean Monnet à Montpellier
</div>
</li>
<li>
<div data-aos="fade-right">
<time>2018-2020</time> De 2018 à 2020, j'étais en DUT Informatique à L'IUT Montpellier - Sète
</div>
</li>
<li>
<div data-aos="fade-left">
<time>Printenmps 2020</time> Je suis en stage chez <a href="https://www.yogan-developpement.fr/accueil/" target="_blank" alt="lien vers le site de Yogan Développement">Yogan Développement</a> jusqu'en juillet 2020 (durée ~8 semaines)
</div>
</li>
<li>
<div data-aos="fade-right">
<time>2020 - 2024?</time> Je souhaite ensuite continuer mes études à L'ÉTS de Montréal qui est une école d'ingénieur canadienne.
</div>
</li>
</ul>
</section>
<!-- Start your project here-->
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript" src="js/script.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>
<script>
AOS.init();
</script>
</body>
</html>