-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
438 lines (432 loc) · 23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10779585-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-10779585-3');
</script>
<meta charset="utf-8">
<title>Portafolio - Alexander Alvarez</title>
<link rel="icon" type="image/png" href="src/imgs/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Indie+Flower&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="src/media.css" media="screen and (max-width:768px)"/> -->
<link rel="stylesheet" href="src/baseIcons.css">
<link rel="stylesheet" href="src/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
covid map
<body>
<header class="header">
<div class="container">
<span class="icon-menu botonmenu" id="botonmenu"></span>
<figure class="logo">
<img src="src/imgs/paltzilogo.webp" alt="Logo de Platzi" height="70">
</figure>
<nav class="menu" id="menub">
<span class="close">×</span>
<ol class="menu-content">
<li>
<a href="#Portafolio">Portafolio</a>
</li>
<li>
<a href="#Experiencia">Experiencia</a>
</li>
<li>
<a href="#Contacto">Trabajemos Juntos</a>
</li>
<li>
<a href="#antiguos">Desarrollos Antiguos</a>
</li>
<li>
<a href="https://github.com/AlexanderAlvarez9" target="_blank">Repositorio Git</a>
</li>
<li>
<button id="share">Compartir</button>
</li>
</ol>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<h1>
Hola soy <strong>Alexander Alvarez</strong> <br> programador <strong>Frontend</strong>
<br>en tecnologias UI y UX,
<br>buscando nuevos retos y conocimientos
<br>para mejorar y aportar mas
<br>Y ademas Papito de <strong>Sofia</strong>
</h1>
<img class="hero-img" src="src/imgs/hero.png" width="500" height="300" alt="Imagen Principal">
</div>
</section>
<section class="Portfolio" id="Portafolio">
<div class="container">
<h2>PORTAFOLIO (Proyectos Destacados)</h2>
<article class="project">
<div class="project-details">
<h3 class="project-title">Troud</h3>
<h6 class="project-course">Aplicacion WEB</h6>
<p class="project-date"><small><strong>Fecha:</strong> Agosto 2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>React, JavaScript, Sass, Travis, Firebase,
NodeJS, Netlify, Vercel, MongoDB </small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="https://troud.netlify.app/"
target="_blank">Troud</small> </a></p>
<p class="project-description"><small>Aplicacion Web para intercambio de prendas entre 2 usuarios, de tal
forma que al tener match entre estas puedan intercambiar sin costo su prenda.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image"
src="https://raw.githubusercontent.com/MasterSecondChance/Troud-Front/master/preview.png"
alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Itil-Support</h3>
<h6 class="project-course">Aplicacion WEB</h6>
<p class="project-date"><small><strong>Fecha:</strong> Julio 2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>React, JavaScript, Sass, Travis, Firebase,
MongoDB
</small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="https://alexanderalvarez.js.org/Itil-Support/" target="_blank">Itil-Support</small> </a></p>
<p class="project-description"><small>Sistema de reporte de casos para gestionar las incidencias o fallas que
se puedan presentar en una organizacion, mediante un sistema de tickets donde cada usuario reportara su
incidencia y un tecnico atendera esta.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image"
src="https://raw.githubusercontent.com/AlexanderAlvarez9/Itil-Support/master/preview.png"
alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Romaro.ca</h3>
<h6 class="project-course">E-Commerce</h6>
<p class="project-date"><small><strong>Fecha:</strong> Septiembre 2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>React, JavaScript, Sass, Travis, Firebase,
MongoDB
</small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="https://romaro.ca"
target="_blank">Romaro.ca</small>
</a></p>
<p class="project-description"><small>Tienda online, para venta de partes y repuestos FPV.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image"
src="https://raw.githubusercontent.com/AlexanderAlvarez9/romaro.ca/master/preview.png?token=AM62NNCWLXEX4FUZPNEZZEK7OYECS"
alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">MasterEats</h3>
<h6 class="project-course">E-Commerce</h6>
<p class="project-date"><small><strong>Fecha:</strong> Junio 2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>React, JavaScript, Sass, Travis, Firebase,
MongoDB
</small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="https://mastereatsplatzi.github.io/Master-Eats/" target="_blank">MasterEats</small>
</a></p>
<p class="project-description"><small>Tienda online, para venta de alimentos y productos de mercado.</small>
</p>
</div>
<figure class="project-imageContainer">
<img class="project-image"
src="https://raw.githubusercontent.com/MasterEatsPlatzi/Master-Eats/development/preview.png"
alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Platino-Abogados</h3>
<h6 class="project-course">E-Commerce</h6>
<p class="project-date"><small><strong>Fecha:</strong> Septiembre 2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>React, JavaScript, Sass, Travis, Firebase,
MongoDB
</small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="https://alexanderalvarez.js.org/platino-abogados/" target="_blank">Platino-Abogados</small>
</a></p>
<p class="project-description"><small>Pagina de referencia y consulta de procesos realizados en casa de
abogados.</small>
</p>
</div>
<figure class="project-imageContainer">
<img class="project-image"
src="https://raw.githubusercontent.com/AlexanderAlvarez9/platino-abogados/master/preview.png"
alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">E-commerce Store</h3>
<h6 class="project-course">E-Commerce</h6>
<p class="project-date"><small><strong>Fecha:</strong> Agosto 2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>JavaScript, HTML y CSS
</small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="https://alexanderalvarez.js.org/e-commerce/views/index.html" target="_blank">E-commerce
Store</small>
</a></p>
<p class="project-description"><small>Pagina de tienda Online hecha en Javascript Puro y css.</small>
</p>
</div>
<figure class="project-imageContainer">
<img class="project-image"
src="https://raw.githubusercontent.com/AlexanderAlvarez9/e-commerce/master/preview.png"
alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Asambleas VivoVien</h3>
<h6 class="project-course">Aplicacion WEB</h6>
<p class="project-date"><small><strong>Fecha:</strong> Febrero 2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>DumboPHP, JavaScript, Sass</small></a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="https://asamblea.vivovien.com/admin/login" target="_blank">Asamblea vivovien</small> </a></p>
<p class="project-description"><small>Aplicacion Web para conjuntos residenciales, donde podran llevar a cabo
las asambleas que exige el conjunto residencial de manera electronica o presencial, ya que permite la
participacion tanto completamente remota o asiste la presencial.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/asamblea.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">ReclamoDirecto.com</h3>
<h6 class="project-course">Aplicacion WEB</h6>
<p class="project-date"><small><strong>Fecha:</strong> 01/09/2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>DumboPHP, JavaScript, Sass</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="https://www.ReclamoDirecto.com"
target="_blank">ReclamoDirecto.com</small> </a></p>
<p class="project-description"><small>Pagina web con funcionalidad para uso de buffet de abogados que ayudara
a determinar si los casos que les llegan son viables para tomarlos y poderlos ejecutar ganando el caso, se
usan varias tecnologias como, php, html, scss, css, bases de datos, preprocesadores, JavaScript</small>
</p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/rcd-dash.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Consulta de Cursos por Usuario en Platzi</h3>
<h6 class="project-course">Pagina de Consulta de cursos</h6>
<p class="project-date"><small><strong>Fecha:</strong> 08/05/2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>HTML5, CSS3, JavaScript</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="platziScript/index.html"
target="_blank">Este
Link</small> </a></p>
<p class="project-description"><small>Pagina de consulta de cursos de usuario en Platzi <b>En
construccion</b></small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/platziUsers.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Cursos en Platzi</h3>
<h6 class="project-course">Estudios Online</h6>
<p class="project-date"><small><strong>Fecha: </strong>Desde 10/08/2019 - Actual</small></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="https://platzi.com/@jhonalexanderalvarezromero/" target="_blank">Platzi.com/Alexander</small> </a>
</p>
<p class="project-description"><small>Cursos realizados con dedicacion y muchas ganas de aprender, ademas
espero poder lograr crear muchas aplicaciones web para ayudar primero a quienes lo necesitan, impulsar sus
proyectos y aumentar mi desarrollo profesional.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/platziProfile.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Juego Simon</h3>
<h6 class="project-course">Juego</h6>
<p class="project-date"><small><strong>Fecha:</strong> 16/10/2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>HTML5, CSS3, JavaScript</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="Javascript\FundamentosJavaScript\Juego Simon\clase42 - comenzando el juego.html"
target="_blank">Este Link</small> </a></p>
<p class="project-description"><small>Juego Simon dice, juego que trata de memorizar secuencias de colores,
aumentando la dificultad en cada nivel</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/simon.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Villa Sofia</h3>
<h6 class="project-course">Mini-Juego Infantil</h6>
<p class="project-date"><small><strong>Fecha:</strong> 16/10/2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>Canvas y Javascript</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="Javascript\Villa Sofy\villah.html"
target="_blank">Este Link</small> </a></p>
<p class="project-description"><small>Juego donde esta Sofia paseando por una granja, acompañada de
animalitos</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/villa.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Pizzarra WEB</h3>
<h6 class="project-course">Componente Web</h6>
<p class="project-date"><small><strong>Fecha:</strong> 10/08/2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>Canvas y Javascript</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="Javascript\teclas\mouse.html"
target="_blank">Este Link</small> </a></p>
<p class="project-description"><small>Pizzarra web, en html, JavaScript con canvas, desde la cual podras
escribir, firmar o dibujar, boton de reset de el dibugo.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/whiteboard.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Platzi Video</h3>
<h6 class="project-course">Layout Video-Web</h6>
<p class="project-date"><small><strong>Fecha:</strong> 29/10/2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>HTML5, CSS3</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="Javascript\platziVideo\video.html"
target="_blank">Este Link</small> </a></p>
<p class="project-description"><small>Platzi Video es un proyecto de desarrollo Web frontend en donde
mostramos un template de una pagina web con login y registro para acceder a un sistema de videos de forma
visualmente amigable.</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/platzivideo.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Santa Reyes</h3>
<h6 class="project-course">Landing Page</h6>
<p class="project-date"><small><strong>Fecha:</strong> 03/12/2019</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>HTML, CSS</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a
href="Html y CSS\Ejercicios\SantaReyes\index.html" target="_blank">Este Link</small> </a></p>
<p class="project-description"><small>Land Page para campaña publicitaria de la marca Santa Reyes, en el cual
los clientes de la marca podran consultar el sitio mas cercano donde podran encontrar un punto de
venta</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/santareyes.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Blog Personal</h3>
<h6 class="project-course">Proyecto de Curso Práctico de Maquetación en CSS</h6>
<p class="project-date"><small><strong>Fecha:</strong> 13/05/2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>HTML5, CSS3</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="/blog/blogs.html" target="_blank">Este
Link</small> </a></p>
<p class="project-description"><small>Desarrollo de un Blog Personal en CSS y HTML, usando Grid
Layaout</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/blog.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Clon de Google</h3>
<h6 class="project-course">Proyecto del Curso Práctico de HTML y CSS </h6>
<p class="project-date"><small><strong>Fecha:</strong> 15/05/2020</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a>HTML5, CSS3</small> </a></p>
<p class="project-url"><small><strong>Visitalo en: </strong><a href="/Html y CSS/googleClon/index.html"
target="_blank">Este
Link</small> </a></p>
<p class="project-description"><small>Maqueteando el home de Google</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/googleclon.png" alt="imagen de proyecto" />
</figure>
</article>
<!-- DESARROLLOS ANTIGUOS -->
<h2 id="antiguos">PRIMEROS DESARROLLOS - AÑO 2006</h2>
<article class="project">
<div class="project-details">
<h3 class="project-title">Sastreria</h3>
<h6 class="project-course">Pagina Web</h6>
<p class="project-date"><small><strong>Fecha:</strong> 03/12/2014</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a
href="Html y CSS\Desarrollos Antiguos\Sastreria\index.html" target="_blank">HTML, CSS</small> </a></p>
<p class="project-description"><small>Primeros desarrollos realizados en HTML y CSS en el año 2006. Trata de
una pagina informativa para empresa que distribuia sus productos y servicios</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/sastreria.png" alt="imagen de proyecto" />
</figure>
</article>
<article class="project">
<div class="project-details">
<h3 class="project-title">Cristina Mejia</h3>
<h6 class="project-course">Pagina Web</h6>
<p class="project-date"><small><strong>Fecha:</strong> 03/06/2015</small></p>
<p class="project-url"><small><strong>Realizado en: </strong><a
href="Html y CSS\Desarrollos Antiguos\CristinaMejia\index.htm" target="_blank">HTML, CSS</small> </a>
</p>
<p class="project-description"><small>Primeros desarrollos realizados en HTML y CSS en el año 2006. Trata de
una pagina informativa para empresa que distribuia sus productos y servicios</small></p>
</div>
<figure class="project-imageContainer">
<img class="project-image" src="src/imgs/CristinaMejia.png" alt="imagen de proyecto" />
</figure>
</article>
</div>
</section>
<div class="container">
<h2 class="event-list-title">Mas Sobre mi Experiencia - Cursos - Certificados <i class="totalCourses">|</i></h2>
</div>
<section id="Experiencia" class="eventos">
<div class="container" id="cursosid">
</div>
</section>
<section id="Contacto" class="contact">
<div class="container">
<form action="gmail.com" class="form-email">
<label class="trabajemos" for="email">Creamos algo juntos?</br></label>
<input type="datetime" name="" id="email" value="" placeholder="Dejame tu email">
<button type="submit" name="Enviar" class="submit">Enviar</button>
</form>
<div class="social">
<a target="_blank" href="mailto:jhonalexander9@gmail.com" class="icon-envelop social-link instagram"></a>
<a target="_blank" href="https://www.linkedin.com/in/jhon-alexander-alvarez-romero-94a63028/"
class="icon-linkedin social-link instagram"></a>
<a target="_blank" href="https://github.com/AlexanderAlvarez9/AlexanderAlvarez9.github.io"
class="icon-github social-link github"></a>
<a target="_blank" href="https://AlexanderAlvarez9.github.io/" class="icon-whatsapp social-link instagram"></a>
<a target="_blank" href="https://www.skype.com/alexander.9." class="icon-skype social-link instagram"></a>
<a target="_blank" href="https://open.spotify.com/user/12139848167?si=I8pm2ckCT4auPRa-qBmGEw"
class="icon-spotify social-link instagram"></a>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div>
<p>Carrera de Frontend developer en JavaScript 2019 <img src="./src/imgs/platzi.png" width="80px"
alt="Logo Platzi"> </p>
</div>
<div>
<p>Creado por Alexander con ayuda de Platzi</p>
</div>
</footer>
<script src="src/funcScript.js"></script>
</body>
</html>