-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
317 lines (230 loc) · 12.5 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
<!DOCTYPE html>
<html lang="es">
<head>
<title>Alvaro Mesa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="HTML,CSS,JS, Diseño, Desarrollo, programando, junior developer, uruguay ">
<meta name="Description" content="Sitio de Alvaro Mesa Analista Programador ">
<meta name="Author" content="Alvaro Mesa alvaromesa19@gmail.com">
<meta name="Copyright" content="Derechos reservados">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="img/code512.png">
<meta property="og:url" content="http://alvaromesa.com" />
<meta property="og:type" content="site" />
<meta property="og:title" content=" Alvaro Mesa Programador" />
<meta property="og:description" content="Sitio portfolio responsivo de Alvaro Mesa" />
<meta property="og:image" content="http://alvaromesa.com/img/Git.png" />
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#datosNavbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#AlvaroMesa" class="navbar-brand brand">Alvaro Mesa</a>
</div>
<div class="collapse navbar-collapse" id="datosNavbar">
<ul class="nav navbar-nav">
<li><a href="#Blog">Blog</a> </li>
<li><a href="#Portfolio">Portfolio</a> </li>
<li><a href="http://alvaromesa.com/CV/" target="_blank" title="CV">CV</a></li>
<li><a href="#Contacto">Contacto</a> </li>
</ul>
</div>
</nav>
</header>
<main class="container-fluid" id="contenido">
<section id="AlvaroMesa" class="row jumbotron">
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="list-group">
<div class="thumbnail">
<h3 class="list-group-item active list-group-item-heading text-center"></h3>
<img class="img-thumbnail img-responsive " src="img/perfil.jpg"
alt="Alvaro de camisa a cuadros."
title="Alvaro"
></img>
<div class="panel-body">
</div>
</div>
</div>
</article>
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h3 class="text-primary text-center">Alvaro Mesa </h3>
<p>Tiene 27 años y es de Paso Carrasco, en el Departamento de Canelones.</p>
<p>Técnico de Soporte Informático actualmente estudiando para Analista en Técnologias de la Información en la Facultad de Ingenieria de la ORT.</p>
<p>Dedicado a continuar aprendiendo técnologias nuevas, actualmente se desempeña en el desarrollo web, aunque con interes de trabajar con aplicaciones moviles.</p>
<p>Estudia por su propia cuenta en Code School y lleva su propio blog donde busca compartir los conocimientos que adquiere.</p>
</article>
</section><!-- Termina Seccion Ganador-->
<section id="Sliders" class="row Carousel">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/portf1.jpg" alt="Libros html/css y js/jquery" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item ">
<img src="img/portf2.jpg" alt="Codigo" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/portf3.jpg" alt="Mas Libros" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controles del carousel -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</article>
</section><!-- Termina Seccion Carousel-->
<section id="granFinal" class="row jumbotron">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="text-primary text-center">Mi Camino </h3>
<p>Llevando a cabo mis estudios para Soporte Informático cumpli muchos de mis deseos sobre comprender como funciona muchas de las técnologias actuales sobre la red, a medida que aprendia sobre la web y servidores, surgieron más dudas de como se desarrolla ese mundo que todos los diás utilizamos a cotidiano, por eso mi interes de poder aprender y crear mis propios sitios de cero.</p>
<p>Comenzando en Enero de 2017 me inscribi en la carrera de Analista en Técnologias de la Información y en las vacaciones realize un curso en Bios de Programador PHP y MySQL. </p>
<p>Gran parte de lo que aprendi por cuenta propia fue gracias <a href="fhttps://www.freecodecamp.com/" title="FreeCodeCamp">FreeCodeCamp</a> donde comenze a aprender de manera gratuita como se desarrolla con javascript,jQuery, Ajax, algoritmos y mucho más.</p>
<p>Hoy en día continuo estudiando en <a href="https://www.codeschool.com/users/alvaromesa" title="Code School">Code School</a> donde puedo aprender sobre técnologias más modernas.</p>
<p>¿Lo que más me apasiona del desarrollo ? es algo interminable donde hay tantas cosas para aprender, sin importar tus origenes, te puedes sentar y con dedicación aprender y aplicar algo nuevo, conocer gente del resto del mundo, comenzar un proyecto y crear un producto con tus propias manos que el resto puede utilizar. </p>
</article>
</section><!-- Termina Jumbotron Introducción-->
<section id="Blog" class="row ">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="text-primary text-center">Blogs</h3>
</article>
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="programandoAprendiendo">
<div class="list-group">
<div class="thumbnail">
<h3 class="list-group-item active list-group-item-heading text-center">Programando y Aprendiendo</h3>
<a href="http://alvaromesa.com/blog/index.html"><img class="img-thumbnail img-responsive " src="img/programandoAprendiendo.png"
alt="Blog sobre programacion."
title="Programando Aprendiendo"
></img></a>
<div class="panel-body">
<p> Blog sobre recursos que llevo mientras aprendo a programar.
</p>
</div>
</div>
</div>
</article>
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="list-group">
<div class="thumbnail">
<h3 class="list-group-item active list-group-item-heading text-center"> Entrevistando a Programadores</h3>
<a href="http://alvaromesa.com/blog/entrevistas/reportajes.html"><img class="img-thumbnail img-responsive " src="img/entrevistandoProgramadores.png"
alt="Blog sobre preguntas frecuentes y entrevistas a programadores."
title="Nicolás"
></img></a>
<div class="panel-body">
<p> Blog sobre preguntas frecuentes y entrevistas a programadores.
</p>
</div>
</div>
</div>
</article>
</section><!-- Termina Seccion Blogs-->
<section class="row ">
<article id="Portfolio" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="text-primary text-center">Portfolio</h3>
</article>
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="list-group">
<div class="thumbnail">
<h3 class="list-group-item active list-group-item-heading text-center"> Proyectos </h3>
<a href="http://alvaromesa.com/Portfolio/index.html"><img class="img-thumbnail img-responsive " src="img/portfolio.png"
alt="Repositor de Proyectos"
title="Proyectos"
></img></a>
</div>
</article>
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="list-group">
<div class="thumbnail">
<h3 class="list-group-item active list-group-item-heading text-center"> Tecnologias</h3>
<a href="http://alvaromesa.com/medallero/"><img class="img-thumbnail img-responsive " src="img/cursosCompletos.png"
alt="Cursos Completados de Code School ."
title="Cursos"
></img></a>
<div class="panel-body">
<!-- Activar el modal con un boton-->
<button type="button" class=" btn btn-primary btn-lg btn-move" data-toggle="modal" data-target="#verTrofeo">Ver Mas</button>
<!-- Modal-->
<div class="modal fade" id="verTrofeo" tabindex="-1" role="dialog">
<div class="modal-dialog">
<!-- Contenido del Modal-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close girar" data-dismiss="modal"> ×
</button>
<h4 class="text-primary modal-title">Técnologias</h4>
</div>
<section id="tecnologias" class="row">
</section><!-- Termina tabla informativa-->
</div><!-- Termina body del Modal-->
</div><!-- Termina Contenido del Modal-->
</div>
</div><!-- Termina Modal-->
</div>
</div>
</div>
</article>
<section class="row jumbotron">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="text-primary text-center">Contacto</h3>
</article>
<article id="Contacto" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form class ="form-group" action="https://formspree.io/mealvaromesa@gmail.com" method="post">
<label for="first-name">Nombre</label>
<input class="form-control" type="text" id="first-name" name="name" placeholder="Tu nombre aqui.">
<input type="hidden" name="_subject" value="2bon2b contact" />
<input class="form-control"type="text" name="_gotcha" style="display:none" />
<label for="email">Correo</label>
<input class="form-control" type="email" id="email" name="_replyto" required placeholder="Tu Email aqui.">
<label for="phone">Telefono</label>
<input class="form-control"type="tel" id="phone" name="message" placeholder="Tu telefono aqui.">
<label for="message">Mensaje</label>
<textarea class="form-control" rows="5" id="message" name="message" required placeholder="Deja tu mensaje..."></textarea>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</article>
</section><!-- Termina Seccion Contacto-->
</main>
<section class="container-fluid">
<footer class="footer">
<a href="https://github.com/TSIIAM" target="_blank"><i class="icon fa fa-github fa-3x"></i></a>
<a href="https://twitter.com/TecSIMesa" target="_blank"><i class=" icon fa fa-twitter fa-3x"></i></a>
<a href="https://www.linkedin.com/in/alvaro-mesa-469748134/" target="_blank"><i class=" icon fa fa-linkedin fa-3x"></i></a>
</footer>
</section>
<!--Sripts de bootstrap y jquery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>