-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
488 lines (432 loc) · 23 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
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MMSGT3VQ');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio de Jérôme Arnoult, développeur web spécialisé en front-end, back-end et SEO. Découvrez ses projets et compétences.">
<meta name="keywords" content="développeur web, développement web, portfolio développeur, front-end, back-end, HTML, CSS, JavaScript, Jérôme Arnoult, SEO, création de sites web, design web, optimisation SEO">
<meta name="google-site-verification" content="_EGHFC_JiAJiQNgmBqrKfPGXvRyGy1te-2x9XpfWt6g" />
<meta name="robots" content="index, follow">
<link rel="icon" href="ressources/faviconJA-removebg-preview32px.png">
<link rel="icon" href="ressources/faviconJA-removebg-preview64px.png">
<link rel="stylesheet" href="styleMinify.css">
<title>Portfolio de Jérôme Arnoult - Développeur Web</title>
<!-- Open Graph meta tags -->
<meta property="og:title" content="Portfolio de Jérôme Arnoult - Développeur Web" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://jeromearnoult.vercel.app/" />
<meta property="og:image" content="https://jeromearnoult.vercel.app/ressources/profil2.avif" />
<meta property="og:description" content="Découvrez le portfolio de Jérôme Arnoult, développeur web spécialisé en front-end, back-end, et SEO. Explorez ses projets et compétences." />
<meta property="og:site_name" content="Jérôme Arnoult Portfolio" />
<meta property="og:locale" content="fr_FR" />
<!-- X Card meta tags (for better Twitter sharing) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Portfolio de Jérôme Arnoult - Développeur Web" />
<meta name="twitter:description" content="Explorez les projets et compétences de Jérôme Arnoult, développeur web spécialisé en front-end, back-end, et SEO." />
<meta name="twitter:image" content="https://jeromearnoult.vercel.app/ressources/profil2.avif" />
<meta name="twitter:url" content="https://jeromearnoult.vercel.app/" />
</head>
<!-- TODO : Liens pour la partie portfolio -->
<!-- TODO : templateBack -->
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MMSGT3VQ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Barre de progression au scroll -->
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<!-- Bouton gauche menu mobile -->
<div class="btn-rond-menu">
<div class="cont-ligne">
<div class="ligne-unique"></div>
</div>
</div>
<!-- Navigation verticale -->
<nav aria-label="Navigation principale" class="nav-gauche">
<div class="blocs-menu">
<div class="cercle-portrait">
<img src="ressources/profil2.avif" alt="portrait">
</div>
</div>
<div class="blocs-menu">
<span class="nav-menu-item">
<a href="#accueil">
Accueil
</a>
</span>
</div>
<div class="blocs-menu">
<span class="nav-menu-item">
<a href="#pres">
Présentation
</a>
</span>
</div>
<div class="blocs-menu">
<span class="nav-menu-item">
<a href="#port">
Portfolio
</a>
</span>
</div>
<div class="blocs-menu">
<span class="nav-menu-item">
<a href="#range">
Compétences
</a>
</span>
</div>
<div class="blocs-menu">
<span class="nav-menu-item">
<a href="#exp">
Expériences
</a>
</span>
</div>
<div class="blocs-menu">
<span class="nav-menu-item">
<a href="#contact">
Contact
</a>
</span>
</div>
<div class="blocs-menu">
<div class="logo-cercle">
<a href="mailto:[email protected]"><img src="ressources/contact.svg" alt="logo contact"></a>
</div>
</div>
</nav>
<main>
<!-------------------------------------- Accueil ------------------------------->
<section class="accueil" id="accueil">
<h1>Portfolio de Jérôme Arnoult</h1> <p class="txt-animation"></p>
<p>Je suis Jérôme Arnoult, un <strong>développeur web</strong> passionné par le front-end, le back-end et le SEO. <br>Explorez mes projets et expériences professionnelles.</p>
<a href="#port" class="btn-acc btnacc1">Portfolio</a>
<a href="#exp" class="btn-acc btnacc2">Expériences</a>
<div class="medias">
<a href="https://github.com/JeromeArnoult" target="blank">
<div class="media media1">
<img src="ressources/github.svg" alt="github icone" class="icone-medias">
</div>
</a>
<a href="https://www.linkedin.com/in/j%C3%A9r%C3%B4me-arnoult/" target="blank">
<div class="media media2">
<img src="ressources/linkedin.svg" alt="linkedin icone" class="icone-medias">
</div>
</a>
</div>
<!-- Btn "Pulse" -->
<a href="#pres" aria-label="Dirige vers la présentation" >
<div class="btn-rond">
<img src="ressources/arrowDown.svg" alt="logo fleche bas" class="logo-btn-rond-acc">
</div>
</a>
</section>
<!---------------------- Présentation ----------------------------------->
<section class="presentation" id="pres">
<h2 class="titre-pres">Ma reconversion professionnelle</h2>
<div class="container-presentation">
<div class="fond-forme"></div>
<div class="pres-gauche">
<h3>En bref !</h3>
<hr>
<p>Après une riche expérience de 15 ans en bureau
d’études automobiles, j’ai pris la décision de changer
de cap et de m’épanouir dans un nouveau domaine.
Durant ma carrière j'ai particulièrement pris plaisir à créer des outils pour les autres : méthode de réparation, outils Excel, méthode de fabrication ...<br>
Démontrant ainsi ma capacité à
développer des solutions pratiques et efficaces pour
les autres. Passionné par le numérique et les
nouvelles technologies. Le développement Web s’est
imposé à moi comme une évidence. Je suis désormais
plus que jamais prêt à m'investir dans cette nouvelle
carrière !</p>
</div>
<div class="pres-doite">
<ul class="liste-presentation">
<li class="item-liste i1">
<span class="chiffre-style">1.</span>
<p class="txt-liste">Développeur Front-end</p>
</li>
<li class="item-liste i2">
<span class="chiffre-style">2.</span>
<p class="txt-liste">Développeur Back-end</p>
</li>
<li class="item-liste i3">
<span class="chiffre-style">3.</span>
<p class="txt-liste">SEO</p>
</li>
<li class="item-liste i4">
<span class="chiffre-style">4.</span>
<p class="txt-liste">Gestion de projet</p>
</li>
<li class="item-liste i5">
<span class="chiffre-style">5.</span>
<p class="txt-liste">UX Design</p>
</li>
</ul>
</div>
</div>
</section>
<!--------------------- Portfolio --------------------------------->
<section class="portfolio" id="port">
<h2 class="titre-port">Mon portfolio</h2>
<div class="cont-portfolio">
<div class="item vague1">
<div class="cont-img-port">
<img src="ressources/clicknfun.avif" alt="Page de connexion de l'application Click-n-Fun" >
</div>
<h3>Click-n-Fun</h3>
<p>Projet de groupe dans le cadre de la formation, organisation de sorties. Réalisé avec Symfony</p>
<a href="#" class="btn-projets">Découvrez le projet</a>
</div>
<div class="item vague1">
<div class="cont-img-port">
<img src="ressources/bucket_list.png" alt="Page d'inscription de l'application Bucket-List">
</div>
<h3>Bucket-list</h3>
<p>Projet symfony</p>
<a href="https://github.com/JeromeArnoult/Bucket-list"class="btn-projets" target="blank">Découvrez le projet</a>
</div>
<div class="item vague1">
<div class="cont-img-port">
<img src="ressources/messagerie.avif" alt="Page de l'application messagerie, système de chat fait avec le framework Angular">
</div>
<h3>Messagerie</h3>
<p>Projet Angular</p>
<a href="https://github.com/JeromeArnoult/tpMessagerieV2" target="blank" class="btn-projets">Découvrez le projet</a>
</div>
<div class="item vague1">
<div class="cont-img-port">
<img src="ressources/BlogNodeJsPetFriend.avif" alt="Page d'accueil du blog Pet Friends">
</div>
<h3>Blog PetFriends</h3>
<p>Projet NodeJs/Express (En cours)</p>
<a href="https://github.com/JeromeArnoult/NodeJs-Blog.git" target="blank" class="btn-projets">Découvrez le projet</a>
</div>
<div class="item vague1">
<div class="cont-img-port">
<img src="ressources/Tee_DevDetailArticle.avif" alt="Page de détail d'un article du projet Tee-Dev" >
</div>
<h3>Tee Dev (Site e-commerce fictif)</h3>
<p>Projet Symfony</p>
<a href="https://github.com/TonyMascate/projetstage-eni.git" target="blank" class="btn-projets">Découvrez le projet</a>
</div>
<!-- Conteneur pour l'image agrandie -->
<div id="modal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img-agrandie">
<div id="caption"></div>
</div>
</div>
</section>
<!----------------- Compétences --------------------------------->
<section class="section-range" id="range">
<h2 class="titre-exp">Mes compétences</h2>
<div class="grille-skill">
<div class="range-cont">
<p class="label-skill">UI / UX</p>
<p class="number-skill">70%</p>
<div class="barre-skill b1"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">SEO</p>
<p class="number-skill">90%</p>
<div class="barre-skill b2"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">HTML</p>
<p class="number-skill">90%</p>
<div class="barre-skill b3"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">CSS</p>
<p class="number-skill">90%</p>
<div class="barre-skill b4"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">JavaScript</p>
<p class="number-skill">60%</p>
<div class="barre-skill b5"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">Symfony</p>
<p class="number-skill">75%</p>
<div class="barre-skill b6"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">Gestion projet</p>
<p class="number-skill">70%</p>
<div class="barre-skill b7"></div>
<div class="barre-grises"></div>
</div>
<div class="range-cont">
<p class="label-skill">PHP</p>
<p class="number-skill">75%</p>
<div class="barre-skill b8"></div>
<div class="barre-grises"></div>
</div>
</div>
</section>
<!------------------------ Expériences ----------------------------------------->
<section class="travail-exp" id="exp">
<h2 class="titre-travail-exp">Mes expériences</h2>
<div class="cont-exp-travail">
<div class="barre-verticale">
<div class="boule-ico">
<a href="https://www.abc-conception.com/" target="_blank"><img src="ressources/logoABCConception.png" alt="icone ABC Conception"></a>
</div>
<div class="boule-ico">
<a href="https://www.eni-ecole.fr/ecole/campus-en-ligne/" target="_blank"><img src="ressources/eni-group-home.png" alt="icone ENI"></a>
</div>
<div class="boule-ico">
<img src="ressources/tecalimite.png" alt="icone tecalemit">
</div>
<div class="boule-ico">
<a href="https://distributeur.groupauto.fr/fr" target="_blank"><img src="ressources/groupeAuto.png" alt="icone GroupAuto"></a>
</div>
<div class="boule-ico">
<a href="https://www.bertrandt.com/" target="_blank"><img src="ressources/bertrandt.png" alt="icone bertrandt"></a>
</div>
<div class="boule-ico">
<a href="https://www.nbtech.fr/v1/" target="_blank"><img src="ressources/nbtech.png" alt="icone nbtech"></a>
</div>
<div class="boule-ico">
<a href="https://www.segulatechnologies.com/fr/" target="_blank"><img src="ressources/segula.png" alt="icone segula"></a>
</div>
<div class="boule-ico">
<a href="https://www.fev.com/" target="_blank"> <img src="ressources/fev.ico" alt="icone Fav/d2T"></a>
</div>
<div class="boule-ico">
<a href="#"><img src="ressources/arrow_top.png" alt="icone flèche"></a>
</div>
</div>
<div class="flex-cont-bloc-exp">
<div class="bloc bloc1">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target="_blank" href="https://www.abc-conception.com/">ABC Conception</a>, 2024</p>
<p class="txt-section">Stage Développeur Web :</p>
<ul>
<li>Back-end en PHP/Symfony</li>
<li>Front-end dynamique avec Twig et Javascript</li>
<li>Modélisation des données UML</li>
<li>Gestion base de données SQL</li>
<li>Optimisation SEO</li>
</ul>
</div>
</div>
<div class="bloc bloc1">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target="_blank" href="https://www.eni-ecole.fr/">ENI école informatique</a>, 2023 - 2024</p><br>
<p class="txt-section">Projets informatiques développés à l’ENI Ecole Informatique :<br>
Développement d’un site d’enchères sous Java EE et SQL Server :<br>
application web organisée en couches.
Analyse, conception et développement d’un site d’organisation d’évènements
avec PHP et MySQL : définition de tests et d’outils de passage des tests.</p>
</div>
</div>
<div class="bloc bloc2">
<div class="contenu-bloc">
<p class="titre-section-bloc">TECALEMIT Flexibles, 2020 - 2022</p><br>
<p class="txt-section">Fabrication de tubes extrudés en polyamide
Mise au point de nouvelles productions
Organisation et planification des productions
Gestion documentaire de l’activité
Rédaction dossiers de fabrication et de contrôle des projets de l’entreprise (Assemblage de flexibles de classe 3).
Mise à jour des procédures de l’entreprise</p>
</div>
</div>
<div class="bloc bloc3">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target="_blank" href="https://www.groupauto-france.fr/">ADF-ROUSSEL</a>, 2019 - 2020</p><br>
<p class="txt-section">Gestion des commandes B to B par téléphone, Internet et comptoir.</p>
</div>
</div>
<div class="bloc bloc4">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target="_blank" href="https://www.bertrandt.com/">BERTRANDT</a>, 2017 - 2019</p><br>
<p class="txt-section">Analyse des pièces incidentées en retours garantie du réseau.
Contrôle conformité des process usine et fournisseur.
Montage des pièces incidentés sur véhicule pour essai routier, piste et banc climatique.
Gestion des dossiers d'incidents, suivi des indicateurs qualité avec la direction, le bureau
d'études et les fournisseurs à l'international.
Rédaction des comptes rendus et synthèse.
Reporting hebdomadaire et mensuel.</p>
</div>
</div>
<div class="bloc bloc5">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target="_blank" href="https://www.bertrandt.com/">NBTech</a>, 2014 - 2017</p><br>
<p class="txt-section">Essais statiques destructif sur les éléments de structure, caisse et ouvrant selon procédures, cahier des charges et procédures de sécurité.
Validation fonction remorquage UTAC, mesure physique, torsion,flexion, raideur. Gestion des consommables, matériel de mesures et pièces de rechange. Rédaction des comptes rendu d'essai.</p>
</div>
</div>
<div class="bloc bloc6">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target=_blank href="https://www.segulatechnologies.com/fr/">SEGULA</a>, 2008 - 2014</p><br>
<p class="txt-section">Gestion d'équipe, responsable de six techniciens. Planification des projets. Gestion logistique, approvisionnement des pièces de rechange, réservation des véhicules.<br> Reporting mensuel, hebdomadaire et présentation des résultats et indicateurs aux hiérarchiques. Créations des fichiers de suivis des projets, indicateurs qualités et non conformités. Facturation, bilan et prévision budgétaire du plateau.</p>
</div>
</div>
<div class="bloc bloc7">
<div class="contenu-bloc">
<p class="titre-section-bloc"><a target=_blank href="https://www.fev.com/">ETSM-D2T</a>, 2004 - 2008</p><br>
<p class="txt-section">Pilotage banc moteur en endurance/fiabilité, suivi et analyse des données d’essais, rédaction des comptes rendu d'essai, Remplacement pièces et diagnostic.</p>
</div>
</div>
</div>
</div>
</section>
<!------------------------ Parallax-------------------------------------->
<div class="section-parallax">
<p class="txt-par">RIGUEUR</p>
<p class="txt-par">CRÉATIVITÉ </p>
<p class="txt-par">CURIOSITÉ </p>
</div>
<!--------------- Contact ----------------------------------------->
<section class="section-contact" id="contact">
<h2><span>Contactez</span> moi : <a href="mailto:[email protected]">[email protected]</a></h2>
<div class="container-form">
<!-- <form action="" class="form-bloc">
<div class="form-groupe">
<label for="prenom">Prénom</label>
<input type="text" id="prenom">
</div>
<div class="form-groupe">
<label for="nom">Nom</label>
<input type="text" id="nom">
</div>
<div class="form-groupe">
<textarea id="txt" placeholder="Votre message"></textarea>
</div>
<div class="form-groupe">
<input type="submit" value="ENVOYER" class="button-sub">
</div>
</form> -->
</div>
</section>
</main>
<footer>
<div class="foot">
<img src="ressources/faviconJA-removebg-preview32px.png" alt="Icone Jérôme Arnoult"><p>  © - Tous Droits réservés </p>
</div><!--.foot -->
</footer>
<!-- librairie TypeWriter -->
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script src="appMinify.js"></script>
</body>
</html>