-
Notifications
You must be signed in to change notification settings - Fork 0
/
en.html
505 lines (454 loc) · 22.4 KB
/
en.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
<!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>Home</span></a>
<a href="#about-me"><span>About</span></a>
<a href="#portfolio"><span>Portfolio</span></a>
<a href="mailto:[email protected]" 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>Looking for</br>a job</h1>
<h2>Robotics engineering</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>MSc student</span></h2>
</div>
</div>
<div class="content">
<p>
Currently doing a MSc in Robotics at Cranfield University, I'm looking for a position as a <em>Robotics engineer</em>.
</p>
<p>
I've always had a passion for IT. Using online courses, I've learnt various languages
(<em>HTML, CSS, JS, VueJS, C#, C++, C, Python, Java</em>, etc.) to satisfy my curiosity.
I've also created a few personal projects in my spare time, which you can consult <a href="#portfolio">below</a>.
</p>
<p>
After playing with software and web programming, I discovered embedded programming and fell in love with it.
I decided to pursue a carreer in that sector, as a robotics engineer.
</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>Class projects</h2>
</div>
<div class="project imgProject">
<h1>Projet #1 - Digital Innovation Hackathon</h1>
<p>
In January 2024, I had the opportunity to take part in the <em>Digital Innovation Hackathon</em> organised by my school <i>(IMT Nord Europe)</i> in partnership with CITC and ENSAM Lille.
<span>
<em>The aim :</em> design a robotic system capable of <em>sorting parts of various shapes</em> using a robotic arm <i>(Niryo Ned2)</i> equipped with a camera and a gripper.
The parts were then placed on a conveyor <i>(a Kobuki robot equipped with 2D lidar)</i> and moved to points of interest.
</span>
<span>
<em>Technologies used :</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>
We first used the <em>Niryo Ned2</em> robot and its vision kit to <em>detect and then pick up parts</em>.
</br>Starting with simple squares/round shapes, we then had to pick up <em>more complex parts</em>.
</p>
<span>Click to expand</span>
</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>The <em>Kobuki robot</em> is a <i>"TurleBot"</i> type robot. We used it to move parts from one point to another in the environment, using its 2D lidar to locate and navigate to specific locations.</p>
<span>Click to expand</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>Environment</h3>
<p>
The test environment was a maze. Once the Kobuki had been loaded by the robot arm, it had to move to one of the points in the environment.
</p>
<span>Click to expand</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>Moving parts</h3>
<p>The robot arm had to deposit the parts in the wooden box <i>(cut out at the school fablab)</i> placed on the Kobuki.</p>
<span>Click to expand</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>The map</h3>
<p>Using a <em>SLAM</em> algorithm, we created a <em>map of the test environment</em> to determine the positions of <em>points of interest</em> and enable the robot to find its way around.</p>
<span>Click to expand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://robot-ia-hdf.github.io/" target="_blank">More info</a></div>
</div>
<div class="project imgProject">
<h1>Project #2 - 3D Reconstruction</h1>
<p>
In April 2024, as part of a robotics and vision module, I participated in a one-week project.
<span>
<em>Objective:</em> Take multiple shots of a 3D object using a Kuka robotic arm and an Intel RealSense camera to reconstruct the 3D model of the object.
</span>
<span>
<em>Technologies used:</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>
We used an <em>industrial Kuka robot</em> for this project, equipped with a <em>pneumatic gripper</em>. The object to be scanned was a cube, placed on a base at a specific location.
</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="Robot movement">
<div class="desc">
<h3>Robot Movement</h3>
<p>The robot handled grabbing the piece with its gripper and showing it from different angles to the
<em>Intel RealSense camera</em> positioned above the workspace.
</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="Computer vision">
<div class="desc">
<h3>Computer Vision</h3>
<p>
A computer vision algorithm detected the color of the cube and measured the distance for each pixel on the face of the cube.
</p>
<span>Click to enlarge</span>
</div>
</div>
<div class="imgContainer large hover">
<!--Ratio 1.33333333333-->
<img loading="lazy" class="media" src="img/projects/tp-robvis/result.png" alt="Result">
<div class="desc">
<h3>Result</h3>
<p>Once the depth data from the different faces were collected, the point clouds had to be merged to create a mesh. The result still needs improvement but is quite satisfactory considering the project's duration.
</p>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>Personnal projects</h2>
</div>
<div class="project imgProject">
<h1>Project #1 - CONTROL</h1>
<p>
A PC game developed during the summer of 2020 using <em>Unity 3D</em>. The concept is simple: you control a character,
and you need to reach the portal to move on to the next level. To do so, you can <em>take control of other characters</em>
in the level by "shooting" them. Each character has <em>special abilities</em>, so the player must strategize to complete the level.
</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>Home Screen</h3>
<p>This is the first thing the player sees when launching the game.</p>
<span>Click to expand</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>Options Menu</h3>
<p>From this menu, the player can <em>adjust controls, graphics settings, and game volume</em>.</p>
<span>Click to expand</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>Level Selector</h3>
<p>Only the last unplayed level is accessible to the player.</p>
<span>Click to expand</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 - The Bouncing Character</h3>
<p>The player will meet this character, who allows the player to <em>bounce</em> and reach previously inaccessible areas.</p>
<span>Click to expand</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>First Tutorial Level</h3>
<p>This is the first level the player plays. It teaches them the <em>basic movements</em>.</p>
<span>Click to expand</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 - The Double Jump Character</h3>
<p>This is the first character the player encounters. They can perform a <em>double jump</em>, allowing them to overcome larger obstacles.</p>
<span>Click to expand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://mega.nz/folder/tv40HD5a#Z3l5f47MlulO1jTQ8uCasQ" target="_blank">Download the game</a></div>
</div>
<div class="project imgProject">
<h1>Project #2 - Recipes</h1>
<p>
Recipes is a web application that allows you to <em>store your recipes in one place</em>.
With it, you'll no longer have to search through books or drawers for hours! You can access everything
with just one click, from any device!<br>
<span>However, this isn't a typical recipe app. Recipes allows you to <em>randomly choose recipes</em> when you don’t know what to cook!</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="App presentation"></video>
<div class="desc">
<h3>Overview</h3>
<p>
<em>Recipes</em> has several features such as: <em>random recipe selection</em> when you're out of ideas,
<em>cloud synchronization</em> for your recipes, <em>recipe sharing</em> via a simple link, and many more...
</p>
<span>Click to expand</span>
</div>
</div>
<div class="imgContainer tall hover">
<!--Ratio 1.16756706827-->
<img loading="lazy" class="media" src="img/projects/recipes/Main screen.png" alt="Main screen">
<div class="desc">
<h3>Home screen</h3>
<p>The home screen allows you to access the various functions of the app.</p>
<span>Click to expand</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="Recipes screen presentation"></video>
<div class="desc">
<h3>Recipes</h3>
<p>
When displaying recipes, the user can see the <em>time</em> it will take, the <em>difficulty</em>, and the <em>number of servings</em>.
Then, the steps and ingredients are organized by <em>categories</em> for easier understanding.
</p>
<span>Click to expand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/recipes/My recipes.png" alt="My Recipes / Favorites tab">
<div class="desc">
<h3>My Recipes</h3>
<p>In this tab, the user can see both the <em>recipes they have created</em> and their <em>favorite recipes</em>.</p>
<span>Click to expand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/recipes/Random.png" alt="Random Search tab">
<div class="desc">
<h3>Random Search</h3>
<p>In this tab, the user can select the type of recipe they want, and the app will <em>find one randomly</em>.</p>
<span>Click to expand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://livrerecettes.netlify.app/" target="_blank">View the app</a></div>
</div>
<div class="project imgProject">
<h1>Project #3 - Workout Timer</h1>
<p>
A web application that allows you to <em>plan your workout session</em>. The user selects the duration, rest time,
and number of repetitions for an exercise. The application then displays countdowns so that the user can fully
focus on their workout!
</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>Home Screen</h3>
<p>This is the first page the user sees when launching the app. They can input their exercise details here.</p>
<span>Click to expand</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>Uses a <em>JavaScript library</em> for the <em>Time Picker</em>.</p>
<span>Click to expand</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>Completed Settings</h3>
<p>Once the settings are filled in, the user can click <em>"START"</em> to begin the workout.</p>
<span>Click to expand</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="App in use"></video>
<div class="desc">
<h3>App in Use</h3>
<p>
Once the timer starts, an animation displays the elapsed time as a circle.
</br>The app stops when the workout is fully completed.
</p>
<span>Click to expand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/workout-timer/PracticeTime.jpg" alt="Practice Time">
<div class="desc">
<h3>Practice Time</h3>
<p>The user <em>performs the exercise</em> during the specified time.</p>
<span>Click to expand</span>
</div>
</div>
<div class="imgContainer medium hover">
<img loading="lazy" class="media" src="img/projects/workout-timer/RestTime.jpg" alt="Rest Time">
<div class="desc">
<h3>Rest Time</h3>
<p>The user <em>rests</em> during the specified time.</p>
<span>Click to expand</span>
</div>
</div>
</div>
<div class="seeMore"><a href="https://timerworkout.netlify.app/" target="_blank">View the app</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>Press <em>Esc</em> to exit</p>
</div>
<div class="section-title">
<h2>Experimentations</h2>
<p>Here are a few quick projects made out of curiosity, to test different things and expand my knowledge.</p>
</div>
<div class="experiment-projects imgProject two-col">
<div class="experiment-project imgContainer hover">
<div class="desc">
<h3>Sorting Visualizer</h3>
<p>Visualization of different sorting algorithms, using VueJS.<br>
<a href="https://sorting.lucasnaury.fr/" target="_blank">View link</a></p>
<span>Click to expand</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>Implementation of the A* pathfinding algorithm, displaying heuristic, real, and total costs.</p>
<span>Click to expand</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>Implementation of the double pendulum motion equations using the "Runge-Kutta" method.</p>
<span>Click to expand</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>Implementation of a fractal tree generation algorithm using Unity3D.</p>
<span>Click to expand</span>
</div>
<img class="media" src="img/projects/extra/Fractal Trees.png" alt="Fractal Trees">
</div>
</div>
</section>
<footer>Made by Lucas Naury - All rights reserved</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>