-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
432 lines (406 loc) · 24.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Metadatos SEO -->
<meta name="description" content="Portfolio Santiago Quiroz">
<meta name="author" content="Santiago Quiroz">
<!-- Tags para mejorar la apariencia de la publicación cuando comparte la página en Facebook, Twitter, LinkedIn (OG meta tags) -->
<!-- TODO: Configurar los metadatos en caso de subir la pagina a un host pago -->
<meta property="og:site_name" content="" /> <!-- Nombre del sitio web -->
<meta property="og:site" content="" /> <!-- Link del sitio web -->
<meta property="og:title" content=""/> <!-- Título que se muestra en la publicación compartida real -->
<meta property="og:description" content="" /> <!-- Descripción que se muestra en la publicación compartida real -->
<meta property="og:image" content="" /> <!-- Enlace de la imagen, asegúrese de que sea jpg -->
<meta property="og:url" content="" /> <!-- A donde queres que se vincule la publicaion -->
<meta name="twitter:card" content="summary_large_image"> <!-- Formato de publicación de imagen grande en Twitter -->
<!-- Titulo -->
<title>Santiago Quiroz</title>
<!-- Links de estilos -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@600&display=swap" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.ico">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Menu de navegacion -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<div class="container">
<!-- Imagen Logo -->
<!--<a class="navbar-brand logo-image" href="index.html"><img src="images/LOGO" alt="logo"></a>-->
<!-- Texto logo -->
<a class="navbar-brand logo-text page-scroll" href="index.html">Santiago Quiroz</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">Sobre mi</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#services">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#projects">Projectos</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contacto</a>
</li>
</ul>
<span class="nav-item social-icons">
<span class="fa-stack">
<a href="https://www.linkedin.com/in/santiago-quiroz-dev">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-linkedin-in fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="https://github.com/EmilianoQuiroz">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
</span>
</div>
</div> <!-- Fin del container -->
</nav> <!-- Fin del navbar -->
<!-- Fin del menu de navegacion -->
<!-- Header -->
<header id="header" class="header">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h1 class="h1-large">Desarrollo de software de calidad</h1>
<a class="btn-solid-lg page-scroll" href="#">Descargar cv</a>
<a class="btn-outline-lg page-scroll" href="#contact"><i class="fas fa-user"></i>Contacto</a>
</div> <!-- Fin del text-container -->
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin del container -->
</header> <!-- Fin del header -->
<!-- Sobre Mi -->
<div id="about" class="basic-1 bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="text-container first">
<h2>Hola! Mi nombre es Santiago,</h2>
<p>mis fuertes y grandes pasiones son el desarrollo de software (C, C++, JavaScript, React, Node, SQL y Go ), la arquitectura en la nube (AWS) y el desarrollo de aplicaciones móviles (Android Studio/Kotlin, Dart/Flutter y React Native).</p>
</div> <!-- Fin de la seccion "Sobre mi" -->
</div> <!-- Fin de la columna -->
<div class="col-lg-4">
<div class="text-container second">
<div class="time">SEP 2022 - MAR 2023</div>
<h6>Analista de aplicaciones <bold style="color:red">FK</bold>{Tech}</h6>
<p>Entre mis principales funciones se destacan el análisis de logs, bases de datos, aplicaciones y redes. Otra de mis tareas es el desarrollo de herramientas o aplicaciones en Javascript o Python para facilitar el trabajo de análisis.</p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-container third">
<div class="time">MAR 2023 - ACTUALIDAD</div>
<h6>Backend Software Engineer <bold style="color:red">FK</bold>{Tech}</h6>
<p>Actualmente me desempeño en el rol de backend software engineer, desarrollando requerimientos del lado del servidor utilizando tecnologías como Javascript, Node, Express y My sql.</p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin del container -->
<!-- Estudios -->
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="text-container first">
<h2>Un poco de mis estudios</h2>
<p>Me considero una persona altamente autodidacta, aunque también me gusta hacer cursos para perfeccionar mis habilidades como programador. Actualmente me encuentro cursado la Diplomatura universitaria en programación en la UTNFRH, con la cual estoy viendo temas avanzados de programación, análisis de datos, redes y ciberseguridad.</p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-container second">
<!--<div class="time">MAR 2021 - ACTUALIDAD</div>
<h6>Tecnicatura en Sistemas UTN</h6>
<p>Actualmente me encuentro cursando la tecnicatura en sistemas en la UTN</p>-->
<div class="time">MAR 2023 - DIC 2023</div>
<h6>Diplomatura en Programación UTNFRH</h6>
<p>Los temas centrales de esta diplomatura dictados durante dos cuatrimestres (800hs) son ciencia de datos (Python, R y SQL), bases de datos avandado, programación avanzada (Java y Python), desarrollo de aplicaciones Android (Java/Kotlin), redes y ciberseguridad.</p>
<!-- <div class="time">FEB 2022 - ABR 2023</div>
<h6>Curso de programación de aplicaciones móviles CODERHOUSE</h6>
<p>En este curso aprendí a desarrollar aplicaciones móviles utilizando el framework de Javascript React Native.</p> -->
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-container third">
<!--<div class="time">DIC 2022 - MAY 2023</div>
<h6>Curso de Backend CODERHOUSE</h6>
<p>Aprendí a desarrollar proyectos del lado del backend con tecnologías como NodeJS, ExpressJS, MySQL, MongoDB, WebSocket, AWS, entre otras.</p>-->
<div class="time">AGO 2022 - SEP 2022</div>
<h6>Curso de React CODERHOUSE</h6>
<p>En este curso desarrolle varios proyectos gracias a esta librería de JavaScript para el desarrollo frontend.</p>
<div class="time">MAY 2022 - JUL 2022</div>
<h6>Curso de Javascript CODERHOUSE</h6>
<p>En este curso aprendí e implemente las bases del desarrollo web con con JavaScript creando varios proyectos del lado del frontend.</p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de container -->
</div><!-- Fin de la clase Sobre Mi -->
<!-- Servicios -->
<div id="services" class="basic-2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="h2-heading">Servicios</h2>
<p class="p-heading">Desarrollo de software escalable, seguro y de calidad. Entre mis especialidades se encuentran las siguientes:</p>
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
<div class="row">
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-mobile"></i>
<h4>DESARROLLO MOBILE</h4>
<p>Desarrollo de aplicaciones móviles para Android con tecnologías como Kotlin, React Native, Dart y Flutter como tecnologías principales.</p>
</div> <!-- Fin de text-box -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-code"></i>
<h4>DESARROLLO WEB</h4>
<p>Desarrollo de aplicaciones aplicaciones web seguras y escalables tanto del lado del frontend como del backend.</p>
</div> <!-- Fin de text-box -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-cloud"></i>
<h4>CLOUD SOLUTIONS</h4>
<p>Despliegues de aplicaciones en la nube de AWS con una arquitectura de servicios a la medida de tu proyecto.</p>
</div> <!-- Fin de text-box -->
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de container -->
</div><!-- Fin de servicios -->
<!-- Detalles -->
<div class="split">
<div class="area-1">
</div><div class="area-2 bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Texto Container ¿Porque trabajar conmigo? -->
<div class="text-container">
<h2>¿Porque trabajar conmigo?</h2>
<p>Además de mi pasión por la tecnología y mi experiencia en IT otros de mis fuertes son el trato interpersonal y la responsabilidad que le dedico a cada proyecto.</p>
<h5>Herramientas de desarrollo</h5>
<p>Las herramientas utilizo en mis proyectos frecuentemente son Git, GitHub, Jira, Confluence, Docker, Linux y servicios de AWS.</p>
<h5>SKILLS DE DESARROLLO</h5>
<p>A diario utilizo tecnologías como html, css, javascript, react, node y mySQL, entre otras.</p>
<!-- Logos de Soft Skills -->
<div class="icons-container">
<img src="images/logo-javascript.png" alt="alternative">
<img src="images/logo-react.png" alt="alternative">
<img src="images/logo-node.png" alt="alternative">
<img src="images/logo-sql.png" alt="alternative">
<img src="images/logo-C.png" alt="alternative">
<img src="images/logo-cpp.png" alt="alternative">
<img src="images/logo-Csharp.png" alt="alternative">
<img src="images/logo-Python.png" alt="alternative">
<img src="images/logo-Golang.png" alt="alternative">
<img src="images/logo-scala.png" alt="alternative">
<img src="images/logo-kotlin.jpg" alt="alternative">
<img src="images/logo-flutter.png" alt="alternative">
</div> <!-- Fin de icons-container -->
</div> <!-- Fin de text-container -->
<!-- Fin de text container -->
</div> <!-- Fin col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de container -->
</div> <!-- Fin de area-2 -->
</div><!-- Fin de detalles -->
<!-- Projectos -->
<div class="basic-3">
<div class="container" id="projects">
<div class="row">
<div class="col-lg-12">
<h2 class="h2-heading">Proyectos mas recientes.</h2>
<p class="p-heading">Un pequeño vistaso a lo que son mis proyectos, tanto personales como para terceros.</p>
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de container -->
</div> <!-- Fin de la clase basic-3 -->
<!-- Fin de Proyectos -->
<!-- Cards de los proyectos -->
<!-- TODO:Tratar de generarlas desde javascript -->
<div class="basic-4">
<div class="container">
<div class="row"><!-- Por cada contenedor row hay tres proyectos -->
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="project.html">
<img class="img-fluid" src="images/CRUD_GO_MySQL.png" alt="alternative">
</a>
</div> <!-- Fin de image-container -->
<p><strong>Proyecto:</strong> Gestion de empleados <strong>Descripcion:</strong> aplicacion de gestion de empleados con Go, Bootstrap y MySQL. <a class="blue" href="https://github.com/EmilianoQuiroz/CRUD-GOlang-MySql">codigo</a></p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="#">
<img class="img-fluid" src="images/crypto-app.png" alt="alternative">
</a>
</div> <!-- Fin de image-container -->
<p><strong>Proyecto:</strong> Crypto App <strong>Descripcion:</strong> aplicacion para ver el precio de criptomonedas con react native <a class="blue" href="https://github.com/EmilianoQuiroz/App-Crypto-React-Native">codigo</a>.</p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="#">
<img class="img-fluid" src="images/App-Mercado-Pago.png" alt="alternative">
</a>
</div> <!-- Fin de image-container -->
<p><strong>Proyecto:</strong> App Mercado Pago <strong>Descripcion:</strong> clon de la app de mercado pago con react native y typescript <a class="blue" href="https://github.com/EmilianoQuiroz/App-Mercado-Pago">codigo</a>.</p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
<div class="row">
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="project.html">
<img class="img-fluid" src="images/spaceX-Clone.png" alt="alternative">
</a>
</div> <!-- Fin de image-container -->
<p><strong>Proyecto:</strong> Clon spaceX <strong>Descripcion:</strong> clon de la pagina web de spaceX con html, css y javascript <a class="blue" href="https://github.com/EmilianoQuiroz/SpaceX-Clone">codigo</a> <a class="blue" href="https://emilianoquiroz.github.io/SpaceX-Clone/">demo</a></p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="project.html">
<img class="img-fluid" src="images/Netflix-Clone.png" alt="alternative">
</a>
</div> <!-- Fin de image-container -->
<p><strong>Proyecto:</strong> Clon Netflix <strong>Descripcion:</strong> Clon del inicion de netflix con html, css y javascript <a class="blue" href="https://github.com/EmilianoQuiroz/Netflix-Clone">codigo</a> <a class="blue" href="https://emilianoquiroz.github.io/Netflix-Clone/">demo</a></p>
</div> <!-- Fin de text-container -->
</div> <!-- Fin de col -->
<!-- TODO:La card empieza aca -->
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="project.html">
<img class="img-fluid" src="images/Tesla-Clone.png" alt="alternative">
</a>
</div> <!-- Fin de image-container -->
<p><strong>Proyecto:</strong> Recursos Dev <strong>Descripcion:</strong> Clon de la pagina web de tesla con html, css y javascript <a class="blue" href="https://github.com/EmilianoQuiroz/Tesla-website-clone">codigo</a> <a class="blue" href="https://emilianoquiroz.github.io/Tesla-website-clone/">demo</a></p>
</div> <!-- Fin de text-container -->
</div> <!-- y termina aca, tener en cuenta la muestra para generar la card desde js TODO: -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de la clase container -->
</div><!-- Fin de la seccion de Proyectos -->
<!-- Seccion de Contacto -->
<div id="contact" class="form-1 bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Contacto</h2>
<p class="p-heading">Si lo que necesitas es desarrollar Software de calidad, seguro y escalable no dudes en contactarme! <a class="blue no-line" href="#your-link">santiagoquiroz.dev@gmail.com</a></p>
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
<div class="row">
<div class="col-lg-12">
<!-- Formulario de contacto -->
<!-- TODO: Enviar los datos del formulario al mail -->
<form id="contactForm">
<div class="form-group">
<input type="text" class="form-control-input" id="cname" required>
<label class="label-control" for="cname">Nombre</label>
</div>
<div class="form-group">
<input type="email" class="form-control-input" id="cemail" required>
<label class="label-control" for="cemail">Email</label>
</div>
<div class="form-group">
<textarea class="form-control-textarea" id="cmessage" required></textarea>
<label class="label-control" for="cmessage">Consulta</label>
</div>
<div class="form-group">
<button type="submit" class="form-control-submit-button">Enviar</button>
</div>
</form><!-- Fin de Formulario de Contacto -->
</div> <!-- Fin de col -->
</div> <!-- Fin de row -->
</div> <!-- Fin de container -->
</div> <!-- Fin de form-1 -->
<!-- Fin de Contacto -->
<!-- Footer -->
<div class="footer bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="social-container">
<!-- Icono de GitHub -->
<span class="fa-stack">
<a href="https://github.com/EmilianoQuiroz">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
<!-- Icono de Twitter -->
<span class="fa-stack">
<a href="#">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<!-- Icono de LinkedIn -->
<span class="fa-stack">
<a href="https://www.linkedin.com/in/santiago-quiroz-dev">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-linkedin-in fa-stack-1x"></i>
</a>
</span>
<!-- Icono de Instagram -->
<span class="fa-stack">
<a href="#">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
</div> <!-- Fin de social-container -->
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de la clase container -->
</div> <!-- Fin del footer -->
<!-- copyright -->
<div class="copyright bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="p-small">Copyright © <a class="no-line" href="https://www.linkedin.com/in/santiago-quiroz-dev">Santiago Quiroz</a></p>
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de la clase container -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="p-small">Derechos reservados</p>
</div> <!-- Fin de col -->
</div> <!-- Fin de la clase row -->
</div> <!-- Fin de la clase container -->
</div> <!-- Fin de copyright -->
<!-- Fin del Footer -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery -->
<script src="js/scripts.js"></script> <!-- scripts a manopla -->
</body>
</html>