-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
518 lines (480 loc) · 24.6 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
<!DOCTYPE html>
<html lang="fr" id="home">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="Lucas Naury's Portfolio, a front-end developper, engineering student at IMT Nord Europe">
<meta name="theme-color" content="#1C1C1C">
<title>Portfolio</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,500,600,700" rel="stylesheet">
</head>
<body>
<nav>
<h1><span>Lucas</span> NAURY</h1>
<div class="pages">
<a href="#home"><span>Accueil</span></a>
<a href="#about-me"><span>A propos</span></a>
<a href="#portfolio"><span>Portfolio</span></a>
<a href="mailto:lucas.naury@sfr.fr" id="contact"><span>Contact</span></a>
<div class="icons">
<a href="https://github.com/lucasnaury" target="blank" class="icon"><img src="img/github.svg" alt="Github"></a>
<a href="https://www.linkedin.com/in/lucasnaury/" target="_blank" class="icon"><img src="img/linkedin.svg"
alt="Linkedin"></a>
</div>
</div>
<div class="hamburgerToggle">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</nav>
<section class="header-section">
<a href="#about-me" class="scroll-down-indicator">
<img loading="lazy" src="img/down-arrow.gif" alt=""></a>
<div class="title">
<h1>Recherche</br>De Stage</h1>
<h2>Projet de fin d'étude</br>24 semaines à partir du 14/04</h2>
</div>
</section>
<section class="about_me-section">
<span id="about-me"></span>
<div class="header">
<div class="image">
<h1>About Me
<div class="ligne"></div>
</h1>
<h2>Lucas NAURY <em>-</em> <span>Etudiant</span></h2>
</div>
</div>
<div class="content">
<p>
Actuellement en deuxième année de cycle ingénieur à l'IMT Nord-Europe, je suis à la recherche d'un stage de <em>16 à 20 semaines</em> à partir du </em>8 avril</em> 2024.
</p>
<p>
Depuis toujours, je suis passionné par l'informatique. À l'aide de cours en ligne, j'ai appris différents
langages (<em>HTML, CSS, JS, VueJS, C#, C++, C, Python, Java</em>...)
afin de satisfaire ma curiosité. J'ai ainsi créé quelques projets personnels durant mon temps libre que vous
pourrez consulter <a href="#portfolio">ci-dessous</a>.
</p>
<p>
Cependant, je souhaite maintenant me spécialiser en <em>robotique</em> et <em>électronique embarquée</em>,
c'est pourquoi j'ai continué mon cursus dans ce domaine. J'ai donc des connaissances en <em>automatique, automatisme, ROS</em>...
</p>
</div>
</section>
<section class="portfolio-section">
<span id="portfolio"></span>
<div class="title">
<h1>Portfolio
<div class="ligne"></div>
</h1>
</div>
<div class="projects">
<div class="section-title">
<h2>Projets de cours</h2>
</div>
<div class="project imgProject">
<h1>Projet #1 - Hackathon Digital Innovation</h1>
<p>
En janvier 2024, j'ai eu l'occasion de participer au <em>Hackathon Digital Innovation</em> organisé par mon école <i>(IMT Nord Europe)</i> en partenariat avec la CITC et l'ENSAM Lille.
<span>
<em>L'objectif :</em> concevoir un système robotique capable de <em>trier des pièces de formes variées</em> à l'aide d'un bras robotique <i>(Niryo Ned2)</i> équipé d'une caméra et d'une pince.
Ces pièces étaient ensuites déposées sur un convoyeur <i>(robot Kobuki équipé d'un lidar 2D)</i> pour être déplacé vers des points d'intérêt.
</span>
<span>
<em>Technologies utilisées :</em> ROS2, Python, OpenCV
</span>
</p>
<div class="grid">
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<img loading="lazy" class="media" src="img/projects/hackathon/niryo.jpg" alt="Niryo">
<div class="desc">
<h3>Niryo Ned2</h3>
<p>Nous avons d'abord utilisé le robot <em>Niryo Ned2</em> ainsi que son kit de vision, pour <em>détecter puis attraper des pièces</em>.
</br>D'abord de simples carrés/ronds, nous avons ensuite du attraper des <em>pièces plus complexes/</em>
</p>
</div>
</div>
<div class="imgContainer tall hover">
<!--Ratio 1.16756706827-->
<img loading="lazy" class="media" src="img/projects/hackathon/kobuki.jpg" alt="Ecran principal">
<div class="desc">
<h3>Kobuki</h3>
<p>Le <em>robot Kobuki</em> est un robot de type <i>"TurleBot"</i>. Nous l'avons utilisé pour déplacer les pièces d'un point à l'autre de l'environnement, grâce à son <em>lidar 2D</em> lui permettant de se repérer.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer large hover">
<img loading="lazy" class="media" src="img/projects/hackathon/environnement.jpg" alt="Ecran principal">
<div class="desc">
<h3>Environnement</h3>
<p>
L'environnement de test était un labyrinthe. Une fois le Kobuki chargé par le bras robot, il devait se déplacer dans l'un des points de l'environnement.
</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/hackathon/deplacement_pieces.jpg" alt="Onglet Mes recettes / Favoris">
<div class="desc">
<h3>Déplacement des pièces</h3>
<p>Le bras robot devait déposer les pièces dans la boite en bois <i>(découpée au fablab de l'école)</i> disposée sur le Kobuki.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/hackathon/slam.jpg" alt="Onglet Mes recettes / Favoris">
<div class="desc">
<h3>La carte</h3>
<p>A l'aide d'un algorithme de <em>SLAM</em>, nous avons créé une <em>cartographie de l'environnement</em> de test afin de déterminer les positions des <em>points d'intérêt</em> et permettre au robot de <em>se repérer</em>.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://robot-ia-hdf.github.io/" target="_blank">En savoir plus</a></div>
</div>
<div class="project imgProject">
<h1>Projet #2 - Reconstruction 3D</h1>
<p>
En avril 2024, dans le cadre d'un module de robotique et vision, j'ai participé à un projet d'une durée d'une semaine.
<span>
<em>L'objectif :</em> Prendre plusieurs prise de vues d'un objet 3D à l'aide d'un bras robot Kuka et d'une caméra Intel
RealSense, afin de reconstituer le modèle 3D de l'objet.
</span>
<span>
<em>Technologies utilisées :</em> ROS2, Python, OpenCV
</span>
</p>
<div class="grid">
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<img loading="lazy" class="media" src="img/projects/tp-robvis/robot-setup.jpg" alt="Kuka robot setup">
<div class="desc">
<h3>KUKA KR 5 Sixx R650</h3>
<p>
Nous avons utilisé un <em>robot industriel Kuka</em> pour ce projet, équipé d'un <em>préhenseur pneumatique</em>.
L'objet à scanner était un cube, disposé sur un socle à un endroit précis.
</p>
</div>
</div>
<div class="imgContainer tall hover">
<!--Ratio 1.16756706827-->
<img loading="lazy" class="media" src="img/projects/tp-robvis/robot-moving.jpg" alt="Déplacement du robot">
<div class="desc">
<h3>Déplacement du robot</h3>
<p>Le robot s'occupait d'attraper la pièce avec son préhenseur, et de la montrer sous différents angles à la
<em>caméra Intel RealSense</em> disposée au dessus du plan de travail
</p>
</div>
</div>
<div class="imgContainer tall hover">
<!--Ratio 1.16756706827-->
<img loading="lazy" class="media" src="img/projects/tp-robvis/computer-vision.png" alt="Vision par ordinateur">
<div class="desc">
<h3>Vision par ordinateur</h3>
<p>
Un algorithme de vision par ordinateur s'occupait de détecter la couleur du cube, et de prendre des mesures de distance
pour chacun des pixels de la face du cube.
</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<img loading="lazy" class="media" src="img/projects/tp-robvis/result.png" alt="Résultat">
<div class="desc">
<h3>Résultat</h3>
<p>Une fois les données de profondeur des différentes faces récupérées, il a fallu fusionner ces nuages de point,
pour obtenir un maillage. Le résultat reste à améliorer mais est plutôt correct au vu de la durée du projet.
</p>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>Projets personnels</h2>
</div>
<div class="project imgProject">
<h1>Projet #1 - CONTROL</h1>
<p>
Jeu PC développé pendant les vacances d'été 2020 à l'aide d'<em>Unity 3D</em>. Le principe est simple : vous
controlez un personnage et vous devez atteindre
le portail pour passer au niveau suivant. Pour cela, vous pouvez <em>prendre le contrôle des différents
personnages</em> présents dans le
niveau simplement en leur "tirant" dessus. Chaque personnage ayant des <em>capacités spéciales</em>, le joueur
doit établir une stratégie afin de
réussir le niveau.
</p>
<div class="grid">
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<img loading="lazy" class="media" src="img/projects/control/MainMenu.jpg" alt="Main Menu">
<div class="desc">
<h3>Ecran d'accueil</h3>
<p>C'est la première chose que le joueur voit en lançant le jeu.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<!--Ratio 0.88396811337-->
<img loading="lazy" class="media" src="img/projects/control/Options.jpg" alt="Options">
<div class="desc">
<h3>Menu Options</h3>
<p>À partir de ce menu, le joueur peut <em>modifier ses contrôles, ses paramètres graphiques et le volume
du jeu</em>.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<!--Ratio 1.79333333333-->
<img loading="lazy" class="media" src="img/projects/control/LevelSelect.jpg" alt="Level Select">
<div class="desc">
<h3>Sélecteur de niveaux</h3>
<p>Seul le dernier niveau non joué est accessible au joueur.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer large hover">
<video loading="lazy" class="media" width="100%" height="100%" muted autoplay loop
src="img/projects/control/Blobby.mp4" alt="Blobby"></video>
<div class="desc">
<h3>Blobby - Le personnage qui rebondit</h3>
<p>Le joueur est amené à rencontrer ce personnage qui permet au joueur de <em>rebondir</em> et ainsi
accéder à des zones innaccessibles auparavant.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/control/Tutorial.gif" alt="Tutorial">
<div class="desc">
<h3>Premier niveau du tutoriel</h3>
<p>C'est le premier niveau que le joueur est amené à jouer. Il lui apprend les <em>déplacements de
base</em>.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/control/Doubly.jpg" alt="Doubly">
<div class="desc">
<h3>Doubly - Le personnage aux multiples saut</h3>
<p>C'est le premier personnage que le joueur rencontre. Il est capable de faire un <em>double saut</em>,
et donc franchir des obstacles plus grands.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://mega.nz/folder/tv40HD5a#Z3l5f47MlulO1jTQ8uCasQ"
target="_blank">Télécharger le jeu</a></div>
</div>
<div class="project imgProject">
<h1>Projet #2 - Recipes</h1>
<p>
Recipes est une application web qui vous permet de <em>stocker vos recettes en un seul endroit</em>.
Avec elle, vous n'aurez plus à chercher dans des livres ou des tiroirs pendant des heures !!! Vous pourrez y
accéder en un seul clic, à partir de n'importe quel appareil !<br>
<span>Cependant, ce n'est pas une application de recettes classique. Recipes vous permet de <em>choisir des
recettes aléatoirement</em>, lorsque vous ne savez plus quoi cuisiner !</span>
</p>
<div class="grid">
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<video loading="lazy" class="media" width="100%" height="100%" muted autoplay loop
src="img/projects/recipes/Main.mp4" alt="Présentation de l'application"></video>
<div class="desc">
<h3>Présentation</h3>
<p>
<em>Recipes</em> possède plusieurs fonctionnalités telles que : <em>sélection aléatoire de recettes</em>
lorsque vous manquez d'inspiration,
<em>synchronisation dans le cloud</em> de vos recettes , <em>partage de recettes</em> par simple envoi
d'un lien et bien d'autres...
</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer tall hover">
<!--Ratio 1.16756706827-->
<img loading="lazy" class="media" src="img/projects/recipes/Main screen.png" alt="Ecran principal">
<div class="desc">
<h3>écran d'accueil</h3>
<p>L'écran d'accueil vous permet d'accéder aux différentes fonctions de l'application.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer large hover">
<video loading="lazy" class="media" width="100%" height="100%" muted autoplay loop
src="img/projects/recipes/Recipes.mp4" alt="Présentation écran de recettes"></video>
<div class="desc">
<h3>Recettes</h3>
<p>
Lors de l'affichage des recettes, l'utilisateur voit le <em>temps</em> que cela va lui prendre ainsi que
la <em>difficulté</em> et le <em>nombre de personnes</em>.
Ensuite, les étapes et ingrédients sont organisés par <em>catégories</em> afin de faciliter
compréhension.
</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/recipes/My recipes.png" alt="Onglet Mes recettes / Favoris">
<div class="desc">
<h3>Mes recettes</h3>
<p>Dans cet onglet, l'utilisateur peut à la fois voir les <em>recettes qu'il a créées</em>
ainsi que ses <em>recettes favorites</em>.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/recipes/Random.png" alt="Onglet Recherche aléatoire">
<div class="desc">
<h3>Recherche aléatoire</h3>
<p>Dans cet onglet, l'utilisateur peut sélectionner le type de recettes qu'il souhaite,
et l'application se charge de lui <em>en trouver une au hasard</em>.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://livrerecettes.netlify.app/" target="_blank">Voir l'application</a></div>
</div>
<div class="project imgProject">
<h1>Projet #3 - Workout Timer</h1>
<p>
Application web qui permet de <em>planifier sa séance de sport</em>. L'utilisateur choisit la durée, le temps
de
repos et le nombre de répétitions
pour un exercice. L'application se charge alors d'afficher les comptes à rebours afin que l'utilisateur puisse
se concentrer totalement
sur sa séance de sport !
</p>
<div class="grid">
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<img loading="lazy" class="media" src="img/projects/workout-timer/Settings.jpg" alt="Settings">
<div class="desc">
<h3>Ecran d'accueil</h3>
<p>C'est la première page que l'utilisateur voit en lançant l'application. Il peut y remplir les données
de son exercice.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<!--Ratio 0.88396811337-->
<img loading="lazy" class="media" src="img/projects/workout-timer/TimePicker.jpg" alt="Time Picker">
<div class="desc">
<h3>Time Picker</h3>
<p>Utilisation d'une <em>librairie JavaScript</em> pour avoir un <em>Time Picker</em>.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<!--Ratio 1.79333333333-->
<img loading="lazy" class="media" src="img/projects/workout-timer/SettingsCompleted.jpg" alt="Settings Completed">
<div class="desc">
<h3>Paramètres remplis</h3>
<p>Une fois les paramètres remplis, l'utilisateur peut cliquer sur <em>"START"</em> afin de lancer
l'application.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer large hover">
<video loading="lazy" class="media" width="100%" height="100%" muted autoplay loop
src="img/projects/workout-timer/InUse.mp4" alt="Application"></video>
<div class="desc">
<h3>Application en marche</h3>
<p>
Lorsque le chronomètre est lancé, une animation affiche le temps qui s'écoule sous la forme d'un cercle.
</br>L'application s'arrête lorsque l'exercice est totalement terminé.
</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/workout-timer/PracticeTime.jpg" alt="Rest Time">
<div class="desc">
<h3>Practice Time</h3>
<p>L'utilisateur <em>réalise l'exercice</em> durant le temps indiqué.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/workout-timer/RestTime.jpg" alt="Doubly">
<div class="desc">
<h3>Rest Time</h3>
<p>L'utilisateur <em>se repose</em> durant le temps indiqué.</p>
<span>Cliquer pour afficher en grand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://timerworkout.netlify.app/" target="_blank">Voir l'application</a></div>
</div>
<div class="overlay">
<img loading="lazy" src="img/close.png" class="close">
<div class="content">
<div class="horizontal">
<img loading="lazy" src="img/NavigateBefore.png" alt="<" class="NavigateBefore">
<div class="mediaContainer">
<img loading="lazy" src="" class="overlayImg">
<video loading="lazy" src="" class="overlayVid" autoplay loop>
</div>
<img loading="lazy" src="img/NavigateNext.png" alt=">" class="NavigateNext">
</div>
<h1></h1>
<p></p>
<div class="bottomNav">
<img loading="lazy" src="img/NavigateBefore.png" alt=" <" class="NavigateBefore">
<img loading="lazy" src="img/NavigateNext.png" alt=">" class="NavigateNext">
</div>
</div>
<p>Appuyer sur <em>Echap</em> pour quitter</p>
</div>
</div>
<div class="section-title">
<h2>Experimentations</h2>
<p>Voici quelques projets rapides réalisés par simple curiosité, pour tester différentes choses et me cultiver.
</p>
</div>
<div class="experiment-projects imgProject two-col">
<div class="experiment-project imgContainer hover">
<div class="desc">
<h3>Sorting Visualizer</h3>
<p>Visualisation de différents algorithmes de tri, à l'aide de VueJS.<br>
<a href="https://sorting.lucasnaury.fr/" target="_blank">Voir le lien</a></p>
<span>Cliquer pour afficher en grand</span>
</div>
<video loading="lazy" class="media" width="100%" height="100%" muted
src="img/projects/extra/Sorting visualizer.mp4" alt="Sorting visualization"></video>
</div>
<div class="experiment-project imgContainer hover">
<div class="desc">
<h3>A* Pathfinding visualization</h3>
<p>Implémentation de l'algorithme de pathfinding A*, en affichant les coûts heuristiques, réels et totaux.</p>
<span>Cliquer pour afficher en grand</span>
</div>
<img class="media" src="img/projects/extra/Pathfinding.png" alt="A* Pathfinding visualization">
</div>
<div class="experiment-project imgContainer hover">
<div class="desc">
<h3>Double Pendulum</h3>
<p>Implémentation des équations de mouvement du double pendule avec la méthode "Runge-Kutta".</p>
<span>Cliquer pour afficher en grand</span>
</div>
<img class="media" src="img/projects/extra/Double Pendulum.png" alt="Double Pendulum">
</div>
<div class="experiment-project imgContainer hover">
<div class="desc">
<h3>Fractal Trees</h3>
<p>Implémentation d'un algorithme de génération de Fractal trees à l'aide d'Unity3D.</p>
<span>Cliquer pour afficher en grand</span>
</div>
<img class="media" src="img/projects/extra/Fractal Trees.png" alt="Fractal Trees">
</div>
</div>
</section>
<footer>Fait par Lucas Naury - Tous droits réservés</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript" defer></script>
<script src="js/portfolio.js" type="text/javascript" defer></script>
</body>
</html>