-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (323 loc) · 19.7 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Jules Cassan Portfolio Website</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a portfolio to describe my work and contact me">
<meta name="keywords" content="Portfolio, Jules Cassan,Computer science,Resume">
<meta name="author" content="Jules CASSAN">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to the files -->
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<header>
<div id="header-grid">
<div id="name-logo"><a href="documents/resume.pdf"><b>Jules Cassan</b></a></div>
<nav class="header-nav">
<ul>
<li><a href="documents/resume.pdf" class="header-link"><b>Resume</b></a></li>
<li><a href="#About" class="header-link"><b>About Me</b></a></li>
<li><a href="#myWork" class="header-link"><b>My Work</b></a></li>
<li><a href="#Contact" class="header-link"><b>Contact</b></a></li>
</ul>
</nav>
<nav class="header-nav">
<ul>
<li id="header-icons"><a href="https://github.com/White-On"><img src="assets/github.svg"
alt="github-icon"></a></li>
<li id="header-icons"><a href="mailto:[email protected]"><img src="assets/envelope-solid.svg"
alt="mail-icon"></a></li>
<li id="header-icons"><a href="https://www.linkedin.com/in/jules-cassan-b71478234/"><img
src="assets/linkedin.svg" alt="linkedin-icon"></a></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<div id="short-bio">
<div>
<h1><b>Jules Cassan</b></h1>
</div>
<div>
<h2><b>Graduated with a <a
href="https://sciences.sorbonne-universite.fr/formation-sciences/masters/master-informatique/parcours-androide">Master
in
Distributed Agents, Robotics, Operations Research, Interaction, Decision</a></b></h2>
</div>
<div>
<ul>
<li id="age"></li>
<li><b>Graduate student in Computer Science and AI💻</b></li>
<li><b>AI Lover 🤖</b></li>
<li><b>Invested and Motivated 🤸♂️</b></li>
<!-- <li><b>Knowledge seeker 📚</b></li> -->
<li><b>I am seeking roles as an AI Engineer (ML, NLP, or related fields), Data Scientist, or Data
Analyst, with a focus on areas like medicine, health, research, energy, agriculture, social
media, video games, and finance 🙋♂️</b></li>
</ul>
</div>
</div>
<div>
<img src="images/Jules.jpg" alt="picture of Jules" id="Jules-img">
</div>
</section>
<canvas id="boidsCanvas" style="background-color: var(--tertiary);"></canvas>
<script defer src="boids.js"></script>
<div class="spacer wave1"></div>
<section id="About">
<h2>About Me</h2>
<div id="about-grid">
<!-- Option : None card-about-wide card-about-tall card-about-big -->
<div class="card-about card-about-wide"
style="background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80')">
<p class="card-title">Video Games</p>
<p class="card-description">I enjoy video games, some have an incredible story and others have
mesmerizing visual</p>
</div>
<div class="card-about"
style="background-image: url('https://images.unsplash.com/photo-1521537634581-0dced2fee2ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')">
<p class="card-title">Sport</p>
<p class="card-description">I like to do badminton, running, cycling, tennis, climbing and many more!
</p>
</div>
<div class="card-about"
style="background-image: url('https://images.unsplash.com/photo-1497633762265-9d179a990aa6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80')">
<p class="card-title">High-School dimploma in Science</p>
<p class="card-description">During high school, I was really interested by all scientific subjects and
took a computer science option.</p>
</div>
<div class="card-about card-about-tall"
style="background-image: url('https://images.unsplash.com/photo-1600195077077-7c815f540a3d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=689&q=80')">
<p class="card-title">Preparatory classes</p>
<p class="card-description">After high school, I didn't know what I want to do. So I took Preparatory
classes in
Physics, Chemistry and engineering science</p>
</div>
<div class="card-about"
style="background-image: url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80')">
<p class="card-title">Movies</p>
<p class="card-description">Movies are a way out for me, a door to another universe, to evade me
somewhere else</p>
</div>
<div class="card-about card-about-tall"
style="background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')">
<p class="card-title">Bachelor’s degree in Computer Science</p>
<p class="card-description">After Preparatory classes, I clearly establish that computer science is the
way to go for me and I really want to be a part of this world. So, I did my bachelor at Sorbonne
Universite in computer science</p>
</div>
<div class="card-about"
style="background-image: url('https://images.unsplash.com/photo-1584634731339-252c581abfc5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1475&q=80')">
<p class="card-title">Seasonal volunteer firefighter during Covid vaccination campaign</p>
<p class="card-description">During the 2021 summer, I've volunteered to help in the Covid vaccination
campaign</p>
</div>
<div class="card-about card-about-wide"
style="background-image: url('https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')">
<p class="card-title">Internship at LIP6 labs</p>
<p class="card-description">Internship in the LIP6 Laboratory in the Decision department supervised by
Pierre-Henri
Wuillemin on the study and improvement of a tool for evaluating computer
calculation libraries</p>
</div>
<div class="card-about"
style="background-image: url('https://images.unsplash.com/photo-1513104890138-7c749659a591?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
<p class="card-title">Hybrid worker at La Pizza du Dimanche Soir</p>
<p class="card-description">Between August 2022 and Febuary 2023, I've been working at La Pizza du
Dimanche Soir as a hybrid worker.</p>
</div>
<div class="card-about card-about-wide"
style="background-image: url('https://images.unsplash.com/photo-1532989029401-439615f3d4b4?q=80&w=1888&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
<p class="card-title">Internship at INRIA Lyon</p>
<p class="card-description">Internship in the INRIA Lyon Laboratory in the Chroma team supervised by
Olivier Simonin on learning to cross a crowd with autonomous
vehicle in simulation with RL methods</p>
</div>
<div class="card-about card-about-tall"
style="background-image: url('https://images.unsplash.com/photo-1589254066213-a0c9dc853511?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80')">
<p class="card-title">Master’s degree in Artificial Intelligence</p>
<p class="card-description">A throughout my study, I've been initiated to Artificial Intelligence and
choose to continue in the domain. I have understood that AI can solve many problems and help us
remove laborious work or at least ease painful jobs with tools adapted</p>
</div>
<div class="card-about card-about-big"
style="background-image: url('https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
<p class="card-title">Now I'm looking for a job</p>
<p class="card-description">Now I am seeking roles as an AI Engineer (ML, NLP, or related fields), Data
Scientist, or Data Analyst, with a focus on areas like medicine, health, research, energy,
agriculture, social media, video games, and finance</p>
</div>
</div>
</section>
<div class="spacer wave2"></div>
<section id="myWork">
<h2>My Work as a Student</h2>
<p class="work-description">Here's a sample of my projects I've done as a student. I've been working on various
subject surounding Artificial Intelligence,
Decision making and Problem solving.
</p>
<!-- The hidden class is use for the fading in animation -->
<div id="My-Work">
<div class="card-project hidden">
<a href="https://github.com/White-On/BIMA_Notebook">
<h2><b>Basis of image processing 🖼️</b></h2>
<img src="images/BIMAIllustration.gif" alt="Convolution on a picture">
<p>In this course, we've explore various subject surounding image processing such as
<b>Convolution</b>, <b>Frequency filtering</b>, <b>Edge detection</b>, <b>Segmentation</b> and
more
</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/MAPSI_TME_2022">
<h2><b>Probabilistic and Statistical algorithm 📊</b></h2>
<img src="images/MAPSIIllustration.gif"
alt="Illustration of the Expectation-Maximization algorithm on 2D Gaussian">
<p>An opening to the wide world of statistic and Probability to explore the world of data</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/MRVNY/Fosyma">
<h2><b>Multi-Agents behavior and algorithm 🤝</b></h2>
<img src="images/FOSYMAIllustration.png" alt="Robot Behaviors">
<p>This course is dedicated to understand and develop complex group behavior in different groups of
agents</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/jdufou1/P-ANDROIDE">
<h2><b>Assistance to driving vehicle 🚘</b></h2>
<img src="images/PANDROIDEIllustration.gif" alt="Car simulation on Pygame">
<p>This project was a fairly simple simulation of a driving vehicle following the driving line</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/Wordle">
<h2><b>Wordle Solver 📇🧬</b></h2>
<img src="images/WordleIllustration.png" alt="Explanation of the genetic algorithm">
<p>This is a classic wordle solver with some added constraints solved by two different algorithm</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/MRVNY/MOGPL">
<h2><b>Modeling and linear program 🧩</b></h2>
<img src="images/MOGPLIllustration.png" alt="a Graph to illustration a flow problem">
<p>This Course was all around thinking outside the box and trying to solve problems through another
perspective</p>
</a>
</div>
<div class="card-project hidden">
<h2><b>Multi-Agents simulation 🌍</b></h2>
<img src="images/ecotopia.png" alt="the project logo">
<p>This project was about a Multi-Agents simulation to experiment around the organisation of a country
following the
<b>Ecotopia</b> book - <b><a href="documents\MOSIMA_GR1_RENDU_MACRO.pdf">Rapport Macro</a></b> <b><a
href="documents\MOSIMA_Rendu_Micro.pdf">Rapport Micro</a></b>
</p>
</p>
</div>
<div class="card-project hidden">
<a href="documents/Rapport_COCOMA_Satellite.pdf">
<h2><b>Scheduling observations in satellite constellations with exclusive orbit portions 🛰️</b>
</h2>
<img src="images/esop_instance_solved_Dcop.png" alt="a representation of esop instance">
<p>This project was the study of a published paper and the reimplementation of some of its methods
</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/nana-08/Pogobot-IAR">
<h2><b>Pogobot - Study on reals robots 🦾</b></h2>
<img src="images/pogo.png" alt="a image of a Pogobot">
<p>This project focuses on developing a distributed swarm robotics solution for grid dispersion</p>
</a>
</div>
</div>
<h2>Personnal Work / Explorations</h2>
<p class="work-description">These are some of my personnal project. I always want to look for something new to
work on and experiments with.
But some of those are direct replicat or slight modification of other project I've seen on the internet.
</p>
<div id="My-Work">
<div class="card-project hidden">
<a href="https://github.com/White-On/Recursive_Tree">
<h2><b>Recursive_Tree 🌳🌿🌲</b></h2>
<img src="images/RecursiveTreeNoQuote.gif" alt="Recursive Tree animation">
<p>A little experiment around recursive pattern forming Tree and the L-System</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/Basic_Wave_Function_Collapse">
<h2><b>Wave_Function_Collapse🌊🌊🌊</b></h2>
<img src="images/Wave_Function_Collapse_Demo.gif"
alt="Generation of a picture with Wave Function collapse">
<p>I did this project to train myself with Python interface tools (tkinter) and procedural
generation</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/SelfDrivingCar-1.1">
<h2><b>Self Driving Car 🚘</b></h2>
<img src="images/SelfDrivingIllustration.gif" alt="SelfDriving simulation with traffic">
<p>I've was eager to learn a bit of javascript and neural network. And with a previous experience on
another project around self Driving car, I tried this one out.</p>
</a>
</div>
<div class="card-project hidden">
<h2><b>MicroGrad🤖📏📊</b></h2>
<img src="images/MicroGrad.png" alt="A graphics describing MicroGrad">
<p>A learning project based on <a href="https://youtu.be/VMj-3S1tku0"><b>Andrej Karpathy's video</b></a>
</p>
</div>
<div class="card-project hidden">
<h2><b>CT_Scan🧫💊🧠</b></h2>
<img src="images/CTScan.png" alt="A CT scan of lungs">
<p>A learning project based on <a href="https://youtu.be/qfAS8seVYvU"><b>Mr. P Solver's video</b></a>
</p>
</div>
<div class="card-project hidden">
<h2><b>Generatively Pretrained Transformer 💭</b></h2>
<img src="images/GPTIllustration.png" alt="Model Architecture of a GPT">
<p>A learning project based on <a href="https://youtu.be/kCc8FmEb1nY"><b>Andrej Karpathy's video</b></a>
</p>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/Mosaic_Image">
<h2><b>Mosaic images 🏞️</b></h2>
<img src="images/mosaic_digital_draw.png" alt="image mosaic of a landscape">
<p>Create a big image composed with a lot of different images</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/pytypegauge">
<h2><b>Python library for better typing ✅</b></h2>
<img src="images/function.svg" alt="function symbol">
<p>The goal of the library is to encourage developers to achieve 100% type coverage in their codebases</p>
</a>
</div>
<div class="card-project hidden">
<a href="https://github.com/White-On/linkify_obsidian">
<h2><b>Auto backlink with Obsidian 🌑</b></h2>
<img src="images/linkify.gif" alt="linkify in action in Obsidian">
<p>This Python script automates the creation of backlinks in Obsidian, a powerful note-taking application that uses plain text Markdown files</p>
</a>
</div>
</section>
<!-- <div class="spacer wave3"></div> -->
<footer id="Contact">
<div id="footer-content" class="glass-panel">
<h2>Contact</h2>
<div id="footer-grid">
<div><img src="assets/phone-solid.svg" alt="phone-icon" class="footer-icons">07 50 47 61 88</div>
<div><img src="assets/envelope-solid.svg" alt="mail-icon" class="footer-icons">[email protected]
</div>
</div>
<p class="contact-description">Feel free to contact me if you have any question or if you want to work with
me
on a project</p>
</div>
</footer>
</body>
</html>