-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
391 lines (373 loc) · 21.8 KB
/
index.html
File metadata and controls
391 lines (373 loc) · 21.8 KB
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./public/images/logoHR.png" type="image/x-icon">
<title>Hugo Rochelle</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<a href="#" class="logo-container">
<img src="./public/images/logoHR.png" alt="Logo">
<div class="logo">Hugo Rochelle</div>
</a>
<ul class="menu">
<li><a href="#home" class="menu-btn">Accueil</a></li>
<li><a href="#about" class="menu-btn">À propos</a></li>
<li><a href="#formations" class="menu-btn">Formations</a></li>
<li><a href="#experiences" class="menu-btn">Expériences</a></li>
<li><a href="#tech-skills" class="menu-btn">Compétences</a></li>
<li><a href="#projects" class="menu-btn">Projets</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
</ul>
<button class="menu-btn">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Bonjour, je m'appelle</div>
<div class="text-2">Hugo Rochelle</div>
<div class="text-3">Et je suis un <span class="typing"></span></div>
<a href="#about">À propos de moi</a>
</div>
</div>
</section>
<!-- About section start -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title">À propos de moi</h2>
<div class="about-content">
<div class="column left">
<img src="./public/images/niagara.jpg" alt="Profile Picture">
</div>
<div class="column right">
<div class="text">Je m'appelle Hugo Rochelle et je suis un <span class="typing-2"></span></div>
<p>
Salut ! Je suis un développeur junior de 20 ans. Depuis mon plus jeune âge, je suis très curieux et
j'adore découvrir et apprendre de nouvelles choses ou concepts. Je suis passionné d'Histoire et de sport,
et comme vous avez pu le voir le orange est ma couleur préféré.
J'adore écouter de la musique quand je marche, conduis et plus généralement tout le temps !
Voyager est aussi une autre de mes passions, j'ai notamment vécu au Canada pendant 7 mois à Chicoutimi (QC)
pour mes études (en 2ème année de BUT), et c'est pour moi une expérience de vie très importante et que je chéris
beaucoup ! Après mes études j'aimerais beaucoup retourner au Canada, mais cette fois pour y travailler !
</p>
<br>
<p style="font-style: italic;">
Fun Fact: Cette photo a été prise au milieu des chutes du Fer-à-Cheval (Chutes du Niagara), à la frontière entre les États-Unis et le Canada, et comme vous pouvez le voir j'étais trempé !
</p>
<br/>
<a href="CV_Hugo_ROCHELLE.pdf" download="CV_Hugo_ROCHELLE.pdf" target="_blank" class="btn-download">
<i class="fas fa-download"></i> Télécharger mon CV
</a>
</div>
</div>
</div>
</section>
<!-- Formations section start -->
<section class="formations" id="formations">
<div class="max-width">
<h2 class="title">Formations</h2>
<div class="formations-content">
<a href="https://www.ecole-hexagone.com/fr/fr/cursus/architecture-des-si/" class="card" target="_blank">
<div class="box">
<div class="text">
<img src="./public/images/logo_hexagone.png" alt="Logo École Hexagone" class="formation-logo">
Mastère Architecture des Systèmes d’Information
</div>
<p>École Hexagone, Clermont-Ferrand<br>2024 - 2026</p>
<p class="description">Je vais suivre cette formation pendant 2 ans tout en travaillant en alternance chez Euromaster afin de me spécialiser dans la conception et l'architecture de solutions informatiques.</p>
</div>
</a>
<a href="https://www.uqac.ca/" class="card" target="_blank">
<div class="box">
<div class="text">
<img src="./public/images/uqac.png" alt="Logo UQAC" class="formation-logo">
Échange universitaire au Canada
</div>
<p>Université du Québec À Chicoutimi (UQAC), Canada, QC<br>2022 - 2023 (S4 + Stage)</p>
<p class="description">Cette expérience à l'UQAC m'a permis de découvrir une nouvelle culture.
J'ai eu la chance de pouvoir faire mon semestre 4 dans cette université et d'approfondir mes compétences
techniques (Kotlin, Mathématiques, Anglais, Forage de données ...). J'ai également pu faire mon stage à l'UQAC
dans un contexte de recherche, et découvrir le domaine de la collecte et de l'analyse de données
de manière plus approfondie.</p>
</div>
</a>
<a href="https://iut.uca.fr/formations/but-informatique-clermont" class="card" target="_blank">
<div class="box">
<div class="text">
<img src="./public/images/uca_logo.png" alt="Logo IUT Clermont Auvergne" class="formation-logo">
BUT Informatique
</div>
<p>IUT Clermont Auvergne, Aubière<br>2021 - 2024</p>
<p class="description">Durant cette formation, j'ai acquis des bases solides en développement d'applications,
en administration de systèmes informatiques communicants, en bases de données et en algorithmique.
J'ai acquis des compétences en conception et modelisation d'applications.
J'ai également pu découvrir d'autres domaines comme le droit, l'économie ou la conduite d'un projet.</p>
</div>
</a>
</div>
</div>
</section>
<!-- Experiences Section -->
<section class="experiences" id="experiences">
<div class="max-width">
<h2 class="title">Expériences Professionnelles</h2>
<div class="exp-content">
<div class="exp-card">
<div class="box">
<div class="logo-container">
<img src="./public/images/euromaster.png" alt="Logo Entreprise" class="company-logo">
<div class="text">Euromaster</div>
</div>
<div class="position">Développeur ServiceNow (Alternance)</div>
<div class="duration">Sept 2023 - Présent</div>
<p>Développement et administration de la plateforme ServiceNow, mise en place de l'application mobile "Now Mobile". Travail au sein d'une équipe agile dans un contexte international. J'ai pu développer mes compétences techniques, comme le développement sur ServiceNow et le JavaScript, mais aussi ma faculté d'intégration et de travail au sein d'une équipe informatique, mon aisance à l'oral, aussi bien en Français qu'en Anglais ainsi que mon autonomie.</p>
</div>
</div>
<div class="exp-card">
<div class="box">
<div class="logo-container">
<img src="./public/images/at2e.jfif" alt="Logo Entreprise" class="company-logo">
<div class="text">AT2E Médical</div>
</div>
<div class="position">Ouvrier</div>
<div class="duration">2020 - 2021 - 2022</div>
<p>Travail saisonnier. J'ai pu découvrir le domaine de la radiologie et apprendre comment démonter des gaines de tubes à rayons X. J'ai pu travailler dans une petite équipe et développer ma capacité d'adaptation et mon autonomie.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Tech Skills Section -->
<section class="tech-skills" id="tech-skills">
<div class="max-width">
<h2 class="title">Compétences Techniques</h2>
<div class="tech-skills-content">
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg" alt="HTML" class="tech-logo">
<div class="text">HTML</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg" alt="CSS" class="tech-logo">
<div class="text">CSS</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="JavaScript" class="tech-logo">
<div class="text">JavaScript</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg" alt="React" class="tech-logo">
<div class="text">React</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg" alt="TypeScript" class="tech-logo">
<div class="text">TypeScript</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg" alt="Python" class="tech-logo">
<div class="text">Python</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg" alt="Java" class="tech-logo">
<div class="text">Java</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/cplusplus/cplusplus-original.svg" alt="C++" class="tech-logo">
<div class="text">C++</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg" alt="C" class="tech-logo">
<div class="text">C</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg" alt="C#" class="tech-logo">
<div class="text">C#</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original.svg" alt="PostgreSQL" class="tech-logo">
<div class="text">PostgreSQL</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original.svg" alt="MongoDB" class="tech-logo">
<div class="text">MongoDB</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/symfony/symfony-original.svg" alt="Symfony" class="tech-logo">
<div class="text">Symfony</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg" alt="PHP" class="tech-logo">
<div class="text">PHP</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-original.svg" alt="Bash" class="tech-logo">
<div class="text">Bash</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original.svg" alt="Angular" class="tech-logo">
<div class="text">Angular</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg" alt="Node.js" class="tech-logo">
<div class="text">Node.js</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/github/github-original.svg" alt="GitHub" class="tech-logo">
<div class="text">GitHub</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/kotlin/kotlin-original.svg" alt="Kotlin" class="tech-logo">
<div class="text">Kotlin</div>
</div>
<div class="skill-card">
<img src="https://www.primefaces.org/wp-content/uploads/2018/05/primeng-logo.png" alt="PrimeNG" class="tech-logo">
<div class="text">PrimeNG</div>
</div>
<div class="skill-card">
<img src="https://www.primefaces.org/cdn/primeflex/images/PrimeFlexLogo.svg" alt="PrimeFlex" class="tech-logo">
<div class="text">PrimeFlex</div>
</div>
<div class="skill-card">
<img src="https://play-lh.googleusercontent.com/HdfHZ5jnfMM1Ep7XpPaVdFIVSRx82wKlRC_qmnHx9H1E4aWNp4WKoOcH0x95NAnuYg" alt="ServiceNow" class="tech-logo">
<div class="text">ServiceNow</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg" alt="Linux" class="tech-logo">
<div class="text">Linux</div>
</div>
<div class="skill-card">
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/kubernetes/kubernetes-plain.svg" alt="Kubernetes" class="tech-logo">
<div class="text">Kubernetes</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section class="projects" id="projects">
<div class="max-width">
<h2 class="title">Projets</h2>
<div class="carousel-container">
<button class="custom-prev-btn"><</button>
<div class="owl-carousel owl-theme">
<div class="project-card">
<img src="./public/images/Answerz.png" alt="Answerz image" class="project-image">
<div class="box">
<div class="text">Projet : AnswerZ</div>
<p>Technologies utilisées: Angular, TypeScript, PrimeFlex, PrimeNG, NestJS</p>
<p>Une application web avec un design responsive qui se décompose en 2 parties : une partie "flashcard" pour s'entrainer à associer 2 mots ensemble et une partie quiz en ligne pour jouer entre amis !</p>
</div>
</div>
<div class="project-card">
<img src="./public/images/maxwin.png" alt="Maxwin image" class="project-image">
<div class="box">
<div class="text">Projet : MaxWin</div>
<p>Technologies utilisées: Symfony, Twig, JavaScript</p>
<p>Une application web de casino en ligne avec une machine à sous fonctionnelle, la possibilité de déposer de l'argent (fictif) de retirer de l'argent (fictif). La machine a une 3 boutons: le lancer normal, le lancer automatique et le lancer rapide.</p>
</div>
</div>
<div class="project-card">
<img src="./public/images/Polar.svg" alt="Polar image" class="project-image">
<div class="box">
<div class="text">Stage: Collecte et analyse de données</div>
<p>Technologies utilisées: Python, Pandas, Matplotlib, Scikit Learn</p>
<p>Projet de recherche mené au sein des laboratoires de l'UQAC, afin de savoir quel gestes était-il possible de reconnaitre grâce à un bracelet Polar OH1. Établissement et réalisation d'un protocole expérimental de collecte de données. Traitement et analyse des résultats afin de déterminer la possiblité ou non de reconnaitre ces gestes.</p>
</div>
</div>
<div class="project-card">
<img src="./public/images/platane.png" alt="Platane image" class="project-image">
<div class="box">
<div class="text">Projet : Platane</div>
<p>Technologies utilisées: Kotlin, Firebase</p>
<p>Une application mobile permettant à des proches de rester en contact malgré la distance qui les sépare. L'application propose une messagerie commune, une carte du monde pour voir la position de chacun, une gallerie commune ainsi qu'une filmothèque.</p>
</div>
</div>
</div>
<button class="custom-next-btn">></button>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contactez moi</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Restons en contact !</div>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Nom</div>
<div class="sub-title">Hugo Rochelle</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Situé à</div>
<div class="sub-title">Clermont-Ferrand</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title"><a href="mailto:hugo.rochelle@gmail.com">hugo.rochelle@gmail.com</a></div>
</div>
</div>
</div>
</div>
<div class="column right">
<form id="contact-form">
<div class="fields">
<div class="field name">
<label for="name">Nom</label>
<input type="text" id="name" name="name" placeholder="Votre Nom" required>
</div>
<div class="field email">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Votre Email" required>
</div>
</div>
<div class="field textarea">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Votre Message" required></textarea>
</div>
<div class="button-area">
<button type="submit">Envoyer</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="footer" role="contentinfo">
<div class="max-width">
<p>© 2024 Hugo Rochelle. Tous droits réservés.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/hugo-rochelle-991090178/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
<i class="fab fa-linkedin linkedin-icon"></i>
</a>
<a href="https://github.com/HugoooR" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<i class="fab fa-github github-icon"></i>
</a>
</div>
</div>
</footer>
</body>
</html>