-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
485 lines (450 loc) · 39.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
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="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" >
<title>My portfolio</title>
</head>
<body>
<span id="spinner-loading">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</span>
<span id="site-content" class="hidden">
<header>
<div id="header-img"></div>
<div id="header-text">
<div id="name">
<div class="top-hr" data-aos-once="true" data-aos="fade-right" data-aos-duration=2000></div>
<h1 data-aos-once="true" data-aos="fade" data-aos-duration=2500>First Name</h1>
<div class="bottom-hr" data-aos-once="true" data-aos="fade-left" data-aos-duration=2000></div>
</div>
<div class="console-text">
<h2>
<span class="typer" id="main" data-words="Full stack developer..." data-delim="/" data-colors="white" data-delay="130" data-loop="1"></span>
<span class="cursor" data-owner="main"></span>
</h2>
</div>
<div class="show-more">
<a href="#about">See more <strong>↓</strong></a>
</div>
</div>
</header>
<!-- menu for large screens -->
<div class="hidden-content navbar-wraper">
<nav>
<div id="go-to-top" class="logo col-sm-1"><a href="#"><img src="images/terminal.webp" alt="logo"></a></div>
<div class="col-sm-11">
<ul>
<li class="section"><a href="#about">About</a></li>
<li class="section"><a href="#experience">Experience</a></li>
<li class="section"><a href="#blog">Blog</a></li>
<li class="section"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- end -->
<!-- menu for small screens -->
<label class="hamburguer-menu hidden-content">
<input type='checkbox'>
<span class='menu'>
<span class='hamburger'></span>
</span>
<ul>
<li class="section"><a href="#about">About</a></li>
<li class="section"><a href="#experience">Experience</a></li>
<li class="section"><a href="#blog">Blog</a></li>
<li class="section"><a href="#contact">Contact</a></li>
</ul>
</label>
<!-- end -->
<div id="wrapperContainer">
<div id="content">
<div id="about">
<div class="container">
<div class="section-title">
<h1>About</h1>
<div class="custom-hr" data-aos-once="true" data-aos="fade-right" data-aos-duration=700></div>
</div>
<div class="row" data-aos-once="true" data-aos="fade-right" data-aos-duration=700>
<img class="profile col-xs-12 col-sm-4" src="images/profile.webp" alt="Profile image">
<div id="profile-about" class="col-sm-8 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis sem at mauris venenatis, et malesuada eros imperdiet. Praesent vel dictum tellus. Praesent eu diam in velit tincidunt dapibus. Phasellus non nisl eget turpis fermentum porttitor. Fusce quis lacus sed neque lacinia finibus vel fringilla augue.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis sem at mauris venenatis, et malesuada eros imperdiet. Praesent vel dictum tellus. Praesent eu diam in velit tincidunt dapibus. Phasellus non nisl eget turpis fermentum porttitor. Fusce quis lacus sed neque lacinia finibus vel fringilla augue.</p>
</div>
</div>
</div>
</div>
<div id="experience" class="container-fluid full-page">
<div class="container">
<div class="section-title">
<h1>Experience</h1>
<div class="custom-hr" data-aos-once="true" data-aos="fade-right" data-aos-duration=700></div>
<p class="projects-picker">
<span class="projects-type"><span id="projects-all" class="active">All</span>/</span>
<span class="projects-type"><span id="projects-fullstack" title="Backend + Frontend">Fullstack</span>/</span>
<span class="projects-type"><span id="projects-frontend">Frontend</span></span>
</p>
</div>
<div class="row">
<div id="p1" class="project col-md-4 col-sm-12 fadeIn">
<div class="exp-box">
<img class="img-responsive" src="images/experience/work_web.webp" alt="pic: p1">
<div class="exp-box-caption">
<div class="exp-box-caption-content">
<div class="project-name text-faded">Project Name</div>
<div class="project-tech">Rails API + EmberJs</div>
</div>
<div class="exp-inside exp-show-more">
<button data-toggle="modal" data-target="#modal-p1">Details</button>
</div>
</div>
</div>
</div>
<div id="p3" class="project col-md-4 col-sm-12 card fadeIn">
<div class="exp-box">
<img class="img-responsive" src="images/experience/work_web.webp" alt="pic: p3">
<div class="exp-box-caption">
<div class="exp-box-caption-content">
<div class="project-name text-faded">Project Name</div>
<div class="project-tech">Website</div>
</div>
<div class="exp-inside exp-show-more">
<button data-toggle="modal" data-target="#modal-p3">Details</button>
</div>
</div>
</div>
</div>
<div id="p4" class="project col-md-4 col-sm-12 card fadeIn">
<div class="exp-box">
<img class="img-responsive" src="images/experience/work_web.webp" alt="pic: p4">
<div class="exp-box-caption">
<div class="exp-box-caption-content">
<div class="project-name text-faded">Project Name</div>
<div class="project-tech">ReactJS</div>
</div>
<div class="exp-inside exp-show-more">
<button data-toggle="modal" data-target="#modal-p4">Details</button>
</div>
</div>
</div>
</div>
<div id="p2" class="project col-md-4 col-sm-12 card fadeIn">
<div class="exp-box">
<img class="img-responsive" src="images/experience/work_web.webp" alt="pic: p2">
<div class="exp-box-caption">
<div class="exp-box-caption-content">
<div class="project-name text-faded">Project Name</div>
<div class="project-tech">Java + Angular2</div>
</div>
<div class="exp-inside exp-show-more">
<button data-toggle="modal" data-target="#modal-p2">Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="services">
<div id="services-wrapper" class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-xs-12 col-md-4 service-info" data-aos-once="true" data-aos="fade-down" data-aos-duration=700>
<svg class="light" id="Layer_5" enable-background="new 0 0 64 64" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m62.887 50-10.887-6.804v3.804h-8.533c4.393-4 7.239-9.671 7.512-16h3.826l-6.805-10.887-6.805 10.887h3.775c-.229 3.934-1.805 7.509-4.268 10.28.186-.39.298-.82.298-1.28v-20.92c.546.653 1.053 1.348 1.507 2.091l.521.853 5.142-3.13-.521-.854c-4.217-6.913-11.563-11.04-19.649-11.04-12.347 0-22.453 9.78-22.979 22h-3.826l6.805 10.887 6.805-10.887h-3.775c.22-3.769 1.683-7.204 3.971-9.923v20.923c0 1.654 1.346 3 3 3h20c.44 0 .854-.1 1.231-.271-3 2.649-6.926 4.271-11.232 4.271h-17v2h17c10.477 0 19-8.523 19-19v-1h-2.195l3.195-5.113 3.195 5.113h-2.195v1c0 11.58-9.421 21-21 21h-27v2h51v3.804zm-41.887-27v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v4h-22v-4h2v2zm-12 7v1h2.195l-3.195 5.113-3.195-5.113h2.195v-1c0-11.58 9.421-21 21-21 7.049 0 13.48 3.435 17.399 9.238l-1.728 1.052c-3.553-5.209-9.34-8.29-15.671-8.29-10.477 0-19 8.523-19 19zm6.062-11c3.121-3.665 7.759-6 12.938-6 5.059 0 9.725 2.207 12.932 6h-3.932v-2h-2v2h-2v-2h-2v2h-2v-2h-2v2h-2v-2h-2v2h-2v-2h-2v2zm22.938 22h-20c-.552 0-1-.449-1-1v-13h22v13c0 .551-.448 1-1 1zm-.636 10c1.255-.562 2.449-1.232 3.573-2h13.063v-2.196l5.113 3.196-5.113 3.196v-2.196z"/><path d="m7 47h2v2h-2z"/><path d="m3 47h2v2h-2z"/><path d="m35 29h2v2h-2z"/><path d="m31 29h2v2h-2z"/><path d="m27 29h2v2h-2z"/><path d="m23 29h2v2h-2z"/><path d="m19 29h2v2h-2z"/><path d="m35 33h2v2h-2z"/><path d="m31 33h2v2h-2z"/><path d="m27 33h2v2h-2z"/><path d="m23 33h2v2h-2z"/><path d="m19 33h2v2h-2z"/><path d="m35 37h2v2h-2z"/><path d="m31 37h2v2h-2z"/><path d="m27 37h2v2h-2z"/><path d="m23 37h2v2h-2z"/><path d="m19 37h2v2h-2z"/></svg>
<h2>Skill</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-xs-12 col-md-4 service-info" data-aos-once="true" data-aos="fade-down" data-aos-duration="1000">
<svg class="frontend" enable-background="new 0 0 480 480" version="1.1" viewBox="0 0 480 480" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> <path d="m456 240h-8v-168c-0.026-22.08-17.92-39.974-40-40h-336c-22.08 0.026-39.974 17.92-40 40v120h-8c-13.255 0-24 10.745-24 24v208c0 13.255 10.745 24 24 24h304c4.418 0 8-3.582 8-8-0.026-22.08-17.92-39.974-40-40h-24v-48h96v72c0 13.255 10.745 24 24 24h64c13.255 0 24-10.745 24-24v-160c0-13.255-10.745-24-24-24zm-280 184c0 4.418-3.582 8-8 8h-144c-4.418 0-8-3.582-8-8v-8h160v8zm0-24h-160v-184c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8v184zm120 16c10.168 0.012 19.229 6.418 22.632 16h-128.1c0.948-2.562 1.445-5.268 1.472-8v-8h104zm-104-16v-48h16v48h-16zm32 0v-48h32v48h-32zm144-64h-176v-48h176v48zm0-72v8h-176v-56c-0.027-3.796-0.966-7.53-2.736-10.888 0.12-0.112 0.28-0.144 0.392-0.264l79.2-79.2c3.07-3.178 2.982-8.243-0.196-11.312-3.1-2.994-8.015-2.994-11.116 0l-79.2 79.2c-0.192 0.2-0.272 0.456-0.44 0.664-3.104-1.44-6.483-2.19-9.904-2.2h-120v-120c0-13.255 10.745-24 24-24h336c13.255 0 24 10.745 24 24v168h-40c-13.255 0-24 10.745-24 24zm96 160c0 4.418-3.582 8-8 8h-64c-4.418 0-8-3.582-8-8v-8h80v8zm0-24h-80v-136c0-4.418 3.582-8 8-8h64c4.418 0 8 3.582 8 8v136z"/> <path d="m95.592 289.38c-3.124-3.123-8.188-3.123-11.312 0l-33.936 33.936c-3.178 3.07-3.266 8.134-0.196 11.312s8.134 3.266 11.312 0.196c0.067-0.064 0.132-0.13 0.196-0.196l33.936-33.936c1.428-2.475-1.442-7.18 0-11.312z"/> <path d="m143.4 289.38c-3.1-2.994-8.015-2.994-11.116 0l-33.936 33.936c-3.178 3.069-3.266 8.134-0.196 11.312 3.069 3.178 8.134 3.266 11.312 0.196 0.067-0.064 0.132-0.13 0.196-0.196l33.936-33.936c3.069-3.178 2.982-8.243-0.196-11.312z"/> <path d="m317.46 114.34c-3.1-2.994-8.015-2.994-11.116 0l-79.2 79.2c-3.178 3.069-3.266 8.134-0.197 11.312s8.134 3.266 11.312 0.197c0.067-0.064 0.132-0.13 0.197-0.197l79.2-79.2c3.07-3.178 2.982-8.243-0.196-11.312z"/> <path d="m440.77 311.03c-3.1-2.995-8.016-2.995-11.116 0l-22.624 22.624c-3.178 3.07-3.266 8.134-0.196 11.312s8.134 3.266 11.312 0.196c0.066-0.064 0.132-0.13 0.196-0.196l22.624-22.624c3.07-3.178 2.982-8.242-0.196-11.312z"/> <path d="m240.16 304h-0.08c-4.418 0.022-7.982 3.622-7.96 8.04s3.622 7.982 8.04 7.96c4.418 0 8-3.582 8-8s-3.582-8-8-8z"/> <path d="m256 64h-32c-4.418 0-8 3.582-8 8s3.582 8 8 8h32c4.418 0 8-3.582 8-8s-3.582-8-8-8z"/></svg>
<h2>Skill</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-xs-12 col-md-4 service-info" data-aos-once="true" data-aos="fade-down" data-aos-duration=1300>
<svg class="backend" viewBox="0 0 496 496" xmlns="http://www.w3.org/2000/svg"><path d="m496 256v-208h-112v-48h-272v48h-112v208h48v121.136719c-13.761719 3.574219-24 15.992187-24 30.863281 0 17.648438 14.351562 32 32 32 14.863281 0 27.289062-10.230469 30.863281-24h73.136719v13.769531l19.648438 6.542969-9.265626 18.519531 30.785157 30.785157 18.511719-9.257813 6.550781 19.640625h43.53125l6.550781-19.640625 18.511719 9.257813 30.785156-30.785157-9.265625-18.519531 19.65625-6.542969v-13.769531h73.136719c3.574219 13.769531 16 24 30.863281 24 17.648438 0 32-14.351562 32-32 0-14.871094-10.238281-27.289062-24-30.863281v-121.136719zm-112-16v-48h96v48zm-248 0h-8v-64h240v64zm248-112h96v48h-96zm-16 32h-240v-64h240zm-256 16h-96v-48h96zm368-112v48h-96v-48zm-112-48v64h-240v-64zm-256 48v48h-96v-48zm-96 128h96v48h-96zm40 232c-8.824219 0-16-7.175781-16-16s7.175781-16 16-16 16 7.175781 16 16-7.175781 16-16 16zm30.863281-24c-2.910156-11.191406-11.671875-19.953125-22.863281-22.863281v-121.136719h176v64h-13.769531l-6.550781 19.640625-18.511719-9.257813-30.785157 30.785157 9.265626 18.519531-19.648438 6.542969v13.769531zm233.136719 18.230469-18.382812 6.128906-1.34375 3.5625c-.386719 1.015625-.785157 2.015625-1.226563 3l-1.550781 3.460937 8.648437 17.296876-14.472656 14.472656-17.296875-8.648438-3.464844 1.550782c-1 .449218-2.007812.839843-3.03125 1.242187l-3.527344 1.351563-6.121093 18.351562h-20.46875l-6.121094-18.351562-3.527344-1.351563c-1.023437-.402344-2.042969-.800781-3.035156-1.242187l-3.460937-1.550782-17.296876 8.648438-14.472656-14.472656 8.648438-17.296876-1.550782-3.460937c-.441406-.984375-.839843-1.984375-1.226562-3l-1.34375-3.5625-18.375-6.128906v-20.46875l18.382812-6.128907 1.34375-3.5625c.386719-1.015624.785157-2.015624 1.226563-3l1.550781-3.460937-8.648437-17.296875 14.472656-14.472656 17.296875 8.648437 3.464844-1.550781c1-.449219 2.007812-.839844 3.03125-1.242188l3.527344-1.351562 6.121093-18.34375h20.46875l6.121094 18.351562 3.527344 1.351563c1.023437.402344 2.042969.800781 3.035156 1.242187l3.460937 1.550782 17.296876-8.648438 14.472656 14.472656-8.648438 17.296876 1.550782 3.460937c.441406.984375.839843 1.984375 1.226562 3l1.34375 3.5625 18.375 6.128906zm136-10.230469c0 8.824219-7.175781 16-16 16s-16-7.175781-16-16 7.175781-16 16-16 16 7.175781 16 16zm-24-30.863281c-11.191406 2.910156-19.953125 11.671875-22.863281 22.863281h-73.136719v-13.769531l-19.648438-6.542969 9.265626-18.519531-30.785157-30.785157-18.511719 9.257813-6.550781-19.640625h-13.769531v-64h176zm0 0"/><path d="m144 32h16v16h-16zm0 0"/><path d="m176 32h16v16h-16zm0 0"/><path d="m336 32h16v32h-16zm0 0"/><path d="m304 32h16v32h-16zm0 0"/><path d="m272 32h16v32h-16zm0 0"/><path d="m144 112h16v16h-16zm0 0"/><path d="m176 112h16v16h-16zm0 0"/><path d="m336 112h16v32h-16zm0 0"/><path d="m304 112h16v32h-16zm0 0"/><path d="m272 112h16v32h-16zm0 0"/><path d="m144 192h16v16h-16zm0 0"/><path d="m176 192h16v16h-16zm0 0"/><path d="m336 192h16v32h-16zm0 0"/><path d="m304 192h16v32h-16zm0 0"/><path d="m272 192h16v32h-16zm0 0"/><path d="m448 80h16v16h-16zm0 0"/><path d="m416 80h16v16h-16zm0 0"/><path d="m448 144h16v16h-16zm0 0"/><path d="m416 144h16v16h-16zm0 0"/><path d="m448 208h16v16h-16zm0 0"/><path d="m416 208h16v16h-16zm0 0"/><path d="m64 80h16v16h-16zm0 0"/><path d="m32 80h16v16h-16zm0 0"/><path d="m64 144h16v16h-16zm0 0"/><path d="m32 144h16v16h-16zm0 0"/><path d="m64 208h16v16h-16zm0 0"/><path d="m32 208h16v16h-16zm0 0"/><path d="m248 368c-22.054688 0-40 17.945312-40 40s17.945312 40 40 40 40-17.945312 40-40-17.945312-40-40-40zm0 64c-13.230469 0-24-10.769531-24-24s10.769531-24 24-24 24 10.769531 24 24-10.769531 24-24 24zm0 0"/></svg>
<h2>Skill</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<div id="blog" class="container-fluid full-page">
<div class="container">
<div class="section-title">
<h1>Blog</h1>
<div class="custom-hr" data-aos-once="true" data-aos="fade-right" data-aos-duration=700></div>
<p>Check the latest articles I wrote.</p>
</div>
<div class="row">
<div class="box" data-aos-once="true" data-aos="fade-right" data-aos-duration=700>
<a href="https://google.com" target="_blank">
<img src="images/experience/work_web.webp" alt="gif">
</a>
<div class="blog-description container-fluid">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<a href="https://google.com" target="_blank">See more...</a>
</div>
</div>
<div class="box" data-aos-once="true" data-aos="fade-right" data-aos-duration=700>
<a href="https://google.com" target="_blank">
<img src="images/experience/work_web.webp" alt="blog image">
</a>
<div class="blog-description container-fluid">
<h5>Lorem ipsum dolor sit amet</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<a href="https://google.com" target="_blank">See more...</a>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="pre-full-page">
<svg preserveAspectRatio="none" viewBox="0 0 100 102" height="75" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0 Z" fill="#f3f3f3"></path>
</svg>
<div class="container">
<div class="section-title">
<h1>Contact</h1>
<div class="custom-hr" data-aos-once="true" data-aos="fade-right" data-aos-duration=700></div>
</div>
<div class="form-container col-xs-12 col-md-6" data-aos-once="true" data-aos="flip-down" data-aos-duration=700>
<form class="form-horizontal" method="POST" action="">
<div class="form-group">
<p>Do you want we work together?</p>
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputName" name="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" name="_replyto" placeholder="Email address">
</div>
<div class="form-group">
<textarea class="form-control" id="inputBody" name="message" cols="30" rows="10" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button id="send-contact-form" class="btn btn-success col-xs-3">Send</button>
<span id="empty-form-alert" class="col-xs-9"></span>
</div>
</form>
</div>
<div class="col-xs-12 col-md-3 col-md-offset-2 social-networks">
<div>
<h4>... or find me at<h4>
<a target=_blank href="https://www.github.com/">
<svg class="contact-logo github-svg-logo" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;" xml:space="preserve"> <g> <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
</a>
<a target=_blank href="https://twitter.com/" >
<svg class="contact-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve"> <style type="text/css">.st0{fill:#1DA1F2;}.st1{fill:#FFFFFF;}</style> <g id="Dark_Blue"><circle class="st0" cx="200" cy="200" r="200"/></g> <g id="Logo__x2014__FIXED"><path class="st1" d="M163.4,305.5c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25 c-8.6,3.8-17.9,6.4-27.7,7.6c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2 c-26.6,0-48.2,21.6-48.2,48.2c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2 c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7 c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7 C110.8,297.5,136.2,305.5,163.4,305.5"/></g> </svg>
</a>
<a target=_blank href="https://www.linkedin.com/in/">
<svg class="contact-logo" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve"> <g> <circle style="fill:#007AB9;" cx="56.098" cy="56.097" r="56.098"/> <g> <path style="fill:#F1F2F2;" d="M89.616,60.611v23.128H76.207V62.161c0-5.418-1.936-9.118-6.791-9.118 c-3.705,0-5.906,2.491-6.878,4.903c-0.353,0.862-0.444,2.059-0.444,3.268v22.524H48.684c0,0,0.18-36.546,0-40.329h13.411v5.715 c-0.027,0.045-0.065,0.089-0.089,0.132h0.089v-0.132c1.782-2.742,4.96-6.662,12.085-6.662 C83.002,42.462,89.616,48.226,89.616,60.611L89.616,60.611z M34.656,23.969c-4.587,0-7.588,3.011-7.588,6.967 c0,3.872,2.914,6.97,7.412,6.97h0.087c4.677,0,7.585-3.098,7.585-6.97C42.063,26.98,39.244,23.969,34.656,23.969L34.656,23.969z M27.865,83.739H41.27V43.409H27.865V83.739z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
</a>
</div>
</div>
</div>
</div>
<footer>
<p class="text-center">Coded with <span class="heart-emoji">❤ </span>by <strong> <a href="https://github.com/alejandrosobko/">Alejandro Sobko</a></strong>.</p>
</footer>
</div>
</div>
</span>
<div id="modal-p1" class="modal modal-message fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Project Name</h4>
<button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">✖</button>
</div>
<div class="modal-body">
<div class="modal-carousel">
<div id="carousel-p1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-p1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-p1" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
<div class="item">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-p1" role="button" data-slide="prev">
<svg class="glyphicon-chevron-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve"><g> <g> <path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12 C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084 c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864 l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
<a class="right carousel-control" href="#carousel-p1" role="button" data-slide="next">
<svg class="glyphicon-chevron-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve"><g> <g> <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12 c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028 c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265 c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
</div>
</div>
<hr>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">Heroku</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">Ruby on Rails</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">EmberJS</span>, Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-p3" class="modal modal-message modal-success fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Project Name <a href="http://www.google.com" class="modal-visit" target="_blank">Visit</a></h4>
<button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">✖</button>
</div>
<div class="modal-body">
<div class="modal-carousel">
<div id="carousel-p3" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-p3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-p3" data-slide-to="1"></li>
<li data-target="#carousel-p3" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
<div class="item">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
<div class="item">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-p3" role="button" data-slide="prev">
<svg class="glyphicon-chevron-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve"><g> <g> <path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12 C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084 c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864 l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
<a class="right carousel-control" href="#carousel-p3" role="button" data-slide="next">
<svg class="glyphicon-chevron-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve"><g> <g> <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12 c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028 c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265 c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
</div>
</div>
<hr>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">HTML</span>, <span class="info-tech">CSS</span> and <span class="info-tech">JS</span>.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-p4" class="modal modal-message fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Project Name <a href="https://google.com" class="modal-visit" target="_blank">Visit</a></h4>
<button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">✖</button>
</div>
<div class="modal-body">
<div class="modal-carousel">
<div id="carousel-p4" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-p4" data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-p4" role="button" data-slide="prev">
<svg class="glyphicon-chevron-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve"><g> <g> <path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12 C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084 c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864 l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
<a class="right carousel-control" href="#carousel-p4" role="button" data-slide="next">
<svg class="glyphicon-chevron-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve"><g> <g> <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12 c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028 c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265 c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
</div>
</div>
<hr>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">ReactJS</span> and <span class="info-tech">TypeScript</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">Highcharts</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-p2" class="modal modal-message fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Project Name</h4>
<button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">✖</button>
</div>
<div class="modal-body">
<div class="modal-carousel">
<div id="carousel-p2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-p2" data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/experience/work_web.webp" alt="Project Name example">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-p2" role="button" data-slide="prev">
<svg class="glyphicon-chevron-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve"><g> <g> <path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12 C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084 c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864 l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
<a class="right carousel-control" href="#carousel-p2" role="button" data-slide="next">
<svg class="glyphicon-chevron-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve"><g> <g> <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12 c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028 c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265 c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/> </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</a>
</div>
</div>
<hr>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">Java</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit <span class="info-tech">Angular2</span> y <span class="info-tech">TypeScript</span>.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="js/typer.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script defer src="js/functions.js"></script>
</body>
</html>