-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
371 lines (366 loc) · 40.1 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/header.css">
<link rel="stylesheet" href="assets/css/intro.css">
<link rel="stylesheet" href="assets/css/about-me.css">
<link rel="stylesheet" href="assets/css/skills.css">
<link rel="stylesheet" href="assets/css/academic.css">
<link rel="stylesheet" href="assets/css/projects.css">
<link rel="stylesheet" href="assets/css/contact.css">
<link rel="stylesheet" href="assets/css/back-to-top-button.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="assets/css/custom-scrollbar.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Joice's Portfolio</title>
</head>
<body>
<header class="header container" id="header-menu">
<div class="header__content">
<a class="header__logo" href="#intro">
<svg class="header__logo__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M9.372 86.63C-3.124 74.13-3.124 53.87 9.372 41.37C21.87 28.88 42.13 28.88 54.63 41.37L246.6 233.4C259.1 245.9 259.1 266.1 246.6 278.6L54.63 470.6C42.13 483.1 21.87 483.1 9.372 470.6C-3.124 458.1-3.124 437.9 9.372 425.4L178.7 256L9.372 86.63zM544 416C561.7 416 576 430.3 576 448C576 465.7 561.7 480 544 480H256C238.3 480 224 465.7 224 448C224 430.3 238.3 416 256 416H544z"/></svg>
<h3 class="header__logo__title">Dev Joice Gomes</h3>
</a>
<div class="mobile-menu__icon" id="mobile-menu">
<div class="mobile-menu__icon__bar mobile-menu__icon__bar--1"></div>
<div class="mobile-menu__icon__bar mobile-menu__icon__bar--2"></div>
<div class="mobile-menu__icon__bar mobile-menu__icon__bar--3"></div>
</div>
</div>
<nav class="menu" id="nav-menu">
<ul class="menu__list">
<li class="menu__list__item"><a class="menu__list__item__link" href="#about-me">Sobre mim</a></li>
<li class="menu__list__item"><a class="menu__list__item__link" href="#skills">Skills</a></li>
<li class="menu__list__item"><a class="menu__list__item__link" href="#academic">Formação</a></li>
<li class="menu__list__item"><a class="menu__list__item__link" href="#projects">Projetos</a></li>
<li class="menu__list__item"><a class="menu__list__item__link" href="#contact">Contato</a></li>
</ul>
</nav>
</header>
<section class="intro container" id="intro">
<div class="intro__img"></div>
<div class="intro__content">
<h1 class="intro__title">👋 Olá, meu nome é Joice Gomes e sou Desenvolvedora Full Stack Júnior</h1>
<p class="intro__text">Fui aluna do programa Oracle Next Education e tenho bacharelado em Nutrição.
</p>
<ul class="intro__links">
<li class="intro__links__link"><a href="https://github.com/Joi-GN" target="_blank">GitHub</a></li>
<li class="intro__links__link"><a href="https://www.linkedin.com/in/joice-gomes-dn/" target="_blank">LinkedIn</a></li>
<!-- <li class="intro__links__link"><a href="#" target="_blank">Currículo</a></li> -->
</ul>
</div>
<i class="intro__more-bellow fa-solid fa-angles-down"></i>
</section>
<section class="about-me container" id="about-me">
<h2 class="about-me__title section-title">Sobre mim</h2>
<div class="about-me__content">
<p class="about-me__content__p">
Oi! Eu me chamo Joice Gomes, me formei em Nutrição em 2020, porém em fevereiro de 2022
quando descobri o mundo da programação me apaixonei e logo comecei meus estudos.
</p>
<p class="about-me__content__p">
Tenho conhecimento em HTML, CSS, JavaScript, Java, MySQL, versionamento de
código com Git e Github, e conhecimento básico em Python. Estou estudando Angular e TypeScript
no momento. Também tenho experiência em criar sites responsivos.
</p>
<p class="about-me__content__p">
Gosto de aprender coisas novas e sou apaixonada por jogos!
</p>
</div>
</section>
<section class="skills container" id="skills">
<div>
<h2 class="skills__title--soft-skills section-title">Soft Skills</h2>
<div class="skills__content">
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M448 336v-288C448 21.49 426.5 0 400 0H96C42.98 0 0 42.98 0 96v320c0 53.02 42.98 96 96 96h320c17.67 0 32-14.33 32-31.1c0-11.72-6.607-21.52-16-27.1v-81.36C441.8 362.8 448 350.2 448 336zM143.1 128h192C344.8 128 352 135.2 352 144C352 152.8 344.8 160 336 160H143.1C135.2 160 128 152.8 128 144C128 135.2 135.2 128 143.1 128zM143.1 192h192C344.8 192 352 199.2 352 208C352 216.8 344.8 224 336 224H143.1C135.2 224 128 216.8 128 208C128 199.2 135.2 192 143.1 192zM384 448H96c-17.67 0-32-14.33-32-32c0-17.67 14.33-32 32-32h288V448z"/></svg>
<p class="skill__name">Autodidatismo</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>
<p class="skill__name">Comunicação</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
<p class="skill__name">Atenção aos detalhes</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM191.4 .0132C89.44 .3257 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.61 288.9-.2837 191.4 .0132zM192 96.01c-44.13 0-80 35.89-80 79.1C112 184.8 104.8 192 96 192S80 184.8 80 176c0-61.76 50.25-111.1 112-111.1c8.844 0 16 7.159 16 16S200.8 96.01 192 96.01z"/></svg>
<p class="skill__name">Criatividade</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M275.2 250.5c7 7.375 18.5 7.375 25.5 0l108.1-114.2c31.5-33.12 29.72-88.1-5.65-118.7c-30.88-26.75-76.75-21.9-104.9 7.724L287.1 36.91L276.8 25.28C248.7-4.345 202.7-9.194 171.1 17.56C136.7 48.18 134.7 103.2 166.4 136.3L275.2 250.5zM568.2 336.3c-13.12-17.81-38.14-21.66-55.93-8.469l-119.7 88.17h-120.6c-8.748 0-15.1-7.25-15.1-15.1c0-8.746 7.25-15.1 15.1-15.1h78.25c15.1 0 30.75-10.87 33.37-26.62c3.25-19.1-12.12-37.37-31.62-37.37H191.1c-26.1 0-53.12 9.25-74.12 26.25l-46.5 37.74l-55.37-.0253c-8.748 0-15.1 7.275-15.1 16.02L.0001 496C.0001 504.8 7.251 512 15.1 512h346.1c22.03 0 43.92-7.187 61.7-20.28l135.1-99.51C577.5 379.1 581.3 354.1 568.2 336.3z"/></svg>
<p class="skill__name">Empatia</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M334.6 217.4l-30 27.49C264 282.1 217.8 256.8 202.9 240.6C176 211.2 178.1 165.7 207.3 138.9L289.1 64H282.5C224.7 64 169.1 86.95 128.2 127.8L32 128.1c-17.6 0-32 14.39-32 31.98v159.8c0 17.59 14.4 32.04 31.1 32.04l114.3-.0604l90.5 81.82c27.5 22.37 67.75 18.11 90-9.255l18.12 15.25c15.88 12.1 39.38 10.5 52.38-5.369l31.38-38.6l5.374 4.498c13.75 11 33.88 9.002 45-4.748l9.576-11.83c11.08-13.7 8.979-33.75-4.701-44.86L334.6 217.4zM608 128.1l-96-.1257c-40.98-40.96-96.56-63.88-154.5-63.88L348.9 64c-8 0-15.62 3.197-21.62 8.568L229 162.3C228.9 162.5 228.8 162.7 228.8 162.7C212 178.5 212.4 203.3 226.6 218.7c9.625 10.5 35 21.62 56.13 2.75c0-.125 .25-.125 .375-.25l80-73.1c6.5-5.871 16.62-5.496 22.62 1s5.5 16.62-1 22.62l-26.12 23.87l145.6 118.1c12.12 9.992 19.5 23.49 22.12 37.98L608 351.7c17.6 0 32-14.38 32-31.98V160.1C640 142.4 625.7 128.1 608 128.1z"/></svg>
<p class="skill__name">Colaboração</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z"/></svg>
<p class="skill__name">Organização</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 224h-44l-26.12-53.25c-12.5-25.5-35.38-44.25-61.75-51L197 98.63C189.5 96.84 181.1 95.97 174.5 95.97c-20.88 0-41.33 6.81-58.26 19.78L76.5 146.3C68.31 152.5 64.01 162 64.01 171.6c0 17.11 13.67 32.02 32.02 32.02c6.808 0 13.67-2.158 19.47-6.616l39.63-30.38c5.92-4.488 13.01-6.787 19.53-6.787c2.017 0 3.981 .2196 5.841 .6623l14.62 4.25l-37.5 87.5C154.1 260.3 152.5 268.8 152.5 277.2c0 22.09 11.49 43.52 31.51 55.29l85 50.13l-27.5 87.75c-.9875 3.174-1.458 6.388-1.458 9.55c0 13.65 8.757 26.31 22.46 30.58C265.6 511.5 268.9 512 272 512c13.62 0 26.25-8.75 30.5-22.5l31.75-101c1.211-4.278 1.796-8.625 1.796-12.93c0-16.57-8.661-32.51-23.55-41.44l-61.13-36.12l31.25-78.38l20.25 41.5C310.9 277.4 327.9 288 345.1 288H400c17.62 0 32-14.38 32-32C432 238.3 417.6 224 400 224zM288 96c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48S261.5 96 288 96zM129.8 317.5L114.9 352H48c-17.62 0-32 14.38-32 32s14.38 32 32 32h77.5c19.25 0 36.5-11.5 44-29.12l8.875-20.5l-10.75-6.25C150.4 349.9 137.6 334.8 129.8 317.5z"/></svg>
<p class="skill__name">Proatividade</p>
</div>
</div>
</div>
<div>
<h2 class="skills__title--hard-skills section-title">Hard Skills</h2>
<div class="skills__content">
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg>
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg>
<p class="skill__name">HTML + CSS</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg>
<p class="skill__name">JavaScript</p>
</div>
<div class="skill">
<svg class="skill__icon" fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" rx="50" width="512"/><rect height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="var(--bg-color)" fill-rule="evenodd"/></svg>
<p class="skill__name">TypeScript Básico</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/></svg>
<p class="skill__name">Angular Básico</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M277.74 312.9c9.8-6.7 23.4-12.5 23.4-12.5s-38.7 7-77.2 10.2c-47.1 3.9-97.7 4.7-123.1 1.3-60.1-8 33-30.1 33-30.1s-36.1-2.4-80.6 19c-52.5 25.4 130 37 224.5 12.1zm-85.4-32.1c-19-42.7-83.1-80.2 0-145.8C296 53.2 242.84 0 242.84 0c21.5 84.5-75.6 110.1-110.7 162.6-23.9 35.9 11.7 74.4 60.2 118.2zm114.6-176.2c.1 0-175.2 43.8-91.5 140.2 24.7 28.4-6.5 54-6.5 54s62.7-32.4 33.9-72.9c-26.9-37.8-47.5-56.6 64.1-121.3zm-6.1 270.5a12.19 12.19 0 0 1-2 2.6c128.3-33.7 81.1-118.9 19.8-97.3a17.33 17.33 0 0 0-8.2 6.3 70.45 70.45 0 0 1 11-3c31-6.5 75.5 41.5-20.6 91.4zM348 437.4s14.5 11.9-15.9 21.2c-57.9 17.5-240.8 22.8-291.6.7-18.3-7.9 16-19 26.8-21.3 11.2-2.4 17.7-2 17.7-2-20.3-14.3-131.3 28.1-56.4 40.2C232.84 509.4 401 461.3 348 437.4zM124.44 396c-78.7 22 47.9 67.4 148.1 24.5a185.89 185.89 0 0 1-28.2-13.8c-44.7 8.5-65.4 9.1-106 4.5-33.5-3.8-13.9-15.2-13.9-15.2zm179.8 97.2c-78.7 14.8-175.8 13.1-233.3 3.6 0-.1 11.8 9.7 72.4 13.6 92.2 5.9 233.8-3.3 237.1-46.9 0 0-6.4 16.5-76.2 29.7zM260.64 353c-59.2 11.4-93.5 11.1-136.8 6.6-33.5-3.5-11.6-19.7-11.6-19.7-86.8 28.8 48.2 61.4 169.5 25.9a60.37 60.37 0 0 1-21.1-12.8z"/></svg>
<p class="skill__name">Java</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z"/></svg>
<p class="skill__name">SQL</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/></svg>
<p class="skill__name">Python Básico</p>
</div>
<div class="skill">
<svg class="skill__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M448 164C459 164 468 172.1 468 184V188H528C539 188 548 196.1 548 208C548 219 539 228 528 228H526L524.4 232.5C515.5 256.1 501.9 279.1 484.7 297.9C485.6 298.4 486.5 298.1 487.4 299.5L506.3 310.8C515.8 316.5 518.8 328.8 513.1 338.3C507.5 347.8 495.2 350.8 485.7 345.1L466.8 333.8C462.4 331.1 457.1 328.3 453.7 325.3C443.2 332.8 431.8 339.3 419.8 344.7L416.1 346.3C406 350.8 394.2 346.2 389.7 336.1C385.2 326 389.8 314.2 399.9 309.7L403.5 308.1C409.9 305.2 416.1 301.1 422 298.3L409.9 286.1C402 278.3 402 265.7 409.9 257.9C417.7 250 430.3 250 438.1 257.9L452.7 272.4L453.3 272.1C465.7 259.9 475.8 244.7 483.1 227.1H376C364.1 227.1 356 219 356 207.1C356 196.1 364.1 187.1 376 187.1H428V183.1C428 172.1 436.1 163.1 448 163.1L448 164zM160 233.2L179 276H140.1L160 233.2zM0 128C0 92.65 28.65 64 64 64H576C611.3 64 640 92.65 640 128V384C640 419.3 611.3 448 576 448H64C28.65 448 0 419.3 0 384V128zM320 384H576V128H320V384zM178.3 175.9C175.1 168.7 167.9 164 160 164C152.1 164 144.9 168.7 141.7 175.9L77.72 319.9C73.24 329.1 77.78 341.8 87.88 346.3C97.97 350.8 109.8 346.2 114.3 336.1L123.2 315.1H196.8L205.7 336.1C210.2 346.2 222 350.8 232.1 346.3C242.2 341.8 246.8 329.1 242.3 319.9L178.3 175.9z"/></svg>
<p class="skill__name">Inglês Avançado</p>
</div>
</div>
</div>
</section>
<section class="academic container" id="academic">
<h2 class="academic__title section-title">Formações</h2>
<div class="academic__content">
<div class="course">
<div class="course__img-container"><div class="course__img course__img--facu"></div></div>
<h4 class="course__title">Nutrição</h4>
<p class="course__subtitle">2020 - Unifametro</p>
</div>
<div class="course">
<div class="course__img-container"><div class="course__img course__img--one"></div></div>
<h4 class="course__title">Oracle Next Education</h4>
<p class="course__subtitle">2022 - Alura</p>
</div>
</div>
</section>
<section class="projects container" id="projects">
<h2 class="projects__title section-title">Projetos</h2>
<div class="projects__content">
<div class="project">
<img src="assets/img/projects/computers-store.png" height="350px" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Computers Store</h3>
<h4 class="project__info__languages">Angular, TypeScript</h4>
<p class="project__info__description">
Site E-commerce fictício desenvolvido com Angular.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/computers-store" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/computers-store/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/todolistapp.png" height="350px" class="project__img">
<div class="project__info">
<h3 class="project__info__title">To Do List App</h3>
<h4 class="project__info__languages">Java, SQL</h4>
<p class="project__info__description">
Em construção. Aplicativo de Desktop para anotar tarefas com conexão com banco de dados MySQL
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/to-do-list-app" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<!-- <a href="" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a> -->
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/conversor.gif" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Conversores</h3>
<h4 class="project__info__languages">Java</h4>
<p class="project__info__description">
Aplicação conversora de moedas e temperatura utilizando a biblioteca javax.swing.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/conversores-java" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<!-- <a href="" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a> -->
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/one-geek.png" class="project__img">
<div class="project__info">
<h3 class="project__info__title">One Geek Games Store</h3>
<h4 class="project__info__languages">HTML, CSS e JavaScript</h4>
<p class="project__info__description">
Site E-commerce fictício com operações CRUD e validações de dados de formulários.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/one-geek-games-store" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/one-geek-games-store/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/jogo-forca.png" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Jogo da Forca</h3>
<h4 class="project__info__languages">HTML, CSS e JavaScript</h4>
<p class="project__info__description">
O jogo escolhe aleatoriamente uma palavra dentre o array de palavras. O jogador tenta adivinhar as letras selecionando pelo teclado ou botões na tela.
Se errar, o script irá desenhar a forca no canvas. Se acertar, desenhará as letras certas.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/jogo-da-forca-js" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/jogo-da-forca-js/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/gerador-senha.png" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Gerador de Senhas</h3>
<h4 class="project__info__languages">HTML, CSS e JavaScript</h4>
<p class="project__info__description">
Com o gerador pode-se gerar uma senha aleatória escolhendo o tamanho da senha e a opção de incluir letras maiúsculas e minúsculas, símbolos e números.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/gerador-senha-js" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/gerador-senha-js/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/codificador.png" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Codificador de Texto</h3>
<h4 class="project__info__languages">HTML, CSS e JavaScript</h4>
<p class="project__info__description">
Site que criptografa o texto digitado e retorna o texto criptografado que pode ser copiado para a área de transferência ao apertar o botão de copiar texto. Também pode-se descriptografar o texto criptografado.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/codificador_de_texto_js" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/codificador_de_texto_js/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/instagram.png" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Cópia da Interface do Instagram</h3>
<h4 class="project__info__languages">HTML e CSS</h4>
<p class="project__info__description">
A página é uma cópia da Interface de login do Instagram em inglês e responsiva.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/INSTAGRAMLOGINPAGE-recriando-interface-instagram" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/INSTAGRAMLOGINPAGE-recriando-interface-instagram/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="project">
<img src="assets/img/projects/snake-game.gif" class="project__img">
<div class="project__info">
<h3 class="project__info__title">Jogo da cobrinha</h3>
<h4 class="project__info__languages">HTML, CSS e JavaScript</h4>
<p class="project__info__description">
Jogo da cobrinha utilizando canvas e JavaScript para desenhar a cobrinha e a comida.
</p>
<div class="project__buttons">
<a href="https://github.com/Joi-GN/SNAKE-THE-GAME-recriando-jogo-serpente" class="project__buttons__button project__buttons__button--repo" target="_blank">Repositório</a>
<a href="https://joi-gn.github.io/SNAKE-THE-GAME-recriando-jogo-serpente/" class="project__buttons__button project__buttons__button--demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<a href="https://github.com/Joi-GN?tab=repositories" class="projects__button" target="_blank">Mais projetos</a>
</div>
</section>
<section class="contact container" id="contact">
<h2 class="contact__title section-title">Contato</h2>
<h4 class="contact__subtitle">Quer entrar em contato comigo?
Você pode me contatar pelo <a class="contact__subtitle__link" href="https://www.linkedin.com/in/joice-gomes-dn/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
ou enviar um email para <a class="contact__subtitle__link" href="mailto:devjoicegomes@gmail.com">devjoicegomes@gmail.com</a>.
</h4>
<p class="contact__notice">Formulário em construção - Não funcional</p>
<div class="contact__content">
<div class="contact__img"></div>
<form class="contact__form">
<fieldset class="contact__form__fieldset">
<div class="form__field">
<label for="name" class="form__field__label">Nome</label>
<input type="text" id="name" class="form__field__input" name="name" data-type="name" minlength="3" maxlength="50" required>
<span class="form__field__error-message"></span>
</div>
<div class="form__field">
<label for="email" class="form__field__label">Email</label>
<input type="email" id="email" class="form__field__input" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" data-type="email" required>
<span class="form__field__error-message"></span>
</div>
<div class="form__field">
<label for="subject" class="form__field__label">Assunto</label>
<input type="text" id="subject" class="form__field__input" name="subject" data-type="subject" minlength="3" maxlength="50" required>
<span class="form__field__error-message"></span>
</div>
<div class="form__field">
<label for="message" class="form__field__label">Mensagem</label>
<textarea id="message" cols="30" rows="10" class="form__field__input form__field__input--textarea" name="message" data-type="message" minlength="5" maxlength="300" required></textarea>
<div>
<span class="form__field__error-message"></span>
<span class="form__field__chars-count" data-form-char-count>0/300</span>
</div>
</div>
</fieldset>
<input disabled id="submit" type="submit" value="Enviar mensagem" class="form__field__submit" data-type="submit">
</form>
</div>
</section>
<a href="#intro">
<svg class="back-to-top-button hide" id="back-to-top-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 254.6c-12.5 12.5-32.75 12.5-45.25 0L288 205.3V384c0 17.69-14.33 32-32 32s-32-14.31-32-32V205.3L174.6 254.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l103.1-103.1C241.3 97.4 251.1 96 256 96c4.881 0 14.65 1.391 22.65 9.398l103.1 103.1C395.1 221.9 395.1 242.1 382.6 254.6z"/></svg>
</a>
<footer class="footer container">
<p class="footer__text">
Desenvolvido por Joice Gomes © 2023
<br>
devjoicegomes@gmail.com
</p>
<ul class="footer__links">
<li class="footer__links__item">
<a class="footer__links__item__link" href="https://github.com/Joi-GN" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"/></svg>
</a>
</li>
<li class="footer__links__item">
<a class="footer__links__item__link" href="https://www.linkedin.com/in/joice-gomes-dn/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
</a>
</li>
</ul>
</footer>
<script type="module" src="assets/js/main.js"></script>
<script src="https://kit.fontawesome.com/9555ff22ed.js" crossorigin="anonymous"></script>
</body>
</html>