-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
485 lines (447 loc) · 49.6 KB
/
index.html
File metadata and controls
485 lines (447 loc) · 49.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- SEO -->
<title>Anderson Tovar | Frontend Developer & UI/UX Designer</title>
<meta name="title" content="Anderson Tovar | Frontend Developer & UI/UX Designer" />
<meta name="description" content="Portfolio of Anderson Tovar, Frontend Developer. Developing modern, responsive, and optimized websites with HTML, CSS, JavaScript, and React." />
<meta name="keywords" content="portfolio, projects, frontend development, HTML, CSS, JavaScript" />
<meta name="author" content="Anderson Tovar" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://tusitio.com/Portafolio-website/" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://metatags.io/" />
<meta property="og:title" content="Anderson Tovar | Frontend Developer & UI/UX Designer" />
<meta property="og:description" content="Portfolio of Anderson Tovar, Frontend Developer. Developing modern, responsive, and optimized websites with HTML, CSS, JavaScript, and React." />
<meta property="og:image" content="https://ik.imagekit.io/workamts/workamts.github.io_.png?updatedAt=1758822003598" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://metatags.io/" />
<meta property="twitter:title" content="Anderson Tovar | Frontend Developer & UI/UX Designer" />
<meta property="twitter:description" content="Portfolio of Anderson Tovar, Frontend Developer. Developing modern, responsive, and optimized websites with HTML, CSS, JavaScript, and React." />
<meta property="twitter:image" content="https://ik.imagekit.io/workamts/workamts.github.io_.png?updatedAt=1758822003598" />
<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#e6f4e4" />
<!-- Favicon -->
<link rel="icon" type="image/png" href="assets/icons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="assets/icons/favicon.svg" />
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="workamts" />
<link rel="manifest" href="assets/icons/site.webmanifest" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" media="all" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" media="all" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="all" />
<!-- Main CSS file -->
<link rel="stylesheet" href="style.css" media="all" >
</head>
<body role="document" class="no-scroll">
<canvas id="spark-canvas"></canvas>
<!-- Hero Section -->
<section id="hero" aria-label="Hero section">
<div id="hero-container">
<div id="hero-bg">
<div id="hero-content">
<!-- Header -->
<header id="home" role="banner" aria-label="Main navigation bar">
<div id="header-container">
<!-- Logo container -->
<div id="header-logo-container" role="presentation" aria-hidden="true">
<a href="#home-anchor" role="link" aria-label="Go to top of the page">
<svg id="header-logo" width="150" height="40" viewBox="0 5 97 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M3.2 5.72 l2.26 9.72 l0.04 0 l2.48 -9.72 l2.94 0 l2.44 9.84 l0.04 0 l2.34 -9.84 l3.08 0 l-3.84 14.28 l-3.12 0 l-2.42 -9.72 l-0.04 0 l-2.38 9.72 l-3.18 0 l-3.78 -14.28 l3.14 0 z M24.24 9.38 c1.6533 0 2.96 0.50334 3.92 1.51 s1.44 2.3234 1.44 3.95 c0 1.64 -0.49 2.9566 -1.47 3.95 s-2.2766 1.49 -3.89 1.49 c-1.64 0 -2.94 -0.50334 -3.9 -1.51 s-1.44 -2.3166 -1.44 -3.93 c0 -1.6667 0.49 -2.9934 1.47 -3.98 s2.27 -1.48 3.87 -1.48 z M21.74 14.84 c0 1.0533 0.21334 1.8666 0.64 2.44 s1.0467 0.86 1.86 0.86 c0.84 0 1.47 -0.29334 1.89 -0.88 s0.63 -1.3933 0.63 -2.42 c0 -1.0667 -0.21666 -1.8867 -0.65 -2.46 s-1.0633 -0.86 -1.89 -0.86 c-0.8 0 -1.4133 0.28666 -1.84 0.86 s-0.64 1.3933 -0.64 2.46 z M37.48 9.38 c0.24 0 0.44668 0.03334 0.62002 0.1 l0 2.64 c-0.30666 -0.06666 -0.64666 -0.1 -1.02 -0.1 c-1.8667 0 -2.8 1.1067 -2.8 3.32 l0 4.66 l-2.84 0 l0 -10.34 l2.7 0 l0 1.92 l0.04 0 c0.28 -0.66666 0.72334 -1.2 1.33 -1.6 s1.2633 -0.6 1.97 -0.6 z M42.32 5.72 l0 7.66 l3.58 -3.72 l3.36 0 l-3.9 3.8 l4.34 6.54 l-3.44 0 l-2.84 -4.62 l-1.1 1.06 l0 3.56 l-2.84 0 l0 -14.28 l2.84 0 z M55.46 9.38 c3.0134 0.01334 4.52 0.9933 4.52 2.94 l0 5.48 c0 1.0133 0.12 1.7467 0.36 2.2 l-2.88 0 c-0.10666 -0.32 -0.17332 -0.65334 -0.19998 -1 c-0.84 0.85334 -2 1.28 -3.48 1.28 c-1.08 0 -1.9367 -0.27334 -2.57 -0.82 s-0.95 -1.3067 -0.95 -2.28 c0 -0.94666 0.3 -1.68 0.9 -2.2 c0.61334 -0.54666 1.7267 -0.89332 3.34 -1.04 c1.1467 -0.12 1.8733 -0.27 2.18 -0.45 s0.46 -0.45666 0.46 -0.83 c0 -0.46666 -0.14 -0.81332 -0.42 -1.04 s-0.74666 -0.34 -1.4 -0.34 c-0.6 0 -1.0533 0.12334 -1.36 0.37 s-0.48666 0.64332 -0.54 1.19 l-2.84 0 c0.06666 -1.1333 0.53332 -1.9933 1.4 -2.58 s2.0266 -0.88 3.48 -0.88 z M53.1 17.06 c0 0.88 0.58 1.32 1.74 1.32 c1.52 -0.01334 2.2866 -0.79334 2.3 -2.34 l0 -1.1 c-0.22666 0.22666 -0.8 0.39332 -1.72 0.49998 c-0.8 0.09334 -1.3867 0.25668 -1.76 0.49002 s-0.56 0.61 -0.56 1.13 z M68.14 9.38 c1.5067 0 2.5134 0.57332 3.02 1.72 c0.78666 -1.1467 1.8333 -1.72 3.14 -1.72 c1.2933 0 2.2434 0.32666 2.85 0.98 s0.91 1.5533 0.91 2.7 l0 6.94 l-2.84 0 l0 -5.98 c0 -0.90666 -0.13666 -1.5333 -0.41 -1.88 s-0.71668 -0.52 -1.33 -0.52 c-1.2667 0 -1.9 0.86666 -1.9 2.6 l0 5.78 l-2.84 0 l0 -6.1 c0 -0.88 -0.14 -1.48 -0.42 -1.8 s-0.71334 -0.48 -1.3 -0.48 c-0.54666 0 -1.0033 0.21666 -1.37 0.65 s-0.55 1.0033 -0.55 1.71 l0 6.02 l-2.84 0 l0 -10.34 l2.68 0 l0 1.4 l0.04 0 c0.78666 -1.12 1.84 -1.68 3.16 -1.68 z M83.9 6.56 l0.000019531 3.1 l2.08 0 l0 1.9 l-2.08 0 l0 5.12 c0 0.48 0.08 0.8 0.24 0.96 s0.48 0.24 0.96 0.24 c0.34666 0 0.64 -0.02666 0.88 -0.08 l0 2.22 c-0.4 0.06666 -0.96 0.1 -1.68 0.1 c-1.0933 0 -1.9067 -0.18666 -2.44 -0.56 s-0.8 -1.02 -0.8 -1.94 l0 -6.06 l-1.72 0 l0 -1.9 l1.72 0 l0 -3.1 l2.84 0 z M91.58 9.38 c1.3867 0 2.47 0.28002 3.25 0.84002 s1.2167 1.38 1.31 2.46 l-2.7 0 c-0.04 -0.49334 -0.22 -0.85 -0.54 -1.07 s-0.78666 -0.33 -1.4 -0.33 c-0.53334 0 -0.93 0.08 -1.19 0.24 s-0.39 0.4 -0.39 0.72 c0 0.24 0.08666 0.44 0.26 0.6 s0.43668 0.3 0.79002 0.42 s0.74334 0.22 1.17 0.3 c1.2933 0.25334 2.2066 0.51334 2.74 0.78 s0.92334 0.58666 1.17 0.96 s0.37 0.83334 0.37 1.38 c0 1.16 -0.42334 2.05 -1.27 2.67 s-1.9967 0.93 -3.45 0.93 c-1.52 0 -2.7034 -0.32666 -3.55 -0.98 s-1.2833 -1.54 -1.31 -2.66 l2.7 0 c0 0.53334 0.20666 0.95668 0.62 1.27 s0.93334 0.47 1.56 0.47 c0.53334 0 0.97668 -0.11666 1.33 -0.35 s0.53 -0.55668 0.53 -0.97002 c0 -0.26666 -0.11 -0.48666 -0.33 -0.66 s-0.53 -0.32668 -0.93 -0.46002 s-1.02 -0.28668 -1.86 -0.46002 c-0.66666 -0.13334 -1.26 -0.31334 -1.78 -0.54 s-0.91666 -0.52332 -1.19 -0.88998 s-0.41 -0.81666 -0.41 -1.35 c0 -0.68 0.16334 -1.2733 0.49 -1.78 s0.82666 -0.89 1.5 -1.15 s1.51 -0.39 2.51 -0.39 z"/>
</g>
</svg>
</a>
</div>
<!-- Hidden checkbox to toggle menu -->
<input class="checked__box"
type="checkbox"
id="open-menu"
role="switch"
aria-label="Toggle navigation menu"
aria-controls="header-nav"
aria-expanded="false"
tabindex="0"
onchange="document.getElementById('header-nav').setAttribute('aria-hidden', !this.checked); this.setAttribute('aria-expanded', this.checked);"/>
<!-- Open menu button -->
<label id="header-open-nav-button"
for="open-menu"
role="button"
aria-haspopup="true"
aria-controls="header-nav"
aria-expanded="false"
aria-label="Open main menu"
tabindex="0">
<img src="assets/icons/menu.png" width="32" height="32" role="img" alt="Open menu icon" aria-hidden="true">
</label>
<!-- Navigation Menu -->
<nav id="header-nav" role="navigation" aria-label="Main menu" tabindex="-1" aria-hidden="true">
<!-- Close menu button -->
<label id="header-nav-close-button"
for="open-menu"
role="button"
aria-label="Close main menu"
aria-haspopup="false"
tabindex="0">
<img src="assets/icons/close.svg" width="32" height="32" role="img" alt="Close menu icon" aria-hidden="true"/>
</label>
<!-- List of navigation links -->
<ul id="header-nav-list" role="menubar" aria-label="Primary navigation links">
<li class="header__nav--item" role="none">
<a href="#services" role="menuitem" aria-label="Navigate services section">Services</a>
</li>
<li class="header__nav--item" role="none">
<a href="#projects" role="menuitem" aria-label="Navigate to projects section">My Jobs</a>
</li>
<li class="header__nav--item" role="none">
<a href="#skills" role="menuitem" aria-label="Navigate to projects section">Skills</a>
</li>
<li class="header__nav--item" role="none">
<a href="#contact-section" role="menuitem" aria-label="Navigate to contact section">Contact Me</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="intro-text">
<span id="intro-text-name">HELLO, MY NAME IS ANDERSON</span>
<h1 id="hero-title" data-text="WEB DESIGNER AND DEVELOPER" tabindex="0">WEB DESIGNER AND DEVELOPER</h1>
</div>
</div>
</div>
<div id="vh-icons" aria-hidden="true">
<span id="vline"></span>
<span id="diamond"></span>
<span id="diamond-outlined"></span>
<span id="diamond"></span>
<span id="vline"></span>
</div>
<div id="hero-links" role="group" aria-label="Links to social media and contact">
<!-- CV Download Button -->
<button id="cv-btn" aria-haspopup="dialog" aria-controls="cv-modal" aria-label="Download CV">CV</button>
<!-- Modal confirmation -->
<div id="cv-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-actions">
<h2 id="modal-title">Do you want to download my CV?</h2>
<div id="modal-actions">
<a id="download-btn" href="assets/files/CV Anderson Tovar D.D Frontend.pdf" download aria-label="Download CV">Yes, download</a>
<button id="cancel-btn" aria-label="Cancel CV download">Cancel</button>
</div>
</div>
<!-- Social media buttons -->
<a class="social__btn" id="social-btn-github" href="https://github.com/workamts" target="_blank" rel="noopener noreferrer" aria-label="Visit GitHub profile" >
<i class="fab fa-github" aria-hidden="true"></i>
</a>
<a class="social__btn" id="social-btn-linkedin" href="https://www.linkedin.com/in/workamts" target="_blank" rel="noopener noreferrer" aria-label="Visit LinkedIn profile" >
<i class="fab fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</div>
</section>
<!-- Main Content -->
<main role="main">
<!-- Services Section -->
<section id="services" aria-labelledby="services-title">
<div id="services-container">
<!-- UI/UX Design -->
<div class="services__block design" aria-label="UI/UX Design">
<h2 class="services__title" id="services-title">UI/UX Design</h2>
<p class="services__text">
As a Figma designer, I am passionate about transforming ideas into clear, modern, and attractive interfaces. I focus on usability, creating prototypes that not only look good but also communicate and function well. I create user-centered experiences, ensuring visual consistency and accessibility in every detail.
</p>
</div>
<div id="striped-background" aria-hidden="true"></div>
<div id="rhombus-container" aria-hidden="true">
<div class="rhombus__outlined r1"></div>
<div class="rhombus__outlined r2"></div>
<div class="rhombus__outlined r3"></div>
</div>
<!-- Frontend Development -->
<div class="services__block development" aria-label="Frontend Development">
<h2 class="services__title" id="services-title">Frontend Development</h2>
<p class="services__text">
With experience in HTML, CSS, JavaScript, Bootstrap, and React, I turn designs into real, functional digital products. I specialize in responsive, fast, and accessible interfaces, optimized to provide the best user experience on any device. I enjoy combining design aesthetics with solid code to create complete web solutions.
</p>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" role="region" aria-labelledby="projects-heading">
<div id="portfolio-intro">
<div id="portfolio-content">
<h2 id="portfolio-title">PORTFOLIO.</h2>
<p id="portfolio-subtitle">Explore some of my latest web developments and creative projects.</p>
<p id="portfolio-description">I have worked on the development of frontend applications, interactive dashboards, and responsive websites tailored to different devices. I have also collaborated with startups, created personal projects, and developed e-commerce simulations with catalogs, carts, and simulated payments.</p>
</div>
</div>
<div id="projects-container" aria-live="polite">
<!-- Project charter template -->
<div class="project__card" role="article" aria-labelledby="project1-title">
<div class="project__container--image">
<img class="project__thumbnail" src="" width="auto" height="auto" alt="Preview of Project Name" loading="lazy" decoding="async" fetchpriority="low">
</div>
<div class="project__description">
<h4 class="project__name"></h4>
<span class="project__type--site"></span>
<p class="project__synopsis"></p>
<div class="project__container--tech-github">
<ul class="project__technologies" aria-label="Technologies used in the project">
</ul>
<svg class="project__github" width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>github [#142]</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#fff">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]"></path>
</g>
</g>
</g>
</svg>
</div>
</div>
<!-- Ver pagina -->
<span class="project__arrow"></span>
</div>
</div>
</section>
<!-- Skills Section -->
<section class="content__skills" id="skills" aria-labelledby="skills-title">
<h2 id="skills-title">Skills</h2>
<div class="skills__list--container" role="list" aria-label="List of technical skills">
<div class="skills__item--container" role="listitem">
<svg class="skills__item" height="800px" width="800px" xmlns="http://www.w3.org/2000/svg" aria-label="HTML5" role="img" viewBox="0 0 512 512" >
<path stroke="#000" stroke-width="7" fill="#e34f26" d="M71 460L30 0h451l-41 460-185 52"/>
<path fill="#ef652a" d="M256 472l149-41 35-394H256"/>
<path fill="#ebebeb" d="M256 208h-75l-5-58h80V94H114l15 171h127zm-1 147l-63-17-4-45h-56l7 89 116 32z"/>
<path fill="#ffffff" d="M255 208v57h70l-7 73-63 17v59l116-32 16-174zm0-114v56h137l5-56z"/>
</svg>
<span class="skills__item--label">Html</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" height="800px" width="800px" xmlns="http://www.w3.org/2000/svg" aria-label="CSS3" role="img" viewBox="0 0 512 512">
<path stroke="#000" stroke-width="7" fill="#264de4"
d="M72 460L30 0h451l-41 460-184 52"/>
<path fill="#2965f1"
d="M256 37V472l149-41 35-394"/>
<path fill="#ebebeb"
d="m114 94h142v56H119m5 58h132v57H129m3 28h56l4 45 64 17v59L139 382"/>
<path fill="#ffffff"
d="m256 208v57h69l-7 73-62 17v59l115-32 26-288H256v56h80l-5.5 58Z"/>
</svg>
<span class="skills__item--label">CSS</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-label="JavaScript" role="img">
<title>file_type_js_official</title>
<rect stroke="#000" stroke-width="0.3" x="2" y="2" width="28" height="28" style="fill:#f5de19"/>
<path d="M20.809,23.875a2.866,2.866,0,0,0,2.6,1.6c1.09,0,1.787-.545,1.787-1.3,0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964,0-1.973,1.5-3.476,3.853-3.476a3.889,3.889,0,0,1,3.742,2.107L25,18.128A1.789,1.789,0,0,0,23.311,17a1.145,1.145,0,0,0-1.259,1.128c0,.789.489,1.109,1.618,1.6l.658.282c2.236.959,3.5,1.936,3.5,4.133,0,2.369-1.861,3.667-4.36,3.667a5.055,5.055,0,0,1-4.795-2.691Zm-9.295.228c.413.733.789,1.353,1.693,1.353.864,0,1.41-.338,1.41-1.653V14.856h2.631v8.982c0,2.724-1.6,3.964-3.929,3.964a4.085,4.085,0,0,1-3.947-2.4Z"/>
</svg>
<span class="skills__item--label">JavaScript</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" aria-label="Bootstrap" role="img">
<path stroke="#000" stroke-width="3" d="M0 222.991C0 241.223 14.779 256 33.009 256H222.99C241.223 256 256 241.221 256 222.991V33.01C256 14.777 241.221 0 222.991 0H33.01C14.777 0 0 14.779 0 33.009V222.99z" fill="#563D7C"/>
<path d="M106.158 113.238V76.985h31.911c3.04 0 5.97.253 8.792.76 2.822.506 5.319 1.41 7.49 2.713 2.17 1.303 3.907 3.112 5.21 5.427 1.302 2.316 1.954 5.283 1.954 8.9 0 6.513-1.954 11.217-5.862 14.111-3.907 2.895-8.9 4.342-14.979 4.342h-34.516zM72.075 50.5v155h75.112c6.947 0 13.713-.868 20.298-2.605 6.585-1.737 12.446-4.414 17.584-8.032 5.137-3.618 9.226-8.286 12.265-14.002 3.04-5.717 4.559-12.483 4.559-20.298 0-9.697-2.352-17.982-7.055-24.856-4.704-6.875-11.832-11.687-21.384-14.437 6.947-3.328 12.194-7.598 15.74-12.808 3.545-5.21 5.318-11.722 5.318-19.538 0-7.236-1.194-13.314-3.582-18.235-2.388-4.92-5.753-8.864-10.095-11.831-4.341-2.967-9.551-5.102-15.63-6.404-6.078-1.303-12.808-1.954-20.189-1.954H72.075zm34.083 128.515v-42.549h37.121c7.381 0 13.315 1.7 17.802 5.102 4.486 3.401 6.73 9.081 6.73 17.041 0 4.053-.688 7.381-2.063 9.986-1.375 2.605-3.22 4.668-5.536 6.187-2.315 1.52-4.993 2.605-8.032 3.257-3.04.65-6.223.976-9.552.976h-36.47z" fill="#FFF"/>
</svg>
<span class="skills__item--label">Bootstrap</span>
</div>
<div class="skills__item--container" role="listitem">
<svg stroke="#000" stroke-width="3" class="skills__item" width="800px" height="800px" viewBox="0 -14 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" aria-label="React" role="img">
<g>
<path d="M210.483381,73.8236374 C207.827698,72.9095503 205.075867,72.0446761 202.24247,71.2267368 C202.708172,69.3261098 203.135596,67.4500894 203.515631,65.6059664 C209.753843,35.3248922 205.675082,10.9302478 191.747328,2.89849283 C178.392359,-4.80289661 156.551327,3.22703567 134.492936,22.4237776 C132.371761,24.2697233 130.244662,26.2241201 128.118477,28.2723861 C126.701777,26.917204 125.287358,25.6075897 123.876584,24.3549348 C100.758745,3.82852863 77.5866802,-4.82157937 63.6725966,3.23341515 C50.3303869,10.9571328 46.3792156,33.8904224 51.9945178,62.5880206 C52.5367729,65.3599011 53.1706189,68.1905639 53.8873982,71.068617 C50.6078941,71.9995641 47.4418534,72.9920277 44.4125156,74.0478303 C17.3093297,83.497195 0,98.3066828 0,113.667995 C0,129.533287 18.5815786,145.446423 46.8116526,155.095373 C49.0394553,155.856809 51.3511025,156.576778 53.7333796,157.260293 C52.9600965,160.37302 52.2875179,163.423318 51.7229345,166.398431 C46.3687351,194.597975 50.5500231,216.989464 63.8566899,224.664425 C77.6012619,232.590464 100.66852,224.443422 123.130185,204.809231 C124.905501,203.257196 126.687196,201.611293 128.472081,199.886102 C130.785552,202.113904 133.095375,204.222319 135.392897,206.199955 C157.14963,224.922338 178.637969,232.482469 191.932332,224.786092 C205.663234,216.837268 210.125675,192.78347 204.332202,163.5181 C203.88974,161.283006 203.374826,158.99961 202.796573,156.675661 C204.416503,156.196743 206.006814,155.702335 207.557482,155.188332 C236.905331,145.46465 256,129.745175 256,113.667995 C256,98.2510906 238.132466,83.3418093 210.483381,73.8236374 L210.483381,73.8236374 Z M204.118035,144.807565 C202.718197,145.270987 201.281904,145.718918 199.818271,146.153177 C196.578411,135.896354 192.205739,124.989735 186.854729,113.72131 C191.961041,102.721277 196.164656,91.9540963 199.313837,81.7638014 C201.93261,82.5215915 204.474374,83.3208483 206.923636,84.1643056 C230.613348,92.3195488 245.063763,104.377206 245.063763,113.667995 C245.063763,123.564379 229.457753,136.411268 204.118035,144.807565 L204.118035,144.807565 Z M193.603754,165.642007 C196.165567,178.582766 196.531475,190.282717 194.834536,199.429057 C193.309843,207.64764 190.243595,213.12715 186.452366,215.321689 C178.384612,219.991462 161.131788,213.921395 142.525146,197.909832 C140.392124,196.074366 138.243609,194.114502 136.088259,192.040261 C143.301619,184.151133 150.510878,174.979732 157.54698,164.793993 C169.922699,163.695814 181.614905,161.900447 192.218042,159.449363 C192.740247,161.555956 193.204126,163.621993 193.603754,165.642007 L193.603754,165.642007 Z M87.2761866,214.514686 C79.3938934,217.298414 73.1160375,217.378157 69.3211631,215.189998 C61.2461189,210.532528 57.8891498,192.554265 62.4682434,168.438039 C62.9927272,165.676183 63.6170041,162.839142 64.3365173,159.939216 C74.8234575,162.258154 86.4299951,163.926841 98.8353334,164.932519 C105.918826,174.899534 113.336329,184.06091 120.811247,192.08264 C119.178102,193.65928 117.551336,195.16028 115.933685,196.574699 C106.001303,205.256705 96.0479605,211.41654 87.2761866,214.514686 L87.2761866,214.514686 Z M50.3486141,144.746959 C37.8658105,140.48046 27.5570398,134.935332 20.4908634,128.884403 C14.1414664,123.446815 10.9357817,118.048415 10.9357817,113.667995 C10.9357817,104.34622 24.8334611,92.4562517 48.0123604,84.3748281 C50.8247961,83.3942121 53.7689223,82.4701001 56.8242337,81.6020363 C60.0276398,92.0224477 64.229889,102.917218 69.3011135,113.93411 C64.1642716,125.11459 59.9023288,136.182975 56.6674809,146.725506 C54.489347,146.099407 52.3791089,145.440499 50.3486141,144.746959 L50.3486141,144.746959 Z M62.7270678,60.4878073 C57.9160346,35.9004118 61.1112387,17.3525532 69.1516515,12.6982729 C77.7160924,7.74005624 96.6544653,14.8094222 116.614922,32.5329619 C117.890816,33.6657739 119.171723,34.8514442 120.456275,36.0781256 C113.018267,44.0647686 105.66866,53.1573386 98.6480514,63.0655695 C86.6081646,64.1815215 75.0831931,65.9741531 64.4868907,68.3746571 C63.8206914,65.6948233 63.2305903,63.0619242 62.7270678,60.4878073 L62.7270678,60.4878073 Z M173.153901,87.7550367 C170.620796,83.3796304 168.020249,79.1076627 165.369124,74.9523483 C173.537126,75.9849113 181.362914,77.3555864 188.712066,79.0329319 C186.505679,86.1041206 183.755673,93.4974728 180.518546,101.076741 C178.196419,96.6680702 175.740322,92.2229454 173.153901,87.7550367 L173.153901,87.7550367 Z M128.122121,43.8938899 C133.166461,49.3588189 138.218091,55.4603279 143.186789,62.0803968 C138.179814,61.8439007 133.110868,61.720868 128.000001,61.720868 C122.937434,61.720868 117.905854,61.8411667 112.929865,62.0735617 C117.903575,55.515009 122.99895,49.4217021 128.122121,43.8938899 L128.122121,43.8938899 Z M82.8018984,87.830679 C80.2715265,92.2183886 77.8609975,96.6393627 75.5753239,101.068539 C72.3906004,93.5156998 69.6661103,86.0886276 67.440586,78.9171899 C74.7446255,77.2826781 82.5335049,75.9461789 90.6495601,74.9332099 C87.9610684,79.1268011 85.3391054,83.4302106 82.8018984,87.8297677 L82.8018984,87.830679 L82.8018984,87.830679 Z M90.8833221,153.182899 C82.4979621,152.247395 74.5919739,150.979704 67.289757,149.390303 C69.5508242,142.09082 72.3354636,134.505173 75.5876271,126.789657 C77.8792246,131.215644 80.2993228,135.638441 82.8451877,140.03572 L82.8456433,140.03572 C85.4388987,144.515476 88.1255676,148.90364 90.8833221,153.182899 L90.8833221,153.182899 Z M128.424691,184.213105 C123.24137,178.620587 118.071264,172.434323 113.021912,165.780078 C117.923624,165.972373 122.921029,166.0708 128.000001,166.0708 C133.217953,166.0708 138.376211,165.953235 143.45336,165.727219 C138.468257,172.501308 133.434855,178.697141 128.424691,184.213105 L128.424691,184.213105 Z M180.622896,126.396409 C184.044571,134.195313 186.929004,141.741317 189.219234,148.9164 C181.796719,150.609693 173.782736,151.973534 165.339049,152.986959 C167.996555,148.775595 170.619884,144.430263 173.197646,139.960532 C175.805484,135.438399 178.28163,130.90943 180.622896,126.396409 L180.622896,126.396409 Z M163.724586,134.496971 C159.722835,141.435557 155.614455,148.059271 151.443648,154.311611 C143.847063,154.854776 135.998946,155.134562 128.000001,155.134562 C120.033408,155.134562 112.284171,154.887129 104.822013,154.402745 C100.48306,148.068386 96.285368,141.425078 92.3091341,134.556664 L92.3100455,134.556664 C88.3442923,127.706935 84.6943232,120.799333 81.3870228,113.930466 C84.6934118,107.045648 88.3338117,100.130301 92.276781,93.292874 L92.2758697,93.294241 C96.2293193,86.4385872 100.390102,79.8276317 104.688954,73.5329157 C112.302398,72.9573964 120.109505,72.6571055 127.999545,72.6571055 L128.000001,72.6571055 C135.925583,72.6571055 143.742714,72.9596746 151.353879,73.5402067 C155.587114,79.7888993 159.719645,86.3784378 163.688588,93.2350031 C167.702644,100.168578 171.389978,107.037901 174.724618,113.77508 C171.400003,120.627999 167.720871,127.566587 163.724586,134.496971 L163.724586,134.496971 Z M186.284677,12.3729198 C194.857321,17.3165548 198.191049,37.2542268 192.804953,63.3986692 C192.461372,65.0669011 192.074504,66.7661189 191.654369,68.4881206 C181.03346,66.0374921 169.500286,64.2138746 157.425315,63.0810626 C150.391035,53.0639249 143.101577,43.9572289 135.784778,36.073113 C137.751934,34.1806885 139.716356,32.3762092 141.672575,30.673346 C160.572216,14.2257007 178.236518,7.73185406 186.284677,12.3729198 L186.284677,12.3729198 Z M128.000001,90.8080696 C140.624975,90.8080696 150.859926,101.042565 150.859926,113.667995 C150.859926,126.292969 140.624975,136.527922 128.000001,136.527922 C115.375026,136.527922 105.140075,126.292969 105.140075,113.667995 C105.140075,101.042565 115.375026,90.8080696 128.000001,90.8080696 L128.000001,90.8080696 Z" fill="#00D8FF"></path>
</g>
</svg>
<span class="skills__item--label">React</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="-50 0 300 300" id="Layer_1" xmlns="http://www.w3.org/2000/svg" aria-label="Figma" role="img" stroke="#000" stroke-width="3">
<style>.st0{fill:#0acf83}.st1{fill:#a259ff}.st2{fill:#f24e1e}.st3{fill:#f76e2e}.st4{fill:#1abcfe}</style>
<title>Figma.logo</title>
<desc>Created using Figma</desc>
<path id="path0_fill" class="st0" d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z"/>
<path id="path1_fill" class="st1" d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z"/>
<path id="path1_fill_1_" class="st2" d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z"/>
<path id="path2_fill" class="st3" d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z"/>
<path id="path3_fill" class="st4" d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z"/>
</svg>
<span class="skills__item--label">Figma</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="0 -0.5 256 256" version="1.1" aria-label="Python" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<defs>
<linearGradient x1="12.9593594%" y1="12.0393928%" x2="79.6388325%" y2="78.2008538%" id="linearGradient-1">
<stop stop-color="#387EB8" offset="0%"></stop>
<stop stop-color="#366994" offset="100%"></stop>
</linearGradient>
<linearGradient x1="19.127525%" y1="20.5791813%" x2="90.7415328%" y2="88.4290372%" id="linearGradient-2">
<stop stop-color="#FFE052" offset="0%"></stop>
<stop stop-color="#FFC331" offset="100%"></stop>
</linearGradient>
</defs>
<g>
<path stroke="#000" stroke-width="3" d="M126.915866,0.0722755491 C62.0835831,0.0722801733 66.1321288,28.1874648 66.1321288,28.1874648 L66.2044043,57.3145115 L128.072276,57.3145115 L128.072276,66.0598532 L41.6307171,66.0598532 C41.6307171,66.0598532 0.144551098,61.3549438 0.144551098,126.771315 C0.144546474,192.187673 36.3546019,189.867871 36.3546019,189.867871 L57.9649915,189.867871 L57.9649915,159.51214 C57.9649915,159.51214 56.8001363,123.302089 93.5968379,123.302089 L154.95878,123.302089 C154.95878,123.302089 189.434218,123.859386 189.434218,89.9830604 L189.434218,33.9695088 C189.434218,33.9695041 194.668541,0.0722755491 126.915866,0.0722755491 L126.915866,0.0722755491 L126.915866,0.0722755491 Z M92.8018069,19.6589497 C98.9572068,19.6589452 103.932242,24.6339846 103.932242,30.7893845 C103.932246,36.9447844 98.9572068,41.9198193 92.8018069,41.9198193 C86.646407,41.9198239 81.6713721,36.9447844 81.6713721,30.7893845 C81.6713674,24.6339846 86.646407,19.6589497 92.8018069,19.6589497 L92.8018069,19.6589497 L92.8018069,19.6589497 Z" fill="url(#linearGradient-1)"></path>
<path stroke="#000" stroke-width="3" d="M128.757101,254.126271 C193.589403,254.126271 189.540839,226.011081 189.540839,226.011081 L189.468564,196.884035 L127.600692,196.884035 L127.600692,188.138693 L214.042251,188.138693 C214.042251,188.138693 255.528417,192.843589 255.528417,127.427208 C255.52844,62.0108566 219.318366,64.3306589 219.318366,64.3306589 L197.707976,64.3306589 L197.707976,94.6863832 C197.707976,94.6863832 198.87285,130.896434 162.07613,130.896434 L100.714182,130.896434 C100.714182,130.896434 66.238745,130.339138 66.238745,164.215486 L66.238745,220.229038 C66.238745,220.229038 61.0044225,254.126271 128.757101,254.126271 L128.757101,254.126271 L128.757101,254.126271 Z M162.87116,234.539597 C156.715759,234.539597 151.740726,229.564564 151.740726,223.409162 C151.740726,217.253759 156.715759,212.278727 162.87116,212.278727 C169.026563,212.278727 174.001595,217.253759 174.001595,223.409162 C174.001618,229.564564 169.026563,234.539597 162.87116,234.539597 L162.87116,234.539597 L162.87116,234.539597 Z" fill="url(#linearGradient-2)"></path>
</g>
</g>
</svg>
<span class="skills__item--label">Python</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="GitHub" role="img">
<title>github [#142]</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]"></path>
</g>
</g>
</g>
</svg>
<span class="skills__item--label">GitHub</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" aria-label="Git" role="img">
<g>
<path stroke="#000" stroke-width="3" d="M251.172245,116.593517 L139.398753,4.82845302 C132.966433,-1.60948434 122.525852,-1.60948434 116.085106,4.82845302 L92.8753863,28.0381721 L122.317995,57.4807809 C129.16041,55.1690784 137.005593,56.7195763 142.460425,62.1744081 C147.940536,67.6629464 149.479799,75.5755422 147.111919,82.4404282 L175.487156,110.815665 C182.352042,108.450594 190.273064,109.98143 195.755985,115.472777 C203.418591,123.132574 203.418591,135.547794 195.755985,143.213209 C188.09057,150.878624 175.67535,150.878624 168.007126,143.213209 C162.243319,137.443783 160.81922,128.977839 163.737639,121.877008 L137.275245,95.4146135 L137.272436,165.052198 C139.140337,165.979126 140.904309,167.212221 142.460425,168.762719 C150.123031,176.422516 150.123031,188.837736 142.460425,196.508768 C134.79501,204.171375 122.374173,204.171375 114.719993,196.508768 C107.057387,188.837736 107.057387,176.422516 114.719993,168.762719 C116.613174,166.872347 118.804095,165.442631 121.141077,164.481996 L121.141077,94.1955625 C118.804095,93.2405457 116.615983,91.8192558 114.719993,89.9148396 C108.914052,84.1173254 107.518042,75.5980132 110.492639,68.4690928 L81.4713611,39.4421974 L4.83125614,116.076685 C-1.60949009,122.52024 -1.60949009,132.960821 4.83125614,139.398759 L116.604747,251.166631 C123.039876,257.604569 133.477648,257.604569 139.921203,251.166631 L251.172245,139.9184 C257.61018,133.477654 257.61018,123.031455 251.172245,116.593517" fill="#DE4C36"></path>
</g>
</svg>
<span class="skills__item--label">Git</span>
</div>
<div class="skills__item--container" role="listitem">
<svg class="skills__item" width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="VSCode" role="img">
<path stroke="#000" stroke-width=".4" d="M21.0016 3.11679C21.0016 2.23783 20.0175 2.23782 19.5801 2.34769C20.1924 1.86426 20.9105 1.98147 21.1656 2.12796L27.079 5.02747C27.6424 5.30375 27.9998 5.8786 27.9998 6.50857V25.5831C27.9998 26.2215 27.6329 26.8025 27.058 27.0743L21.4937 29.7054C21.1109 29.8701 20.2799 30.2767 19.5801 29.7053C20.4549 29.8702 20.9287 29.2476 21.0016 28.8264V3.11679Z" fill="url(#paint0_linear_87_8101)"/>
<path stroke="#000" stroke-width=".4" d="M19.6512 2.3319C20.1154 2.24017 21.0018 2.28271 21.0018 3.11685V9.68254L3.07359 23.2453C2.76022 23.4824 2.3192 23.443 2.05229 23.1542L0.204532 21.1548C-0.0849358 20.8416 -0.0646824 20.3513 0.249624 20.0633L19.5802 2.34775L19.6512 2.3319Z" fill="url(#paint1_linear_87_8101)"/>
<path stroke="#000" stroke-width=".4" d="M21.0018 22.3708L3.07359 8.80801C2.76022 8.57094 2.3192 8.61028 2.05229 8.8991L0.204532 10.8985C-0.0849358 11.2117 -0.0646824 11.702 0.249624 11.9901L19.5802 29.7056C20.455 29.8704 20.9289 29.2478 21.0018 28.8266V22.3708Z" fill="url(#paint2_linear_87_8101)"/>
<defs>
<linearGradient id="paint0_linear_87_8101" x1="23.79" y1="2" x2="23.79" y2="30" gradientUnits="userSpaceOnUse">
<stop stop-color="#32B5F1"/>
<stop offset="1" stop-color="#2B9FED"/>
</linearGradient>
<linearGradient id="paint1_linear_87_8101" x1="21.0018" y1="5.53398" x2="1.0217" y2="22.3051" gradientUnits="userSpaceOnUse">
<stop stop-color="#0F6FB3"/>
<stop offset="0.270551" stop-color="#1279B7"/>
<stop offset="0.421376" stop-color="#1176B5"/>
<stop offset="0.618197" stop-color="#0E69AC"/>
<stop offset="0.855344" stop-color="#0F70AF"/>
<stop offset="1" stop-color="#0F6DAD"/>
</linearGradient>
<linearGradient id="paint2_linear_87_8101" x1="1.15522" y1="9.98389" x2="21.0791" y2="26.4808" gradientUnits="userSpaceOnUse">
<stop stop-color="#1791D2"/>
<stop offset="1" stop-color="#1173C5"/>
</linearGradient>
</defs>
</svg>
<span class="skills__item--label">VSCode</span>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact-section" aria-labelledby="contact-title">
<h2 id="contact-title">Send me a message!</h2>
<p id="contact-description">Do you have a project in mind? I'm available to work on new projects and collaborations.</p>
<div id="contact-content">
<ul class="contact__methods" role="list" aria-label="Contact information">
<li class="contact__item">
<svg class="contact__icon" role="img" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="currentColor"/>
</svg>
<div class="contact__text--container">
<span>Email</span>
<a href="#contactname">workamts.dev@gmail.com</a>
</div>
</li>
<li class="contact__item">
<svg class="contact__icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" fill="currentColor"/>
</svg>
<div class="contact__text--container">
<span>WhatsApp</span>
<a href="https://wa.me/573001234567" target="_blank" class="contact__text">+57 312 469 6123</a>
</div>
</li>
</ul>
<!-- Contact form-->
<form id="contact-form" action="https://formspree.io/f/tu-endpoint" method="POST" data-reply-to="email" novalidate aria-label="Contact form" autocomplete="on">
<!-- Full Name -->
<div class="input__group i1">
<label for="contactname" aria-label="Full name, required">Full name</label>
<input class="contact__form--field" type="text" id="contactname"
name="Name"
placeholder="Your full name"
required
minlength="3"
maxlength="50"
pattern="^[A-Za-zÁÉÍÓÚáéíóúÑñ\s]+$"
autocomplete="name"
aria-required="true"
aria-describedby="name-help">
<small id="name-help">Enter your name, only letters and spaces.</small>
</div>
<!-- Email -->
<div class="input__group i2">
<label for="contactemail">Email address</label>
<input class="contact__form--field"
type="email"
id="contactemail"
name="Email"
placeholder="youremail@example.com"
required
pattern="^[a-zA-Z0-9._%\\+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$"
autocomplete="email"
inputmode="email"
aria-required="true"
aria-describedby="email-help">
<small id="email-help">Enter your email address.</small>
</div>
<!-- Message -->
<div class="input__group i3">
<label for="contactmessage">Message</label>
<textarea class="contact__form--field" id="contactmessage"
name="Message"
rows="5"
placeholder="Tell me how I can help you?"
required
minlength="10"
maxlength="1000"
aria-required="true"
aria-describedby="message-help"></textarea>
<small id="message-help">Please write a clear message. Minimum 10 characters.</small>
</div>
<!-- Submit Button -->
<div id="contact-button-container">
<button class="contact__form--btn" type="submit" aria-label="Send contact form" title="Click to send your message">SEND</button>
</div>
<!-- Status message area (for confirmation or errors) -->
<div id="form-status" role="status" aria-live="polite"></div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer role="contentinfo" aria-label="Site footer">
<div class="footer__copy" aria-label="Legal and copyright information">
<p>© 2025 Created by Anderson Tovar - Workamts</p>
</div>
</footer>
<!-- Scripts -->
<script src="password-settings.js" defer></script>
<script src="script.js" defer></script>
</body>
</html>