-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
502 lines (472 loc) · 20.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🐧 Rayen Portfolio</title>
<link rel="stylesheet" href="CSS/index_style.css" />
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</head>
<body>
<header>
<nav class="top_bar">
<div class="header__nav">
<a href="#home" id="navbar_logo">Home</a>
<div class="nav_toggle" id ="mobile_menu">
<span class="bar"></span> <span class="bar"></span> <span class="bar"></span>
</div>
<ul class="nav_menu">
<li class="nav_item"><a href="#Experience">Experience</a></li>
<li class="nav_item"><a href="#Studium">Education</a></li>
<li class="nav_item"><a href="#it skills">Skills & Projects</a></li>
<li class="nav_item"><a href="#about me" >About me</a></li>
<li class="nav_item"><a href="#socials">Contact</a></li>
<!-- <li class="nav_item"><a href="#socials">CV</a></li> -->
</ul>
</div>
</nav>
</header>
<!-- Introduction -->
<section class="intro" id="home">
<div class="intro_content">
<h4 class="intro_title">
<span class="terminal">
<i class="fa-solid fa-terminal"></i> whoami
</span>
<div class="name">Rayen Manai</div>
</h4>
<img class="intro_img" src="/Resources/home-page-pictures/rayen2.jpg" alt="Rayen Manai">
<h3 class="intro_subtitle">Software Engineering Elite Graduate Program Student</h3>
<h3 class="intro_subtitle2">Working Student Software Developer at <a href="https://www.adesso.de" target="_blank" rel="noopener noreferrer">adesso SE</a></h3>
<div class="description">
<p>
Welcome to my digital realm, where bits and bytes come to life and algorithms dance in harmony. With a curious mind and a drive to excel, I am committed to pushing boundaries, exploring new frontiers, and harnessing the power of innovation.
Join me on this journey as I showcase my endeavors, projects, and aspirations in the world of computer science.
</p>
</div>
</div>
</section>
<!-- Experience -->
<section class="experience" id="Experience">
<h1 class="experience_title">
<strong>Work Experience</strong>
</h1>
<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">01/2024 - present: Working Student: Software Developer at adesso SE</h3>
<ul>
<li>Fullstack development and testing responsibilities within a Scrum methodology framework</li>
<li>Completion of various full stack development trainings: Spring Boot, Angular, Docker</li>
</ul>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">06/2023 - 12/2023: Working Student: IT Administration at TAP SG</h3>
<ul>
<li>IT Support: Troubleshooting and providing technical support</li>
<li>Deployment of Security Policies</li>
<li>M365 Tenant Administration</li>
<li>IT Documentation</li>
<li>Creating and managing system permissions</li>
<li>Monitoring</li>
</ul>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">10/2022 - 04/2023: Assistant Teacher, Technical University of Munich, Discrete Structures</h3>
<ul><li>Weekly tutorials</li>
<li>Homework correction</li>
<li>Exam correction</li></ul>
</div>
</div>
</div>
</div>
</section>
<!-- Studium-->
<section id="Studium">
<div class="studium">
<h1 class="experience_title">
<strong>
Education
</strong>
</h1>
<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">2024 - 2026: Software Engineering - Elite Graduate Program</h3>
<ul>
<li>Elite Program from the three universities (TUM, LMU, UniA) geared towards the top 2 percent of students in computer science</li>
<li>Focus on Software Engineering, Database Systems and Formal Methods</li>
<li>One of the 21 students to get accepted out of more than 1000 applicants</li>
</ul>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">2021 - 2024: Technical University Munich BSc Computer Science</h3>
<ul>
<li>Expected graduation in 2024</li>
<li>Current Grade: 1.6</li>
<li>Application Subject: Mathematics </li>
</ul>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">2020 - 2021: Leibniz University Hannover, Lower Saxony Preparatory Foundation</h3>
<ul><li>University Entrance Exam, Grade: 1.1</li>
<li>German language course</li></ul>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">2016 - 2020: Elite High School in Tunisia with focus on Mathematics</h3>
<ul><li>Top 10 of the year, Grade: 1.16 (Tunisia)</li>
<li>Top of the year in my region (Jendouba)</li>
<li>Awarded a Scholarship from the Tunisian Government in cooperation with the DAAD</li></ul>
</div>
</div>
</div>
</div>
</div>
<h3 class="education_title">
<strong>
Software Engineering - Elite Graduate Program @TUM, LMU, UniA
</strong>
</h3>
<div class="studium_logo">
<img src="/Resources/home-page-pictures/se.png">
</div>
<div class="studium_element">
<h4>
Curriculum <i class="fa-solid fa-table-list" fa-fw></i><a href="https://elite-se.informatik.uni-augsburg.de/curriculum/"> <br>( <i class="fa fa-link"></i> Link )
</a>
</h4>
</div>
<div class="cover">
<button class="left" onclick="showPrevMasterCard()">
<i class="fas fa-angle-double-left"></i>
</button>
<div class="layout">
<div class="studium_card_master active">
<h4><strong style="color:bisque;">1.Semester</strong></h4>
<h4>
Project Management
</h4>
<h4>
Software Engineering
</h4>
<h4>
Formal Methods
</h4>
<h4>
Database Systems
</h4>
<h4>
Soft Skills Trainings (Teamwork and conflicts in teams, Presentation techniques and Authors workshop)
</h4>
</div>
</div>
<button class="right" onclick="showNextMasterCard()">
<i class="fas fa-angle-double-right"></i>
</button>
</div>
<h3 class="education_title">
<strong>
Bachelor of Science Informatics @TUM
</strong>
</h3>
<div class="studium_element">
<h4>
Curriculum <i class="fa-solid fa-table-list" fa-fw></i><a href="https://www.in.tum.de/fuer-studierende/bachelor-studiengaenge/informatik/studienplan/studienbeginn-ab-wise-202122/"> <br>( <i class="fa fa-link"></i> Link )
</a>
</h4>
</div>
<div class="cover">
<button class="left" onclick="showPrevCard()">
<i class="fas fa-angle-double-left"></i>
</button>
<div class="layout">
<div class="studium_card active">
<h4><strong style="color:bisque;">1.Semester</strong></h4>
<h4>
Diskrete Strukturen
</h4>
<h4>
Einführung in die Informatik & Grundlagenpraktikum: Programmierung
</h4>
<h4>
Einführung in die Rechnerarchitektur 👨💻
</h4>
<h4>
Deutsch im Bachelorstudium C1 - Informatik: Wissenschaftliche Texte verstehen und schreiben
</h4>
</div>
<div class="studium_card">
<h4><strong style="color:bisque;">2.Semester</strong></h4>
<h4>
Einführung in die Softwaretechnik
</h4>
<h4>
Grundlagen: Algorithmen und Datenstrukturen
</h4>
<h4>
Funktionale Programmierung und Verifikation
</h4>
<h4>
Lineare Algebra für Informatik
</h4>
<h4>
Grundlagenpraktikum: Rechnerarchitektur
</h4>
</div>
<div class="studium_card">
<h4><strong style="color:bisque;">3.Semester</strong></h4>
<h4>
Grundlagen: Datenbanken
</h4>
<h4>
Grundlagen: Betriebssysteme und Systemsoftware
</h4>
<h4>
IT-Sicherheit
</h4>
<h4>
Analysis für Informatik
</h4>
<h4>
Numerisches Programmieren
</h4><h4>
Concepts of C++ programming
</h4>
</div>
<div class="studium_card">
<h4><strong style="color:bisque;">4.Semester</strong></h4>
<h4>
Grundlagen: Rechnernetze und Verteilte Systeme
</h4>
<h4>
Einführung in die Theoretische Informatik
</h4>
<h4>
Diskrete Wahrscheinlichkeitstheorie
</h4>
<h4>
Modellbildung und Simulation (Fokus Analysis)
</h4>
<h4>
Seminar: Computational Methods for X-ray Computed Tomography </h4>
</div>
<div class="studium_card">
<h4><strong style="color:bisque;">5.Semester</strong></h4>
<h4>
Applied Regression
</h4>
<h4>
Bachelor-Praktikum - Scientific Computing (PSE) Molekulardynamik
</h4>
<h4>
Fundamentals of Artificial Intelligence
</h4>
<h4>
Netzsicherheit
</h4>
<h4>
English for Academic Purposes: Gateway to English Master's C1
</h4>
</div>
<div class="studium_card">
<h4><strong style="color:bisque;">6.Semester</strong></h4>
<h4>
Bachelor's Thesis: Evaluation of Methods for Enhancing the Integrity of Web Applications
</h4>
<h4>
Security Engineering
</h4>
<h4>
Introduction to Data Science and Statistical Thinking
</h4>
</div>
</div>
<button class="right" onclick="showNextCard()">
<i class="fas fa-angle-double-right"></i>
</button>
</div>
<div class="thesis-box">
<h3>Bachelor's Thesis</h3>
<h4 style="color:bisque;">Evaluation of Methods for Enhancing the Integrity of Web Applications</h4>
<i class="fas fa-graduation-cap thesis-icon"></i>
<p>
Unlike downloadable mobile apps, which are usually packaged and signed, giving providers control over the usage of their signing key, web applications are served directly
to users upon request. This exposes users to potential risks,
as malicious actors could serve altered JavaScript code with harmful intent. Existing security policies often overlook scenarios where the main application server is
compromised, particularly when an attacker gains control over a system terminating TLS connections, compromising end-to-end integrity between the client and content owner.
This thesis aims to evaluate and compare existing solutions for addressing these attack vectors, establish criteria for evaluation, and propose an abstract solution with a
practical implementation to demonstrate its effectiveness.
</p>
<div class="thesis-links">
<a href="Subpages/bachelor-thesis.html" class="thesis-link">
<i class="fa fa-info-circle"></i> Read More
</a>
</div>
</div>
</section>
<!-- IT Skills & Projects-->
<section class="IT_Skills" id="it skills">
<h1 class="section_title">
<strong>Skills & Projects </strong>
</h1>
<div class="layout2">
<div class="skill_card">
<h4>
Languages and Frameworks<br> <br> <i class="fa-solid fa-laptop-code" style="font-size: 3em;"></i><br>
</h4>
<i class="devicon-java-plain-wordmark colored" style="font-size: 2.5em;"></i>
<i class="devicon-c-plain colored" style="font-size: 2.5em;"></i>
<i class="devicon-cplusplus-plain colored" style="font-size: 2.5em;"></i>
<i class="devicon-python-plain colored" style="font-size: 2.5em;"></i>
<i class="devicon-html5-plain-wordmark colored" style="font-size: 2.5em;"></i>
<i class="devicon-css3-plain-wordmark colored" style="font-size: 2.5em;"></i>
<i class="devicon-javascript-plain colored" style="font-size: 2.5em;"></i>
<i class="devicon-angularjs-plain colored" style="font-size: 2.5em;"></i>
<i class="devicon-spring-original colored" style="font-size: 2.5em;"></i>
</div>
<div class="skill_card">
<h4>
Database and Infrastructure <br> <br> <i class="fa-solid fa-database"style="font-size: 3em;"></i><br>
</h4>
<i class="devicon-mysql-plain-wordmark colored" style="font-size: 2.5em;"></i>
<i class="devicon-postgresql-plain-wordmark colored" style="font-size: 2.5em;"></i>
<i class="devicon-linux-plain" style="font-size: 2.5em;"></i>
<i class="devicon-docker-plain-wordmark colored" style="font-size: 2.5em;"></i>
</div>
<div class="skill_card">
<h4>
Development Tools and Practices <br> <br> <i class="fa-solid fa-code-branch" style="font-size: 3em;"></i> <br>
</h4>
<i class="devicon-git-plain-wordmark colored" style="font-size: 2.5em;"></i>
<i class="devicon-gitlab-plain-wordmark" style="font-size: 2.5em;"></i>
<i class="devicon-github-original-wordmark" style="font-size: 2.5em;"></i>
<i class="devicon-githubactions-plain" style="font-size: 2.5em;"></i>
<i class="devicon-jenkins-plain" style="font-size: 2.5em;"></i>
<i class="devicon-sonarqube-plain-wordmark" style="font-size: 2.5em;"></i>
</div>
</div>
<div class="work">
<div class="container">
<div class="workcard">
<img src="/Resources/home-page-pictures/Git-Icon.png" class="card__image">
<p class="card__name">Introduction to VCS & Git <i class="fa fa-github"></i></p>
<div class="grid-container">
<p>I created this article after learning about Git and GitHub on Coursera. It's a simple guide that teaches the basics of version control. Using easy examples, it shows how Git tracks changes in projects. This helps people work together on code efficiently.</p>
</div>
<form action="https://rayenmanai.github.io/Subpages/vcs.html" method="get" target="_blank">
<button type="submit" class="btn draw-border">Link <span>↗</span> </button>
</form>
</div>
<div class="workcard">
<img src="/Resources/home-page-pictures/Ferienakademie2022.jpg" alt="Person" class="card__image">
<p class="card__name">Ferienakademie 2022</p>
<div class="grid-container">
<p><strong>Modern Approaches to Optimization and Verification in Computer Science: </strong>
<br>
<br> I presented a 30-minute talk on deductive verification. I explained how deductive verification ensures software correctness using formal proofs and logical reasoning. Sharing real examples, I highlighted its importance in enhancing software reliability and contributing to computer science optimization and verification.
</p>
</div>
<form action="https://github.com/RayenManai/Deductive-Verification-Talk-Slides" method="get" target="_blank">
<button type="submit" class="btn draw-border">Link <span>↗</span> </button>
</form>
</div>
<div class="workcard">
<img src="/Resources/home-page-pictures/SheppLogan_Phantom.png" class="card__image">
<p class="card__name">Seminar X-ray Computed Tomography</p>
<div class="grid-container">
<p>
I presented a one-hour lesson where I gave an Introduction to X-ray computed tomography and the basic mathematics needed for it.
This work is based on the first three chapters of the book Computed Tomography: Algorithms, Insight, and Just Enough Theory by Per Christian Hansen, Jakob Sauer Jorgensen, and William R.B. Lionheart.
</p>
</div>
<form action="https://github.com/RayenManai/Seminar-X-ray-CT.git" method="get" target="_blank">
<button type="submit" class="btn draw-border">Link <span>↗</span> </button>
</form>
</div>
<div class="workcard">
<img src="/Resources/home-page-pictures/Ferienakademie2023.jpg" class="card__image">
<p class="card__name">Ferienakademie 2023</p>
<div class="grid-container">
<p><strong>Computational Medical Imaging:</strong>
<br>
<br> I presented a 30-Min Talk about Backpropagation and training Neural Networks.
<br> Projects: implementation of an autograd engine(micrograd) / regularized iterative reconstruction for X-ray CT.
<br> The course focuses on advanced image processing tasks like tomographic reconstruction and the synergy between deep learning and classical variational methods in medical imaging.
</p>
</div>
<form action="https://github.com/RayenManai/Backpropagation-and-training-neural-networks" method="get" target="_blank">
<button type="submit" class="btn draw-border">Link <span>↗</span> </button>
</form>
</div>
<div class="workcard">
<img src="/Resources/home-page-pictures/MolSim.png" class="card__image">
<p class="card__name">Developing a Molecular Dynamics Simulation</p>
<div class="grid-container">
<p><strong>Bachelor Practical course PSE Molecular Dynamics:</strong>
<br>
<br>Particle Representation: Implementation of particle representations.
<br>Force Calculation: Algorithms for computing inter-particle forces.
<br>Output and Visualization: Output formats and tools for visualizing simulation results.
<br> This course specializes in the integration of best practices in software engineering with the focus on optimizing scientific computations for conducting molecular dynamics simulations.
<br>
<br><strong style="color:bisque;">Used Technologies: C++, CMake, CI, GoogleTest, Doxygen, spdlog, OpenMP</strong>
</p>
</div>
<form action="https://github.com/klaramozna/PSEMolDyn_GroupD" method="get" target="_blank">
<button type="submit" class="btn draw-border">Link <span>↗</span> </button>
</form>
</div>
</div>
</div>
</section>
<!-- About me -->
<section class="about_me" id="about me">
<div class="about_me_container">
<h1 class="section_title">
<strong> About me </strong>
</h1>
<h4><strong> <i class="fa-solid fa-terminal"></i> whoami</strong></h4>
<p>Hey! I’m Rayen, a computer science student from Tunisia, currently in my sixth semester at the Technical University of Munich. Living in Germany and diving deep into the world of tech has been an exciting journey filled with challenges, learning, and growth.</p>
<h4><strong>Why creating this website ?</strong></h4>
<p>It all started with a YouTube video by Chuck Keith (NetworkChuck). He said something that really stuck with me: "You could be that person for someone else, and even if you inspire just one person, it’s worth it."
This website is my way of doing just that—sharing my experiences, habits and insights. It’s also a personal project where I’m putting what I’ve learned into practice. Whether it's coding, study hacks or inspiration, I hope you find something here that resonates with you.
</p>
<h4>Beyond the Code</h4>
<p>Life isn't just about computer screens and algorithms! When I'm not coding, you’ll likely find me at the gym working out, traveling to new places, or watching football games. I’m also a fan of League of Legends. I used to play quite a bit when I was younger, but now I just enjoy chilling and watching the competitions. And of course, I’m always down for a good concert.</p>
</div>
</section>
<!-- footer-->
<footer>
<div class="footer-content" id="socials">
<h3>Rayen Manai</h3>
<ul class="socials">
<li><a href="mailto:[email protected]"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://www.facebook.com/rayen.mannai.5/"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://www.instagram.com/rayen.manai_/" ><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.linkedin.com/in/rayen-manai-24595a236/" ><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://github.com/RayenManai" ><i class="fa fa-github"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p id="copyright"></p>
</div>
</footer>
</body>
<script src="Resources/scripts/app.js"></script>
</html>