-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-en.html
711 lines (646 loc) · 35.8 KB
/
index-en.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
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
<!DOCTYPE html>
<html lang="en">
<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">
<title>Gianni Pasquinelli - Portfolio</title>
<meta name="description"
content="Soy Gianni Pasquinelli, y esta es mi página con información de contacto, trabajos, habilidades y conocimientos dentro del desarrollo Web. Entré a conocerme y trabajemos juntos.">
<meta name="keywords" content="desarrollo Web Front-end trabajo remoto experiencia web paginas sitios">
<!-- google fonts -->
<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=Fira+Code:wght@300;400;700&family=Lato:ital,wght@0,400;0,700;1,100;1,700&display=swap"
rel="stylesheet">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/e6baea6b33.js" crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HKD5HH88QR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HKD5HH88QR');
</script>
<!-- Boostrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- AOS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/style.css">
<!-- Hotjar Tracking Code for https://giannipasquinelli-webdev.netlify.app/ -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:3649409,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-xl">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<h1>GianniPasquinelli = <span class="nav-color-a">"Web Developer"</span></h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link nav-color-b" href="#sobreMi">.about()</a>
<a class="nav-link nav-color-c" href="#skills" title="My skills">.skills()</a>
<a class="nav-link nav-color-b" href="#proyectos" title="My works">.projects()</a>
<a class="nav-link nav-color-d" href="#formacion" title="My studies">.education()</a>
<a class="nav-link nav-color-e" href="#contacto" title="[email protected]">.contact()</a>
<a class="nav-link nav-color-b" href="./index.html" title="Español"><i class="fa-solid fa-language"></i></a>
</div>
<!--fin navabr-->
</div><!-- fin collapse-->
</div>
<!--fin container-->
</nav>
</header>
<main class="contenido">
<img class="waves" src="./img/bg/wave(5).svg" alt="waves">
<!-- Presentacion -->
<div>
<section class="presentacion">
<div>
<img src="./img/gianni.webp" alt="foto de gianni" class="img-fluid presentacion--imagen" data-aos="fade-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000" >
</div>
<div class="titulo">
<div class="titulo--nombre">
<h2 class="borde" data-aos="fade-left" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">Gianni Pasquinelli</h2>
</div>
<div class="titulo--subtitulo">
<h3 class="borde" data-aos="fade-left" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">Front-end Developer</h3>
</div>
<p class="presentacion--descripcion" data-aos="fade-up-left" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">Web developer in constant training, self-taught, curious, meticulous, focused, creative.</p>
</div>
</section>
</div>
<img class="waves" src="./img/bg/wave(1).svg" alt="waves">
<!-- Acerca -->
<div>
<section class="acerca">
<h2 class="contenido--titulo" id="sobreMi" data-aos="zoom-in" data-aos-easing="linear"
data-aos-duration="750">About me</h2>
<div data-aos="zoom-in" data-aos-easing="linear"
data-aos-duration="600">
<p class="info-personal fs-5" >My name is Gianni, I'm from Argentina and I'm a web developer. At the time I graduated from high school I was in doubt about what career I should do, computer systems or music.
The emotional side won the battle and I went ahead and began to study music composition at the UNR.
After some difficulties at work increased by the pandemic, a possibility of formation in web development came up, and without hesitation I started this other passion.
</p>
<p class="info-personal fs-5" >With my musical artistic background, I approach in a creative way, in the balance of the creative and the functional. Intrinsicly thinking in various perspectives, from direct to outside of the box. By keeping the capacity of surprise intact, I always staying curious on how a solution is achieved through several paths and how the same path has different outcomes.</p>
<p class="info-personal fs-5">Through my work I find a way to fulfill my need to express myself to the world through a creative mindset to intellectual.</p>
</div>
</section>
</div>
<!-- Enlaces -->
<div>
<section class="enlaces">
<div>
<a href="https://www.linkedin.com/in/gianni-pasquinelli/" title="LinkedIn"><i
class="fa-brands fa-linkedin" data-aos="flip-right"></i></a>
<a href="https://github.com/Gianni03" title="GitHub"><i class="fa-brands fa-github-square" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000"></i></a>
<a href="mailto:[email protected]" title="E-Mail"><i class="fa-solid fa-at" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000"></i></a>
<a href="./docs/Resume Frontend Gianni Pasquinelli.pdf" download target="_blank" title="Download resume"><i
class="fa-regular fa-file-pdf" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000"></i></a>
</div>
</section>
</div>
<!-- Skills -->
<section class="skills container-fluid">
<h2 class="contenido--titulo" id="skills" data-aos="zoom-in" data-aos-easing="linear"
data-aos-duration="500">Skills</h2>
<div class="skills--container D-flex align-items-center justify-content-center">
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">HTML</h4>
<img src="./img/skills/html5.svg" alt="html" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skill--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">CSS</h4>
<img src="./img/skills/css3.svg" alt="css" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">JavaScript</h4>
<img src="./img/skills/javascript.svg" alt="java script" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Git</h4>
<img src="./img/skills/git.svg" alt="git" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Bootstrap</h4>
<img src="./img/skills/bootstrap-5-1.svg" alt="bootstrap" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Materialize</h4>
<img src="./img/skills/materialize.svg" alt="materialize" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">GitHub </h4>
<img src="./img/skills/github.svg" alt="git hub" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Sass</h4>
<img src="./img/skills/sass.svg" alt="sass" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Java</h4>
<img src="./img/skills/java-4-logo.svg" alt="java logo" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">React</h4>
<img src="./img/skills/react-446.svg" alt="visual studio code" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Visual Studio Code</h4>
<img src="./img/skills/visual-studio-code-1.svg" alt="visual studio code" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</https://www.holocruxe.com/div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Figma</h4>
<img src="./img/skills/figma.svg" alt="figma" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Linux Mint</h4>
<img src="./img/skills/linux-mint.webp" alt="linux mint" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
<!-- <div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Node</h4>
<img src="./img/skills/node.svg" alt="node" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div> -->
<div class="skills--item">
<h4 class="skills--titulo" data-aos="flip-down" data-aos-easing="linear"
data-aos-duration="750">Trello</h4>
<img src="./img/skills/trello.svg" alt="trello" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="1200">
</div>
</div>
</section>
<img class="waves" src="./img/bg/wave(4).svg" alt="waves">
<!-- Proyectos -->
<div class="container-fluid">
<h2 class="contenido--titulo" id="proyectos" data-aos="zoom-in" data-aos-easing="linear"
data-aos-duration="750">Projects</h2>
<div class="proyectos">
<div class="proyectos--card">
<h4>Holocruxe Landing Page</h4>
<div class="proyectos--card--flex">
<img src="./img/holocap.png" alt="holocruxe web" class="img-fluid m-5 mx-auto">
<div class="proyectos--card--texto">
<p>My principar task was the develop of the Holocruxe landing page. Developed whit Vite and JavaScript. In charge of matainance and issues resolutions
Working in a team whit designers, tester and other developers. I refactor the old version, upgrading the folder structure and modularized the css code, Also
redoing some components for better reusability. </p>
<div>
<a href="https://github.com/Holocruxe-Galaxy/Kamino" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://www.holocruxe.com/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Site</a>
</div>
</div>
</div>
</div>
<div class="proyectos--card">
<h4>Jim Dunlop - Picks</h4>
<div class="proyectos--card--flex">
<div class="proyectos--card--texto">
<p>Site devolope in React as a final work of the React course at Coderhouse. Build in React framework, with creation of components, events, react-router-dom. hook useState fot counter and shopping cart.
</p>
<div>
<a href="https://github.com/Gianni03/react-pasquinelli" target="_blank"><i
class="fa-brands fa-github-square"></i>
GitHub</a>
<a href="https://master--react-coderhouse-pasquinelli.netlify.app/" target="_blank"><i class="fa-regular fa-window-maximize"></i>
Sitio</a>
</div>
</div>
<img src="https://master--react-coderhouse-pasquinelli.netlify.app/assets/img/morello.hero.artist-1__55077.original.jpg" alt="jim dunlop" class="img-fluid mx-auto">
</div>
</div>
<div class="proyectos--card">
<h4>Focus On Kids</h4>
<div class="proyectos--card--flex">
<div class="proyectos--card--texto">
<p>Site created as a final project of the web development course at Coderhouse. It is also a working site because it was made for the Focus on Kids clinic.
I used HTML, Css with Scss, Bootstrap, AOS. I also developed the design, with several esthetic changes from the initial idea to the final version of the site.
</p>
<div>
<a href="https://github.com/Gianni03/coder-dw" target="_blank"><i
class="fa-brands fa-github-square"></i>
GitHub</a>
<a href="https://focusonkids.netlify.app/" target="_blank"><i class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
<img src="./img/fok.webp" alt="focus on kids" class="img-fluid mx-auto">
</div>
</div>
<div class="proyectos--card">
<h4>Text Encrypter</h4>
<div class="proyectos--card--flex">
<img src="./img/alura1.webp" alt="encriptador" class="img-fluid m-5 mx-auto">
<div class="proyectos--card--texto">
<p>Project carried out as a Challenge of the "ONE Oracle next education" course.
It consists of creating an encryptor that receives a text and when pressing the encrypt button will show the encrypted text in the side box, then this encrypted text can be copied to enter it in the main input and decrypt it. The design was delivered to us, which I developed as the Figma design delivered and responsive. This project was made with HTML, CSS and JavaScript</p>
<div>
<a href="https://github.com/Gianni03/Encriptador" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://gianni03.github.io/Encriptador/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
</div>
</div>
<div class="proyectos--card">
<h4>Focus On Kids (with javaScript)</h4>
<div class="proyectos--card--flex">
<div class="proyectos--card--texto">
<p>As part of the JavaScript course at Coderhouse, I re-used my web development course project.
By using the contact page to generate alerts, making use of functions, template literals, local and session storage in the form, JSON. And also adding libraries.</p>
<div>
<a href="https://github.com/Gianni03/coderhouse-proyecto-js" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://gianni03.github.io/coderhouse-proyecto-js/pages/contacto.html" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
<img src="./img/fok2.webp" alt="focus on kids" class="img-fluid mx-auto">
</div>
</div>
<div class="proyectos--card">
<h4>Café Pasquinelli</h4>
<div class="proyectos--card--flex">
<img src="./img/cafe.webp" alt="pagina de un bar" class="img-fluid m-5 mx-auto">
<div class="proyectos--card--texto">
<p>Practice page made with HTML, CSS and JavaScript, using a little Jquery and parallax..</p>
<div>
<a href="https://github.com/Gianni03/Restaurant" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://gianni03.github.io/Restaurant/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
</div>
</div>
<div class="proyectos--card">
<h4>JavaScript Calculation</h4>
<div class="proyectos--card--flex">
<div class="proyectos--card--texto">
<p>Use of functions, operators, requesting data from the user and displaying the results on the page.</p>
<div>
<a href="https://github.com/Gianni03/desafio-simulador" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://gianni03.github.io/desafio-simulador/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
<img src="./img/js1.webp" alt="dinero" class="img-fluid mx-auto">
</div>
</div>
<div class="proyectos--card">
<h4>Google page</h4>
<div class="proyectos--card--flex">
<img src="./img/google.webp" alt="google" class="img-fluid m-5 mx-auto">
<div class="proyectos--card--texto">
<p>As part of my self-taught studies, I joined The Odin Project, where one of the challenges was to make a carbon copy of the google homepage. One of my very first steps in web development and a very pleasing challenge, when the results are as expected.</p>
<div>
<a href="https://github.com/Gianni03/Google-Homepage" target="_blank"><i
class="fa-brands fa-github-square"> GitHub</i></a>
<a href="https://gianni03.github.io/Google-Homepage/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
</div>
</div>
<div class="proyectos--card">
<h4>Standberg Guitars</h4>
<div class="proyectos--card--flex">
<div class="proyectos--card--texto">
<p>Within the Coderhouse web development course, we had a challenge to make a page with
bootstrap. </p>
<div>
<a href="https://github.com/Gianni03/practicaBootsrap" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://gianni03.github.io/practicaBootsrap/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
<img src="./img/ola.webp" alt="guitarras" class="img-fluid mx-auto">
</div>
</div>
<div class="proyectos--card">
<h4>Odin Recipies</h4>
<div class="proyectos--card--flex">
<img src="./img/odin.webp" alt="comida" class="img-fluid m-5 mx-auto">
<div class="proyectos--card--texto">
<p>This was another challenge from The Odin Project. In this particular case it consists of creating a recipes site with ordered and unordered lists. As a personal goal I tried to do it as fast as possible and without resorting to any help, so I can have a reference of how long it would take me to do it.</p>
<div>
<a href="https://github.com/Gianni03/odin-recipes" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
<a href="https://gianni03.github.io/odin-recipes/" target="_blank"><i
class="fa-regular fa-window-maximize"></i> Web</a>
</div>
</div>
</div>
</div>
<div class="proyectos--card">
<h4>NOVA Shoes</h4>
<div class="proyectos--card--flex">
<div class="proyectos--card--texto">
<p>The company Onlines&Co did a web development study guideline. As a final practice I had to build this page from the designed model that was provided. With everything I had learned so far, it was the very first web page I made other than the ones I had copied in some courses. It was the first time I was using GitHub and due to the lack of experience at that time I didn't upload the project in a correct way, so I was unable to use the GitHub pages service.</p>
<div>
<a href="https://github.com/Gianni03/Practica-ZapatosNOVA" target="_blank"><i
class="fa-brands fa-github-square"></i> GitHub</a>
</div>
</div>
<img src="./img/nova1.webp" alt="pagina de zapatos" class="img-fluid mx-auto">
</div>
</div>
</div>
</div>
<img class="waves" src="./img/bg/wave(2).svg" alt="waves">
<!-- Formacion -->
<div class="estudios container-fluid">
<h2 class="contenido--titulo" id="formacion" data-aos="zoom-in" data-aos-easing="linear"
data-aos-duration="750">Education</h2>
<div class="card-group">
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 g-3">
<div class="col">
<div class="card h-100">
<img src="./img/formacion/onlines.svg" alt="logo onlines" class="card-img-top p-4 m-2 w-50 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">Onlines&Co</h5>
<p class="card-text p-4 m-1">My first contact with web development was right here. They prepared a Front-End training guide. From where I was able to organize how to do the study path.</p>
</div>
<div class="card-footer text-center">
<a href="https://documento.onlines.com.ar/Formaci-n-en-Onlines-co-4975ef9f390442be9703041fd1e055f9"
target="_blank" class="btn">Onlines&Co</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/logo-udemy.svg" alt="logo udemy" class="card-img-top p-4 m-2" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">Udemy</h5>
<p class="card-text p-4 m-2">On this learning platform I took several courses, which gave me a vision and understanding of several subjects to and understanding of many topics to reinforce later on.</p>
</div>
<div class="card-footer text-center">
<a href="https://www.udemy.com/" target="_blank" class="btn">Udemy</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/misuse-3.png" alt="logo free Code Camp" class="card-img-top p-4 m-2" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">FreeCodeamp</h5>
<p class="card-text p-4 m-2">Here I completed the "Responsive web design" training and I currently am in the process of the JavaScript training.</p>
</div>
<div class="card-footer text-center">
<a href="https://www.freecodecamp.org/learn/" target="_blank" class="btn">FreeCodeCamp</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/w3.webp" alt="w3 logo" class="card-img-top p-4 m-2 w-50 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">W3 schools</h5>
<p class="card-text p-4 m-2">Self-taught courses in HTML, CSS and JavaScript. Beyond the courses, it is a place of constant reference for the amount and clarity of concepts.</p>
</div>
<div class="card-footer text-center">
<a href="https://www.w3schools.com/" class="btn">W3schools</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/odin.jpeg" alt="odin logo" class="card-img-top p-4 m-2 w-50 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">The Odin Project</h5>
<p class="card-text p-4 m-2">Full-Stack course, in process. Self-taught, very complete, and with a large amount of practices. Part of my projects are from the practices of this courses.</p>
</div>
<div class="card-footer text-center">
<a href="https://www.theodinproject.com/dashboard" class="btn">The Odin Project</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/1558441737613.png" alt="logo coderhouse"
class="card-img-top p-4 m-2 w-50 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">Coderhouse</h5>
<p class="card-text p-4 m-2">With the need of a more personalized guide, I purchased the front-End developer career.
I have graduated and passed the Web Development and JavaScritp courses with a score of 9. I still have one more course to in one of the JavaScript frameworks: React.</p>
</div>
<div class="card-footer text-center">
<a href="https://www.coderhouse.com/?utm_term=coderhouse&utm_campaign=0&utm_source=google_search_brand&utm_medium=cpc&gclid=Cj0KCQjwof6WBhD4ARIsAOi65aitMFv0RhZBzcLIg5luGV2n01CniiADPGS5MrNeLYO4Ob2nw_EOvo4aAlrxEALw_wcB"
class="btn">Coderhouse</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/egg.svg" alt="egg logo" class="card-img-top p-4 m-2 w-75 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">EGG</h5>
<p class="card-text p-4 m-2">An introduction to programming course. An innovative way to study and learn.
In zoom groups of 10 learners, team problem solving, cooperating and collaborating.
</p>
</div>
<div class="card-footer text-center">
<a href="https://eggeducacion.com/es-AR/" class="btn">EGG</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./img/formacion/oracle-one-logo.svg" alt="one logo" class="card-img-top p-4 m-2 w-75 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">ONE</h5>
<p class="card-text p-4 m-2">ONE - Oracle next education. Training program designed by Oracle for Latin America with courses in programming, Front-End, Java, Oracle Cloud, SQL. The courses are provided on the Alura Latam platform, where we also see courses on Agile methodologies, Business Management and personal development. </p>
</div>
<div class="card-footer text-center">
<a href="https://www.oracle.com/ar/education/oracle-next-education/" class="btn">ONE</a>
</div>
</div>
</div>
<div class="col mx-auto">
<div class="card h-100">
<img src="./img/formacion/logo.b70109da.jpg" alt="logo argentina programa"
class="card-img-top p-4 m-2 w-50 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">r/argentina Programa</h5>
<p class="card-text p-4 m-2">r/argentina program - From the reddit community emerged this great JavaScript course.
With an active community in Slack where you can submit your exercises and have them corrected by other community members.
</p>
</div>
<div class="card-footer text-center">
<a href="https://argentinaprograma.com/curso-javascript" class="btn">r/argentina programa</a>
</div>
</div>
</div>
<div class="col mx-auto">
<div class="card h-100">
<img src="./img/formacion/HQy3tFfX_400x400.png" alt="logo openbootcamp"
class="card-img-top p-4 m-2 w-50 mx-auto" data-aos="flip-right" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
<div class="formacion--card card-body">
<h5 class="card-title m-3">Open Bootcamp</h5>
<p class="card-text p-4 m-2">Completely free Full-Stack training courses with courses on topics such as JavaScript, Java, Phyton, React, Spring, JUnit testing. Also a Discord community with work offers and study groups.</p>
</div>
<div class="card-footer text-center">
<a href="https://campus.open-bootcamp.com/" class="btn">OpenBootcamp</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- certificados -->
<section class="certificados d-flex justify-content-around flex-wrap">
<div>
<a href="https://drive.google.com/drive/folders/1QzMsUCx2nly2047IvccyQyNDWWj4RGRO?usp=sharing" target="_blank"
class="btn">Certificates</a>
</div>
<div>
<a href="https://www.notion.so/gianni-03/Front-end-WEB-developer-bd2f13be7bca4375b4b2994069d64af1"
target="_blank" class="btn">My Notion Stuff</a>
</div>
<div>
<a href="https://app.aluracursos.com/emprega-one/profile/giannipasquinelli" target="_blank" class="btn">ONE - Profile</a>
</div>
</section>
<img class="waves" src="./img/bg/wave(5).svg" alt="waves">
<!-- Contacto -->
<section id="contact" class="contacto">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="contenido--titulo" id="contacto" data-aos="zoom-in" data-aos-easing="linear"
data-aos-duration="750">Contact</h2>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-md-12 offset-lg-1">
<div class="row">
<div class="col-md-12 col-lg-7">
<form class="form" id="contact-form" action="./php/mail.php" method="POST" data-netlify="true">
<div class="form">
<div class="col-md-12">
<div class="form-group mb-3">
<label for="name" class="form-label">Name</label>
<input id="name" type="text" name="name" placeholder="Name" required="required"
class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-3">
<label for="email" class="form-label">Email</label>
<input id="form_email" type="email" name="email" placeholder="Email" required="required"
class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-3">
<label for="message" class="form-label">Message</label>
<textarea id="message" name="message" placeholder="I will get back to you soon" rows="4"
required="required" class="form-control"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="">
<button type="submit" class="btn">Send</button>
</div>
</div>
</div>
</form>
<p class="form-message"></p>
</div>
<div class="col-lg-5 col-md-12 col-12">
<div class="text-center">
<div class="contacto--mail">
<img src="./img/retocado.png" alt="logo contacto" class=" contacto--img img-fluid">
<h4><i class="fa fa-envelope"></i>Direct Contact</h4>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer class="footer">
</footer>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
<!-- AOS -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="./js/index.js"></script>
<script src="./js/form-contact.js"></script>
</body>
</html>