-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
261 lines (255 loc) · 16.5 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV - Clara Mauro-Gioan</title>
<link rel="icon" type="image/x-icon" href="src/img/favicon.ico">
<link rel="stylesheet" href="src/css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="src/css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="header__photo">
<img src="src/img/photo-cv.webp" alt="Photo CV Clara Mauro-Gioan">
</div>
<div class="header__content">
<h1 class="header__content__title">Clara Mauro-Gioan</h1>
<h2 class="header__content__subtitle">
<em>Développeuse web fullstack Javascript | React | Node.JS</em>
</h2>
<p class="header__content__text">
Après 6 ans en tant qu’infirmière, mon souhait de reconversion et ma curiosité m’ont amenée à découvrir le <em>développement informatique</em>.
Trouvant un réel plaisir à apprendre en autodidacte et à coder des <em>applications web</em>, j’ai intégré une formation chez O’clock afin de me professionnaliser.
</p>
<p class="header__content__text">
Aujourd’hui, je recherche un stage de 2 à 6 mois à compter de février 2025 pour acquérir une première expérience professionnelle concrète dans le <em>développement web</em> et perfectionner mes compétences aux côtés de personnes plus expérimentées.
</p>
</div>
</header>
<main class="main">
<aside class="sidebar">
<section class="sidebar__section sidebar__section--infos">
<h3 class="sidebar__title">Informations</h3>
<ul>
<li class="infos__item">
<img class="sidebar-icon" src="src/img/map-pin-icon.svg" alt="icône point sur une carte">
<div>Nice, France</div>
</li>
<li class="infos__item">
<img class="sidebar-icon sidebar-icon--mail" src="src/img/mail-icon.svg" alt="icône mail">
<a class="mail-link" href="mailto:maurog.clara@gmail.com">maurog.clara@gmail.com</a>
</li>
<li class="infos__item">
<img class="sidebar-icon" src="src/img/phone-icon.svg" alt="icône téléphone">
<a href="tel:+33611659046">+33 6 11 65 90 46</a>
</li>
<li class="infos__item">
<img class="sidebar-icon" src="src/img/github-icon.svg" alt="icône GitHub">
<a href="https://github.com/claramauro" target="_blank" title="Lien vers GitHub">claramauro</a>
</li>
<li class="infos__item">
<img class="sidebar-icon" src="src/img/linkedin-icon.svg" alt="icône Linkedin">
<a href="https://www.linkedin.com/in/clara-mauro-gioan" target="_blank" title="Lien vers Linkedin">Clara Mauro-Gioan</a>
</li>
</ul>
</section>
<section class="sidebar__section sidebar__section--techno">
<h3 class="sidebar__title">Technologies</h3>
<ul>
<li class="techno__item">
<h4>Langages de programmation :</h4>
<p>HTML, CSS, <em>Javascript</em>, TypeScript</p>
</li>
<li class="techno__item">
<h4>Frameworks et bibliothèques :</h4>
<p><em>Node.JS</em>, Express, Fastify, EJS, Bootstrap, <em>React</em></p>
</li>
<li class="techno__item">
<h4>Base de données :</h4>
<p>SQL (PostgreSQL), ORM (Sequelize), NoSQL</p>
</li>
<li class="techno__item">
<h4>Autres :</h4>
<p>Versionning <em>Git</em> (GitHub), <em>Docker</em>, API RESTful, <em>Responsive design</em>, Préprocesseur SASS, <em>accessibilité</em>, Figma</p>
</li>
</ul>
</section>
<section class="sidebar__section sidebar__section--softskills">
<h3 class="sidebar__title">Qualités personnelles</h3>
<ul class="softskills__list">
<li class="softskills softskills--sidebar">Organisée</li>
<li class="softskills softskills--sidebar">Réfléchie</li>
<li class="softskills softskills--sidebar">Perfectionniste</li>
<li class="softskills softskills--sidebar">Curieuse</li>
<li class="softskills softskills--sidebar">Loyale</li>
</ul>
</section>
<section class="sidebar__section sidebar__section--diverse">
<h3 class="sidebar__title">Divers</h3>
<ul>
<li class="divers__item">
<img class="sidebar-icon sidebar-icon--languages" src="src/img/languages-icon.svg" alt="icône langages">
<span>Français (langue maternelle), Anglais niveau CECRL B1</span>
</li>
<li class="divers__item">
<img class="sidebar-icon" src="src/img/heart-icon.svg" alt="icône représantant le thême des centres d'interêts">
<div>
<h4>Centres d'intérêts :</h4>
<p>Plongée sous marine (niveau PADI Advenced OW)</p>
<p>Voyages : découvrir de nouveaux paysages, des cultures et des gastronomies différentes.</p>
</div>
</li>
</ul>
</section>
</aside>
<section class="main-content">
<section class="content__section">
<h3 class="content__section__title">Expériences</h3>
<ul class="content__section__list">
<li class="content__item">
<div class="border-deco"></div>
<h4 class="content__item__title">Développeuse web fullstack</h4>
<div class="print--flex">
<p class="content__item__infos">Projet de fin de formation - École O'clock</p>
<span class="print-content"> - </span>
<time class="content__item__period" datetime="2024-11">novembre 2024 </time>
</div>
<p>
<a href="https://petfosterconnect.onrender.com" title="Lien vers PetFosterConnect" target="_blank">PetFosterConnect <span class="print-content">(petfosterconnect.onrender.com)</span></a>
: Application web connectant associations de protection animale et familles d'accueil temporaires.</p>
<ul class="content__item__sublist">
<li>Réalisation en équipe, de la conception au déploiement du MVP (4 sprints d'une semaine).</li>
<li>Élaboration cahier des charges, user stories, wireframes, maquettes, modélisation de la base de données</li>
<li>Développement fullstack</li>
<li> Technologies :
<ul class="li__sublist">
<li>Front : Single Page App React + Typescript, SASS, Bootstrap-React, Vite</li>
<li>Back : API Rest, Node.js, Express.js, PostgreSQL, Sequelize</li>
<li>Autres : Docker, Git, accessibilité</li>
</ul>
</li>
</ul>
<li class="content__item">
<div class="border-deco"></div>
<h4 class="content__item__title">Développeuse web fullstack</h4>
<div class="print--flex">
<p class="content__item__infos">Projet individuel en cours de formation - École O'clock</p>
<span class="print-content"> - </span>
<time class="content__item__period" datetime="2024-08">août 2024 </time>
</div>
<p>
<a href="https://ocoffee.claramauro.fr/" title="Lien vers oCoffee" target="_blank">oCoffee <span class="print-content">(ocoffee.claramauro.fr)</span></a>
: Site vitrine fictif avec un back-office
</p>
<ul class="content__item__sublist">
<li>Intégration web à partir de wireframes et user stories</li>
<li>Développement fullstack, modélisation base de données</li>
<li>Technologies : Javascript, Node.js, Express.js, PostgreSQL, HTML/CSS, Git, accessibilité</li>
</ul>
</li>
<li class="content__item">
<div class="border-deco"></div>
<h4 class="content__item__title">Infirmière Diplomée d'État</h4>
<div class="print--flex">
<p class="content__item__infos">Laboratoire d'Analyses Médicales Cerballiance - Nice</p>
<span class="print-content"> - </span>
<div class="content__item__period">
<time datetime="2022-10">10/2022 </time> - <time datetime="2023-12"> 12/2022</time>
</div>
</div>
<div class="print--flex">
<p class="content__item__infos">Chirurgie réparatrice, esthétique et de la main - CHU de Nice</p>
<span class="print-content"> - </span>
<div class="content__item__period">
<time datetime="2016-07">2016 </time> - <time datetime="2022-08">2022</time>
</div>
</div>
<h5>Compétences transversales :</h5>
<ul class="softskills__list softskills__list--main">
<li class="softskills softskills--main">Organisation</li>
<li class="softskills softskills--main">Planification</li>
<li class="softskills softskills--main">Travail en équipe</li>
<li class="softskills softskills--main">Communication</li>
<li class="softskills softskills--main">Gestion du stress</li>
<li class="softskills softskills--main">Encadrement</li>
</ul>
<p class="softskills--print">Organisation, planification, travail en équipe, communication, gestion du stress, encadrement </p>
</li>
</ul>
</section>
<section class="content__section">
<h3 class="content__section__title">Formations</h3>
<ul class="content__section__list">
<li class="content__item">
<div class="border-deco"></div>
<div class="print--flex">
<h4 class="content__item__title">Certification <em>Opquast</em> - Assurance qualité web</h4>
<span class="print-content"> - </span>
<div class="content__item__period">
<time datetime="2024-10">octobre 2024 </time>
</div>
</div>
<p>
Intégrer les règles et le vocabulaire assurance qualité web dans sa pratique professionnelle
</p>
<p>Note : 933/1000 points (expert)</p>
<a href="https://www.opquast.com/" target="_blank" class="print--hide">Opquast.com</a>
</li>
<li class="content__item">
<div class="border-deco"></div>
<h4 class="content__item__title">Formation développement web <em>Fullstack</em> <em>Javascript</em></h4>
<div class="print--flex">
<div class="content__item__infos">École O'clock - Formation en téléprésentiel</div>
<span class="print-content"> - </span>
<div class="content__item__period">
<time datetime="2024-05">mai 2024 </time> - <time datetime="2025-01"> janvier 2025</time>
</div>
</div>
<p>
Préparation au Titre Professionnel de niveau 5 <em>Développeur Web</em> et Web Mobile (inscrit au RNCP n°37674)
</p>
<ul class="content__item__sublist">
<li>5 mois de formation théorique, 1 mois de projet de fin de formation en équipe</li>
<li>2 à 6 mois de stage professionnalisant</li>
</ul>
</li>
<li class="content__item">
<div class="border-deco"></div>
<div class="print--flex">
<h4 class="content__item__title content__item__infos">Apprentissage du développement web en autodidacte</h4>
<span class="print-content"> - </span>
<div class="content__item__period">
<time datetime="2023">2023 </time> - <time datetime="2024">2024</time>
</div>
</div>
<ul class="content__item__sublist">
<li>HTML, CSS, <em>JS</em> front et back (Node.JS et Fastify), SQL (MySQL et SQlite)</li>
</ul>
</li>
<li class="content__item">
<div class="border-deco"></div>
<h4 class="content__item__title">Diplôme d’État Infirmier</h4>
<div class="print--flex">
<div class="content__item__infos">IFSI du CHU de Nice</div>
<span class="print-content"> - </span>
<div class="content__item__period">
<time datetime="2013-09">septembre 2013 </time> - <time datetime="2016-07"> juillet 2016</time>
</div>
</div>
</li>
</ul>
</section>
<a class="btn" href="/CV_Clara_Mauro-Gioan.pdf" target="_blank" title="Télécharger le CV en PDF">
<img class="btn__icon" src="src/img/pdf-icon.svg" alt="Télécharger le CV en PDF">
Télécharger
</a>
</section>
</main>
</div>
</body>
</html>