-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
452 lines (433 loc) · 53.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Nathalia Buitrago & Front-end developer, London, United Kingdom">
<meta name="keywords" content="HTML, CSS, Jquery, JavaScript, React, Modern, United Kingdom, London, Europe">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="http://nbweb.me/favicon.ico" type="image/x-icon">
<title>Nathalia Buitrago </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="body">
<div class="bg-line bg-line1">
</div>
<div class="bg-line bg-line2">
</div>
<div class="bg-line bg-line3">
</div>
<div class="bg-line bg-line4">
</div>
<div class="container">
<header class="fade-in">
<ul>
<li class="logo">
<svg width="159px" height="28px" viewBox="0 0 159 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-161.000000, -58.000000)" fill="#FFAFB4">
<path d="M165.397093,84.858908 L161,84.858908 L173.971424,58.2198546 L178.405159,58.2198546 L165.397093,84.858908 Z M177.663854,84.858908 L173.266761,84.858908 L186.238185,58.2198546 L190.67192,58.2198546 L177.663854,84.858908 Z M201.024818,84.5291261 L196.151374,84.5291261 L196.151374,66.5010459 L200.878248,66.5010459 L200.878248,68.7362347 C201.440102,67.807955 202.203478,67.1239696 203.168401,66.6842581 C204.133323,66.2445467 205.104338,66.0246942 206.081475,66.0246942 C207.205182,66.0246942 208.176197,66.2140116 208.994549,66.592652 C209.812901,66.9712925 210.490779,67.4781745 211.028204,68.1133133 C211.565629,68.748452 211.962585,69.5057216 212.219083,70.3851445 C212.475582,71.2645674 212.603829,72.1928333 212.603829,73.1699699 L212.603829,84.5291261 L207.730385,84.5291261 L207.730385,74.012746 C207.730385,72.9867526 207.467783,72.1317709 206.942572,71.4477752 C206.417361,70.7637796 205.568486,70.4217869 204.395923,70.4217869 C203.321072,70.4217869 202.490519,70.7821007 201.904237,71.5027389 C201.317955,72.2233771 201.024818,73.1088939 201.024818,74.1593157 L201.024818,84.5291261 Z M217.564652,84.5291261 L217.564652,58 L222.364811,58 L222.364811,68.4797377 C222.780094,67.8445989 223.457972,67.2766467 224.398466,66.7758642 C225.33896,66.2750817 226.480972,66.0246942 227.824535,66.0246942 C229.143669,66.0246942 230.316215,66.2628677 231.342209,66.7392218 C232.368202,67.2155759 233.241505,67.8751332 233.962143,68.7179135 C234.682781,69.5606938 235.226305,70.5561368 235.592732,71.7042723 C235.959158,72.8524078 236.142368,74.0982383 236.142368,75.4418011 C236.142368,76.8097924 235.940837,78.0739439 235.537768,79.2342936 C235.134699,80.3946433 234.56064,81.4023003 233.815573,82.2572948 C233.070507,83.1122894 232.172776,83.7779537 231.122354,84.2543078 C230.071932,84.7306619 228.9116,84.9688354 227.641322,84.9688354 C226.395473,84.9688354 225.314532,84.7245549 224.398466,84.2359866 C223.482401,83.7474183 222.780094,83.112289 222.291526,82.3305797 L222.291526,84.5291261 L217.564652,84.5291261 Z M231.268924,75.4784436 C231.268924,73.8173113 230.835326,72.5531598 229.968117,71.6859511 C229.100908,70.8187424 228.044395,70.3851445 226.798546,70.3851445 C226.187836,70.3851445 225.60767,70.4950707 225.05803,70.7149265 C224.508391,70.9347822 224.032044,71.2584538 223.628975,71.6859511 C223.225906,72.1134484 222.902235,72.6447584 222.657951,73.2798972 C222.413666,73.915036 222.291526,74.6478775 222.291526,75.4784436 C222.291526,76.2845813 222.413666,77.0052087 222.657951,77.6403475 C222.902235,78.2754863 223.225906,78.8129033 223.628975,79.2526148 C224.032044,79.6923263 224.508391,80.028212 225.05803,80.2602819 C225.60767,80.4923518 226.187836,80.6083851 226.798546,80.6083851 C228.044395,80.6083851 229.100908,80.1686802 229.968117,79.2892573 C230.835326,78.4098343 231.268924,77.1395758 231.268924,75.4784436 Z M239.564208,81.5244461 C239.564208,80.5961663 239.881773,79.8144687 240.516912,79.1793299 C241.152051,78.5441911 241.921534,78.2266265 242.825385,78.2266265 C243.289525,78.2266265 243.723123,78.3121247 244.126192,78.4831236 C244.529261,78.6541225 244.883468,78.886189 245.188823,79.1793299 C245.494178,79.4724709 245.732351,79.8205706 245.90335,80.2236395 C246.074349,80.6267083 246.159847,81.0603062 246.159847,81.5244461 C246.159847,81.9641575 246.074349,82.3855414 245.90335,82.7886102 C245.732351,83.1916791 245.494178,83.5397788 245.188823,83.8329197 C244.883468,84.1260607 244.529261,84.3581272 244.126192,84.5291261 C243.723123,84.700125 243.289525,84.7856232 242.825385,84.7856232 C241.921534,84.7856232 241.152051,84.4680585 240.516912,83.8329197 C239.881773,83.1977809 239.564208,82.4282974 239.564208,81.5244461 Z M239.527566,69.5423684 C239.527566,68.6140886 239.845131,67.8323911 240.480269,67.1972523 C241.115408,66.5621135 241.884892,66.2445489 242.788743,66.2445489 C243.252883,66.2445489 243.686481,66.330047 244.08955,66.5010459 C244.492618,66.6720448 244.846825,66.9041113 245.15218,67.1972523 C245.457536,67.4903933 245.695709,67.8384929 245.866708,68.2415618 C246.037707,68.6446306 246.123205,69.0782285 246.123205,69.5423684 C246.123205,69.9820799 246.037707,70.4034637 245.866708,70.8065325 C245.695709,71.2096014 245.457536,71.5577011 245.15218,71.8508421 C244.846825,72.1439831 244.492618,72.3760495 244.08955,72.5470484 C243.686481,72.7180473 243.252883,72.8035455 242.788743,72.8035455 C241.884892,72.8035455 241.115408,72.4859809 240.480269,71.8508421 C239.845131,71.2157033 239.527566,70.4462197 239.527566,69.5423684 Z M266.510495,66.5010459 L270.394593,78.1166992 L273.729055,66.5010459 L278.565857,66.5010459 L272.922921,84.5291261 L268.049477,84.5291261 L263.835596,72.2172665 L259.695001,84.5291261 L254.748271,84.5291261 L248.995409,66.5010459 L254.12535,66.5010459 L257.459812,78.0800568 L261.380553,66.5010459 L266.510495,66.5010459 Z M292.760574,73.4631094 C292.736146,73.0233979 292.644541,72.5898001 292.485756,72.1623028 C292.326971,71.7348055 292.082691,71.3561708 291.752907,71.0263872 C291.423124,70.6966036 291.007847,70.427895 290.507064,70.2202535 C290.006282,70.012612 289.413902,69.9087928 288.729906,69.9087928 C288.094767,69.9087928 287.532922,70.018719 287.044354,70.2385747 C286.555785,70.4584305 286.140509,70.739353 285.798511,71.0813508 C285.456513,71.4233487 285.193912,71.8019834 285.010698,72.2172665 C284.827485,72.6325495 284.723666,73.0478263 284.699238,73.4631094 L292.760574,73.4631094 Z M297.304237,79.3625421 C297.084381,80.1442514 296.736281,80.8831999 296.259927,81.5794097 C295.783573,82.2756195 295.203407,82.8802137 294.519411,83.3932105 C293.835416,83.9062072 293.035397,84.315377 292.119332,84.6207322 C291.203266,84.9260874 290.195609,85.0787627 289.09633,85.0787627 C287.850481,85.0787627 286.665721,84.8650172 285.542014,84.43752 C284.418307,84.0100227 283.428971,83.3810005 282.573976,82.5504344 C281.718982,81.7198682 281.041103,80.7061042 280.540321,79.5091119 C280.039538,78.3121196 279.789151,76.9563629 279.789151,75.4418011 C279.789151,74.0005246 280.033431,72.693624 280.522,71.5210601 C281.010568,70.3484962 281.664018,69.3530532 282.48237,68.5347013 C283.300722,67.7163494 284.247309,67.0812201 285.322159,66.6292945 C286.397009,66.1773688 287.508486,65.9514093 288.656621,65.9514093 C291.465889,65.9514093 293.652199,66.781963 295.215618,68.4430952 C296.779036,70.1042274 297.560734,72.38825 297.560734,75.2952314 C297.560734,75.6372292 297.54852,75.9609008 297.524091,76.266256 C297.499663,76.5716112 297.487449,76.7487146 297.487449,76.7975714 L284.58931,76.7975714 C284.613739,77.3838533 284.7542,77.9273774 285.010698,78.4281599 C285.267197,78.9289424 285.596975,79.3625403 286.000044,79.7289665 C286.403113,80.0953928 286.873353,80.3824223 287.410778,80.5900639 C287.948203,80.7977054 288.522262,80.9015246 289.132973,80.9015246 C290.281108,80.9015246 291.178839,80.6450301 291.826192,80.1320334 C292.473545,79.6190366 292.943785,78.9594793 293.236926,78.1533416 L297.304237,79.3625421 Z M301.422283,84.5291261 L301.422283,58 L306.222443,58 L306.222443,68.4797377 C306.637726,67.8445989 307.315604,67.2766467 308.256098,66.7758642 C309.196592,66.2750817 310.338603,66.0246942 311.682166,66.0246942 C313.001301,66.0246942 314.173847,66.2628677 315.19984,66.7392218 C316.225834,67.2155759 317.099137,67.8751332 317.819775,68.7179135 C318.540413,69.5606938 319.083937,70.5561368 319.450363,71.7042723 C319.81679,72.8524078 320,74.0982383 320,75.4418011 C320,76.8097924 319.798469,78.0739439 319.3954,79.2342936 C318.992331,80.3946433 318.418272,81.4023003 317.673205,82.2572948 C316.928138,83.1122894 316.030408,83.7779537 314.979986,84.2543078 C313.929564,84.7306619 312.769232,84.9688354 311.498954,84.9688354 C310.253105,84.9688354 309.172164,84.7245549 308.256098,84.2359866 C307.340033,83.7474183 306.637726,83.112289 306.149158,82.3305797 L306.149158,84.5291261 L301.422283,84.5291261 Z M315.126556,75.4784436 C315.126556,73.8173113 314.692958,72.5531598 313.825749,71.6859511 C312.95854,70.8187424 311.902027,70.3851445 310.656178,70.3851445 C310.045468,70.3851445 309.465301,70.4950707 308.915662,70.7149265 C308.366023,70.9347822 307.889676,71.2584538 307.486607,71.6859511 C307.083538,72.1134484 306.759866,72.6447584 306.515582,73.2798972 C306.271298,73.915036 306.149158,74.6478775 306.149158,75.4784436 C306.149158,76.2845813 306.271298,77.0052087 306.515582,77.6403475 C306.759866,78.2754863 307.083538,78.8129033 307.486607,79.2526148 C307.889676,79.6923263 308.366023,80.028212 308.915662,80.2602819 C309.465301,80.4923518 310.045468,80.6083851 310.656178,80.6083851 C311.902027,80.6083851 312.95854,80.1686802 313.825749,79.2892573 C314.692958,78.4098343 315.126556,77.1395758 315.126556,75.4784436 Z" ></path>
</g>
</g>
</svg>
</li>
<li>
<svg width="16px" height="20px" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-708.000000, -62.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="noun_1712146_cc" transform="translate(708.000000, 62.000000)">
<path d="M8.23520495,0.588268235 C4.08227513,0.588268235 0.705423647,3.96215285 0.705423647,8.11279875 C0.705423647,10.606197 1.853662,12.3886286 3.29821926,14.0126733 C4.74277661,15.6367179 6.4864496,17.1498648 7.86230088,19.2122658 C7.94543749,19.3369253 8.08536616,19.4117976 8.23520495,19.4117976 C8.38504375,19.4117976 8.52497242,19.3369253 8.60810903,19.2122658 C9.98396031,17.1498648 11.7276333,15.6367179 13.1721906,14.0126733 C14.616748,12.3886286 15.7649863,10.606197 15.7649863,8.11279875 C15.7649863,3.96215285 12.3881348,0.588268235 8.23520495,0.588268235 Z M8.23520495,1.48462917 C11.9040282,1.48462917 14.8686254,4.44690484 14.8686254,8.11279875 C14.8686254,10.3371094 13.8913679,11.8570328 12.5034247,13.4174358 C11.2258415,14.8537646 9.62138231,16.3349741 8.23520495,18.2563865 C6.84902759,16.3349741 5.24456842,14.8537646 3.96698518,13.4174358 C2.57904208,11.8570328 1.60178449,10.3371094 1.60178449,8.11279875 C1.60178449,4.44690484 4.56638174,1.48462917 8.23520495,1.48462917 Z M8.23520495,4.17371196 C6.26032462,4.17371196 4.64976123,5.78427535 4.64976123,7.75915568 C4.64976123,9.7340378 6.26032462,11.3446012 8.23520495,11.3446012 C10.2100853,11.3446012 11.8206487,9.7340378 11.8206487,7.75915568 C11.8206487,5.78427535 10.2100853,4.17371196 8.23520495,4.17371196 Z M8.23520495,5.07007289 C9.72565598,5.07007289 10.9242877,6.26870465 10.9242877,7.75915568 C10.9242877,9.2496085 9.72565598,10.4482403 8.23520495,10.4482403 C6.74475393,10.4482403 5.54612216,9.2496085 5.54612216,7.75915568 C5.54612216,6.26870465 6.74475393,5.07007289 8.23520495,5.07007289 Z" ></path>
</g>
</g>
</g>
</svg>
London, UK
</li>
<li><a href="tel:+447473965418">
<svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-897.000000, -62.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(897.000000, 62.000000)">
<g >
<g >
<path d="M9.30350168,20 L2.27544569,20 C1.05947852,20 0.0700665263,19.0030925 0.0700665263,17.7775065 L0.0700665263,2.22208658 C0.0700665263,0.996907542 1.05947852,0 2.27544569,0 L9.30350168,0 C10.5194688,0 11.5088808,0.996907542 11.5088808,2.22208658 L11.5088808,17.7775065 C11.5088808,19.0030925 10.5194688,20 9.30350168,20 Z M2.27544569,0.833333333 C1.51541574,0.833333333 0.897134195,1.45629883 0.897134195,2.22208658 L0.897134195,17.7775065 C0.897134195,18.5432943 1.51541574,19.1666667 2.27544569,19.1666667 L9.30350168,19.1666667 C10.0635316,19.1666667 10.6818132,18.5432943 10.6818132,17.7775065 L10.6818132,2.22208658 C10.6818132,1.45629883 10.0635316,0.833333333 9.30350168,0.833333333 L2.27544569,0.833333333 Z"></path>
<path d="M8.14770691,3.52579754 L3.43124046,3.52579754 C3.20266609,3.52579754 3.01770663,3.33943688 3.01770663,3.10913088 C3.01770663,2.87882488 3.20266609,2.69246421 3.43124046,2.69246421 L8.14770691,2.69246421 C8.37628128,2.69246421 8.56124074,2.87882488 8.56124074,3.10913088 C8.56124074,3.33943688 8.37628128,3.52579754 8.14770691,3.52579754 Z"></path>
</g>
<path d="M5.79007943,17.6904297 C5.6782153,17.6904297 5.57483184,17.6444499 5.49648658,17.5655111 C5.41773745,17.4861654 5.37654559,17.3819987 5.37654559,17.273763 C5.37654559,17.2151693 5.38462245,17.1655274 5.40521833,17.1110026 C5.43025653,17.0613607 5.45933312,17.0153809 5.49648653,16.977946 C5.53363994,16.9405111 5.57927406,16.9071452 5.632985,16.8863933 C5.73192619,16.8444825 5.84379032,16.8444825 5.94717378,16.8863933 C5.9968463,16.9071452 6.04207657,16.9405111 6.08367224,16.977946 C6.12082569,17.0153809 6.14990229,17.0613607 6.17049818,17.1110026 C6.19109411,17.1655274 6.20361318,17.2196452 6.20361318,17.273763 C6.20361318,17.3819987 6.15797906,17.4861654 6.0836722,17.5655111 C6.04207653,17.607015 5.99684626,17.6363119 5.94717374,17.6570638 C5.89750121,17.6778158 5.8437904,17.6904297 5.79007943,17.6904297 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
07473 965418</a>
</li>
<li><a href="mailto:nathalia.buitragoj@gmail.com">
<svg width="19px" height="20px" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1063.000000, -62.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="noun_1708893_cc" transform="translate(1063.000000, 62.000000)">
<path d="M13.679802,5.51366337 C13.0053465,5.17623762 11.9411881,4.91663366 10.7730693,4.91663366 C7.01009901,4.91663366 4.41485149,8.05683168 4.41485149,11.5605941 C4.41485149,13.8184158 5.71247525,15.1160396 7.29544554,15.1160396 C8.6970297,15.1160396 9.96851485,14.5192079 11.0067327,12.9619802 C11.0326733,14.4673267 11.9411881,15.1160396 13.1607921,15.1160396 C15.6522772,15.1160396 18.2217822,12.7285149 18.2217822,8.16079208 C18.2217822,3.33366337 14.8219802,0.167326733 10.0467327,0.167326733 C3.94772277,0.167326733 0.0289108911,4.99465347 0.0289108911,11.0156436 C0.0289108911,16.569505 3.89584158,19.969505 8.38574257,19.969505 C10.2023762,19.969505 11.7853465,19.709703 13.2390099,18.8792079 L12.6677228,17.0366337 C11.6035644,17.6075248 10.2023762,17.8930693 8.61920792,17.8930693 C4.93386139,17.8930693 1.84554455,15.4015842 1.84554455,10.859802 C1.84554455,5.35782178 5.5049505,2.19168317 9.78693069,2.19168317 C13.8356436,2.19168317 16.4308911,4.50138614 16.4308911,8.31643564 C16.4308911,11.6384158 14.7180198,13.1435644 13.5241584,13.1178218 C12.7455446,13.0918812 12.4083168,12.6247525 12.6936634,11.0156436 L13.679802,5.51366337 Z M11.2663366,9.45841584 C10.9031683,11.4829703 9.44970297,13.1178218 7.89247525,13.1178218 C6.75069307,13.1178218 6.23148515,12.3908911 6.23148515,11.2752475 C6.23148515,8.73168317 7.97029703,6.8370297 10.2540594,6.8370297 C10.8770297,6.8370297 11.3960396,6.91485149 11.7334653,7.04475248 L11.2663366,9.45841584 Z" ></path>
</g>
</g>
</g>
</svg>
nathalia.buitragoj@gmail.com</a>
</li>
</ul>
<ul id="header-mobile">
<li class="logo-mobile">
<svg width="115px" height="20.25px" viewBox="0 0 159 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-161.000000, -58.000000)" fill="#FFAFB4">
<path d="M165.397093,84.858908 L161,84.858908 L173.971424,58.2198546 L178.405159,58.2198546 L165.397093,84.858908 Z M177.663854,84.858908 L173.266761,84.858908 L186.238185,58.2198546 L190.67192,58.2198546 L177.663854,84.858908 Z M201.024818,84.5291261 L196.151374,84.5291261 L196.151374,66.5010459 L200.878248,66.5010459 L200.878248,68.7362347 C201.440102,67.807955 202.203478,67.1239696 203.168401,66.6842581 C204.133323,66.2445467 205.104338,66.0246942 206.081475,66.0246942 C207.205182,66.0246942 208.176197,66.2140116 208.994549,66.592652 C209.812901,66.9712925 210.490779,67.4781745 211.028204,68.1133133 C211.565629,68.748452 211.962585,69.5057216 212.219083,70.3851445 C212.475582,71.2645674 212.603829,72.1928333 212.603829,73.1699699 L212.603829,84.5291261 L207.730385,84.5291261 L207.730385,74.012746 C207.730385,72.9867526 207.467783,72.1317709 206.942572,71.4477752 C206.417361,70.7637796 205.568486,70.4217869 204.395923,70.4217869 C203.321072,70.4217869 202.490519,70.7821007 201.904237,71.5027389 C201.317955,72.2233771 201.024818,73.1088939 201.024818,74.1593157 L201.024818,84.5291261 Z M217.564652,84.5291261 L217.564652,58 L222.364811,58 L222.364811,68.4797377 C222.780094,67.8445989 223.457972,67.2766467 224.398466,66.7758642 C225.33896,66.2750817 226.480972,66.0246942 227.824535,66.0246942 C229.143669,66.0246942 230.316215,66.2628677 231.342209,66.7392218 C232.368202,67.2155759 233.241505,67.8751332 233.962143,68.7179135 C234.682781,69.5606938 235.226305,70.5561368 235.592732,71.7042723 C235.959158,72.8524078 236.142368,74.0982383 236.142368,75.4418011 C236.142368,76.8097924 235.940837,78.0739439 235.537768,79.2342936 C235.134699,80.3946433 234.56064,81.4023003 233.815573,82.2572948 C233.070507,83.1122894 232.172776,83.7779537 231.122354,84.2543078 C230.071932,84.7306619 228.9116,84.9688354 227.641322,84.9688354 C226.395473,84.9688354 225.314532,84.7245549 224.398466,84.2359866 C223.482401,83.7474183 222.780094,83.112289 222.291526,82.3305797 L222.291526,84.5291261 L217.564652,84.5291261 Z M231.268924,75.4784436 C231.268924,73.8173113 230.835326,72.5531598 229.968117,71.6859511 C229.100908,70.8187424 228.044395,70.3851445 226.798546,70.3851445 C226.187836,70.3851445 225.60767,70.4950707 225.05803,70.7149265 C224.508391,70.9347822 224.032044,71.2584538 223.628975,71.6859511 C223.225906,72.1134484 222.902235,72.6447584 222.657951,73.2798972 C222.413666,73.915036 222.291526,74.6478775 222.291526,75.4784436 C222.291526,76.2845813 222.413666,77.0052087 222.657951,77.6403475 C222.902235,78.2754863 223.225906,78.8129033 223.628975,79.2526148 C224.032044,79.6923263 224.508391,80.028212 225.05803,80.2602819 C225.60767,80.4923518 226.187836,80.6083851 226.798546,80.6083851 C228.044395,80.6083851 229.100908,80.1686802 229.968117,79.2892573 C230.835326,78.4098343 231.268924,77.1395758 231.268924,75.4784436 Z M239.564208,81.5244461 C239.564208,80.5961663 239.881773,79.8144687 240.516912,79.1793299 C241.152051,78.5441911 241.921534,78.2266265 242.825385,78.2266265 C243.289525,78.2266265 243.723123,78.3121247 244.126192,78.4831236 C244.529261,78.6541225 244.883468,78.886189 245.188823,79.1793299 C245.494178,79.4724709 245.732351,79.8205706 245.90335,80.2236395 C246.074349,80.6267083 246.159847,81.0603062 246.159847,81.5244461 C246.159847,81.9641575 246.074349,82.3855414 245.90335,82.7886102 C245.732351,83.1916791 245.494178,83.5397788 245.188823,83.8329197 C244.883468,84.1260607 244.529261,84.3581272 244.126192,84.5291261 C243.723123,84.700125 243.289525,84.7856232 242.825385,84.7856232 C241.921534,84.7856232 241.152051,84.4680585 240.516912,83.8329197 C239.881773,83.1977809 239.564208,82.4282974 239.564208,81.5244461 Z M239.527566,69.5423684 C239.527566,68.6140886 239.845131,67.8323911 240.480269,67.1972523 C241.115408,66.5621135 241.884892,66.2445489 242.788743,66.2445489 C243.252883,66.2445489 243.686481,66.330047 244.08955,66.5010459 C244.492618,66.6720448 244.846825,66.9041113 245.15218,67.1972523 C245.457536,67.4903933 245.695709,67.8384929 245.866708,68.2415618 C246.037707,68.6446306 246.123205,69.0782285 246.123205,69.5423684 C246.123205,69.9820799 246.037707,70.4034637 245.866708,70.8065325 C245.695709,71.2096014 245.457536,71.5577011 245.15218,71.8508421 C244.846825,72.1439831 244.492618,72.3760495 244.08955,72.5470484 C243.686481,72.7180473 243.252883,72.8035455 242.788743,72.8035455 C241.884892,72.8035455 241.115408,72.4859809 240.480269,71.8508421 C239.845131,71.2157033 239.527566,70.4462197 239.527566,69.5423684 Z M266.510495,66.5010459 L270.394593,78.1166992 L273.729055,66.5010459 L278.565857,66.5010459 L272.922921,84.5291261 L268.049477,84.5291261 L263.835596,72.2172665 L259.695001,84.5291261 L254.748271,84.5291261 L248.995409,66.5010459 L254.12535,66.5010459 L257.459812,78.0800568 L261.380553,66.5010459 L266.510495,66.5010459 Z M292.760574,73.4631094 C292.736146,73.0233979 292.644541,72.5898001 292.485756,72.1623028 C292.326971,71.7348055 292.082691,71.3561708 291.752907,71.0263872 C291.423124,70.6966036 291.007847,70.427895 290.507064,70.2202535 C290.006282,70.012612 289.413902,69.9087928 288.729906,69.9087928 C288.094767,69.9087928 287.532922,70.018719 287.044354,70.2385747 C286.555785,70.4584305 286.140509,70.739353 285.798511,71.0813508 C285.456513,71.4233487 285.193912,71.8019834 285.010698,72.2172665 C284.827485,72.6325495 284.723666,73.0478263 284.699238,73.4631094 L292.760574,73.4631094 Z M297.304237,79.3625421 C297.084381,80.1442514 296.736281,80.8831999 296.259927,81.5794097 C295.783573,82.2756195 295.203407,82.8802137 294.519411,83.3932105 C293.835416,83.9062072 293.035397,84.315377 292.119332,84.6207322 C291.203266,84.9260874 290.195609,85.0787627 289.09633,85.0787627 C287.850481,85.0787627 286.665721,84.8650172 285.542014,84.43752 C284.418307,84.0100227 283.428971,83.3810005 282.573976,82.5504344 C281.718982,81.7198682 281.041103,80.7061042 280.540321,79.5091119 C280.039538,78.3121196 279.789151,76.9563629 279.789151,75.4418011 C279.789151,74.0005246 280.033431,72.693624 280.522,71.5210601 C281.010568,70.3484962 281.664018,69.3530532 282.48237,68.5347013 C283.300722,67.7163494 284.247309,67.0812201 285.322159,66.6292945 C286.397009,66.1773688 287.508486,65.9514093 288.656621,65.9514093 C291.465889,65.9514093 293.652199,66.781963 295.215618,68.4430952 C296.779036,70.1042274 297.560734,72.38825 297.560734,75.2952314 C297.560734,75.6372292 297.54852,75.9609008 297.524091,76.266256 C297.499663,76.5716112 297.487449,76.7487146 297.487449,76.7975714 L284.58931,76.7975714 C284.613739,77.3838533 284.7542,77.9273774 285.010698,78.4281599 C285.267197,78.9289424 285.596975,79.3625403 286.000044,79.7289665 C286.403113,80.0953928 286.873353,80.3824223 287.410778,80.5900639 C287.948203,80.7977054 288.522262,80.9015246 289.132973,80.9015246 C290.281108,80.9015246 291.178839,80.6450301 291.826192,80.1320334 C292.473545,79.6190366 292.943785,78.9594793 293.236926,78.1533416 L297.304237,79.3625421 Z M301.422283,84.5291261 L301.422283,58 L306.222443,58 L306.222443,68.4797377 C306.637726,67.8445989 307.315604,67.2766467 308.256098,66.7758642 C309.196592,66.2750817 310.338603,66.0246942 311.682166,66.0246942 C313.001301,66.0246942 314.173847,66.2628677 315.19984,66.7392218 C316.225834,67.2155759 317.099137,67.8751332 317.819775,68.7179135 C318.540413,69.5606938 319.083937,70.5561368 319.450363,71.7042723 C319.81679,72.8524078 320,74.0982383 320,75.4418011 C320,76.8097924 319.798469,78.0739439 319.3954,79.2342936 C318.992331,80.3946433 318.418272,81.4023003 317.673205,82.2572948 C316.928138,83.1122894 316.030408,83.7779537 314.979986,84.2543078 C313.929564,84.7306619 312.769232,84.9688354 311.498954,84.9688354 C310.253105,84.9688354 309.172164,84.7245549 308.256098,84.2359866 C307.340033,83.7474183 306.637726,83.112289 306.149158,82.3305797 L306.149158,84.5291261 L301.422283,84.5291261 Z M315.126556,75.4784436 C315.126556,73.8173113 314.692958,72.5531598 313.825749,71.6859511 C312.95854,70.8187424 311.902027,70.3851445 310.656178,70.3851445 C310.045468,70.3851445 309.465301,70.4950707 308.915662,70.7149265 C308.366023,70.9347822 307.889676,71.2584538 307.486607,71.6859511 C307.083538,72.1134484 306.759866,72.6447584 306.515582,73.2798972 C306.271298,73.915036 306.149158,74.6478775 306.149158,75.4784436 C306.149158,76.2845813 306.271298,77.0052087 306.515582,77.6403475 C306.759866,78.2754863 307.083538,78.8129033 307.486607,79.2526148 C307.889676,79.6923263 308.366023,80.028212 308.915662,80.2602819 C309.465301,80.4923518 310.045468,80.6083851 310.656178,80.6083851 C311.902027,80.6083851 312.95854,80.1686802 313.825749,79.2892573 C314.692958,78.4098343 315.126556,77.1395758 315.126556,75.4784436 Z" ></path>
</g>
</g>
</svg>
</li>
<li class="icon-li">
<a href="https://github.com/nathaliabj">
<svg class="icon" width="18px" height="18px" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-928.000000, -903.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(928.000000, 903.000000)">
<path d="M10.6666667,0 C4.77604167,0 0,4.5907307 0,10.2527988 C0,14.7834545 3.056,18.6257509 7.29491667,19.9811829 C7.828125,20.0750601 8.02279167,19.7584048 8.02279167,19.4880673 C8.02279167,19.2440027 8.01302083,18.4355134 8.0078125,17.5794448 C5.04166667,18.1989581 4.41470833,16.3704355 4.41470833,16.3704355 C3.92904167,15.1864576 3.23045833,14.8710639 3.23045833,14.8710639 C2.2610625,14.2352702 3.304,14.2477858 3.304,14.2477858 C4.37495833,14.3191148 4.93879167,15.3041044 4.93879167,15.3041044 C5.890625,16.8710605 7.4361875,16.4179949 8.04295833,16.1551668 C8.13991667,15.4943419 8.41595833,15.0412763 8.72004167,14.7859576 C6.35220833,14.5268942 3.86133333,13.6470359 3.86133333,9.71837164 C3.86133333,8.59821332 4.27735417,7.68459283 4.95833333,6.96681682 C4.84960417,6.70649185 4.48241667,5.66330962 5.06379167,4.25218809 C5.06379167,4.25218809 5.95833333,3.97684438 7.997375,5.30350047 C8.847625,5.07509534 9.75975,4.96245473 10.6666458,4.95869003 C11.5728958,4.96245473 12.4856458,5.07633689 13.3372292,5.30474202 C15.3723958,3.97684438 16.2682292,4.25342964 16.2682292,4.25342964 C16.8515625,5.66581275 16.484375,6.7077334 16.375,6.96681682 C17.0585833,7.68459283 17.4713542,8.59823335 17.4713542,9.71837164 C17.4713542,13.6570484 14.9765625,14.5243711 12.6002708,14.7784482 C12.9843958,15.0963451 13.3242292,15.7196231 13.3242292,16.6758168 C13.3242292,18.0462875 13.3098958,19.1514071 13.3098958,19.4893289 C13.3098958,19.7621695 13.5038958,20.0813079 14.0442708,19.9811829 C18.2799583,18.6232478 21.3333333,14.7809514 21.3333333,10.2527988 C21.3333333,4.5907307 16.5572917,0 10.6666667,0 Z" ></path>
</g>
</g>
</g>
</svg>
</a>
</li>
<li class="icon-li">
<a href="https://www.linkedin.com/in/nathalia-buitrago-jurado-b77181159/">
<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="18px" height="18px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve">
<g>
<g>
<path d="M459,0H51C22.95,0,0,22.95,0,51v408c0,28.05,22.95,51,51,51h408c28.05,0,51-22.95,51-51V51C510,22.95,487.05,0,459,0z
M153,433.5H76.5V204H153V433.5z M114.75,160.65c-25.5,0-45.9-20.4-45.9-45.9s20.4-45.9,45.9-45.9s45.9,20.4,45.9,45.9
S140.25,160.65,114.75,160.65z M433.5,433.5H357V298.35c0-20.399-17.85-38.25-38.25-38.25s-38.25,17.851-38.25,38.25V433.5H204
V204h76.5v30.6c12.75-20.4,40.8-35.7,63.75-35.7c48.45,0,89.25,40.8,89.25,89.25V433.5z"/>
</g>
</g>
</svg>
</a>
</li>
<li class="icon-li">
<a href="https://twitter.com/NathaliaBJurado">
<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="18px" height="18px" viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;"
xml:space="preserve">
<g>
<path d="M512.002,97.211c-18.84,8.354-39.082,14.001-60.33,16.54c21.686-13,38.342-33.585,46.186-58.115
c-20.299,12.039-42.777,20.78-66.705,25.49c-19.16-20.415-46.461-33.17-76.674-33.17c-58.011,0-105.042,47.029-105.042,105.039
c0,8.233,0.929,16.25,2.72,23.939c-87.3-4.382-164.701-46.2-216.509-109.753c-9.042,15.514-14.223,33.558-14.223,52.809
c0,36.444,18.544,68.596,46.73,87.433c-17.219-0.546-33.416-5.271-47.577-13.139c-0.01,0.438-0.01,0.878-0.01,1.321
c0,50.894,36.209,93.348,84.261,103c-8.813,2.399-18.094,3.687-27.674,3.687c-6.769,0-13.349-0.66-19.764-1.888
c13.368,41.73,52.16,72.104,98.126,72.949c-35.95,28.176-81.243,44.967-130.458,44.967c-8.479,0-16.84-0.496-25.058-1.471
c46.486,29.807,101.701,47.197,161.021,47.197c193.211,0,298.868-160.062,298.868-298.872c0-4.554-0.104-9.084-0.305-13.59
C480.111,136.775,497.92,118.275,512.002,97.211z"/>
</g>
</svg>
</a>
</li>
<li class="icon-li">
<a href="cv/NathaliaBuitrago-cv.pdf">
<svg class="icon" width="18px" height="18px" viewBox="0 0 17 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1073.000000, -903.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1073.000000, 903.000000)">
<path d="M15.9477273,5.05272727 L11.1172727,0.383181818 C10.8627273,0.137272727 10.5231818,0 10.1695455,0 L1.36363636,0 C0.610454545,0 0,0.610454545 0,1.36363636 L0,18.6363636 C0,19.3895455 0.610454545,20 1.36363636,20 L15,20 C15.7531818,20 16.3636364,19.3895455 16.3636364,18.6363636 L16.3636364,6.03318182 C16.3636364,5.66318182 16.2136364,5.30954545 15.9477273,5.05272727 Z M11.1754545,1.70363636 L14.5854545,5 L11.1754545,5 L11.1754545,1.70363636 Z" ></path>
</g>
</g>
</g>
</svg>
</a>
</li>
</ul>
</header>
<div id="content" class="grid__row">
<div class="grid__col--5">
<h1 class="fade-in">Hey, I'm Nathalia and I <3 to code! ✌ </h1>
<p class="fade-in">I’m currently looking for a company where I could grow and continue developing my skills as a front-end dev. I’m ultra motivated and a quick learner, I’d love to be part of a dev team and change the world :D</p>
<h2 class="fade-in">Skills</h2>
<div class="fade-in secondary">
<ul class="skills">
<li>HTML </li>
<li>CSS/SASS</li>
<li>JavaScript</li>
<li>Jquery </li>
<li>React </li>
</ul>
<ul class="bars">
<li><span></span>
<div class="html-progress">
<span class="bar-color"></span>
</div></li>
<li><span></span>
<div class="css-progress">
<span class="bar-color"></span>
</div>
</li>
<li><span></span>
<div class="js-progress">
<span class="bar-color"></span>
</div>
</li>
<li><span></span>
<div class="jq-progress">
<span class="bar-color"></span>
</div>
</li>
<li><span></span>
<div class="react-progress">
<span class="bar-color"></span>
</div>
</li>
</ul>
</div>
</div>
<div id="shapes" class="fade-in grid__col--6">
<svg viewBox="0 0 545 547" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path class="shape shape-1" d="M426.717868,506 C410.541374,506 393.765751,503.616582 376.990127,498.253891 L145.726176,423.176221 C88.2097525,404.704731 48.6672116,358.228078 39.081141,299.23848 C29.4950705,240.248882 53.4602468,183.642703 101.989729,148.487286 L214.026928,68.6427796 C282.92681,19.1868541 378.188386,32.8915081 429.713515,100.223069 L548.940268,254.549391 C591.478456,309.963862 593.275844,382.658114 552.535044,439.264293 C522.578574,482.165819 475.84648,506 426.717868,506 Z" id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="547" height="469">
<rect x="36" y="38" width="547" height="469" fill="white"></rect>
<use xlink:href="#path-1" fill="black"></use>
</mask>
<path class="shape shape-2" d="M378.27661,517 C362.575022,517 346.291894,514.68293 330.008766,509.469522 L105.534215,436.481808 C49.706347,418.524514 11.3246879,373.341643 2.02004331,315.994154 C-7.2846013,258.646665 15.9770102,203.616246 63.0817736,169.43946 L171.829808,91.8176058 C238.706941,43.7383978 331.171847,57.0615518 381.184311,122.518787 L496.910829,272.549087 C538.200189,326.42097 539.94481,397.091614 500.40007,452.122032 C471.323056,493.829297 425.962914,517 378.27661,517 Z" id="path-3"></path>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="531" height="456">
<rect x="-1" y="62" width="531" height="456" fill="white"></rect>
<use xlink:href="#path-3" fill="black"></use>
</mask>
<path class="shape shape-3" d="M319.568002,388 C309.001338,388 298.043316,386.443378 287.085294,382.940978 L136.021135,333.907382 C98.4507741,321.843561 72.621151,291.48943 66.3594242,252.963033 C60.0976974,214.436636 75.7520144,177.466861 107.452006,154.506686 L180.635939,102.359845 C225.6421,70.0599368 287.86801,79.0105139 321.524792,122.985088 L399.405019,223.776369 C427.191432,259.967833 428.365505,307.444807 401.753166,344.414581 C382.18527,372.433779 351.659352,388 319.568002,388 Z" id="path-5"></path>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="358" height="307">
<rect x="64" y="82" width="358" height="307" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
<path class="shape shape-4" d="M430.568002,423 C420.001338,423 409.043316,421.443378 398.085294,417.940978 L247.021135,368.907382 C209.450774,356.843561 183.621151,326.48943 177.359424,287.963033 C171.097697,249.436636 186.752014,212.466861 218.452006,189.506686 L291.635939,137.359845 C336.6421,105.059937 398.86801,114.010514 432.524792,157.985088 L510.405019,258.776369 C538.191432,294.967833 539.365505,342.444807 512.753166,379.414581 C493.18527,407.433779 462.659352,423 430.568002,423 Z" id="path-7"></path>
<mask id="mask-8" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="358" height="307">
<rect x="175" y="117" width="358" height="307" fill="white"></rect>
<use xlink:href="#path-7" fill="black"></use>
</mask>
<path class="shape shape-5" d="M337.568922,349 C332.315272,349 326.867042,348.219137 321.418812,346.462196 L246.31107,321.865015 C227.631424,315.813327 214.789168,300.586501 211.675894,281.260144 C208.562619,261.933788 216.345805,243.388294 232.106756,231.870567 L268.493149,205.71166 C290.869808,189.508755 321.807971,193.998717 338.541821,216.058093 L377.26317,266.618965 C391.078324,284.774027 391.662063,308.590346 378.430647,327.135839 C368.701665,341.191371 353.524453,349 337.568922,349 Z" id="path-9"></path>
<mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="179" height="155">
<rect x="210" y="195" width="179" height="155" fill="white"></rect>
<use xlink:href="#path-9" fill="black"></use>
</mask>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-735.000000, -209.000000)">
<g transform="translate(736.000000, 210.000000)">
<g id="Group-3">
<g id="Group-2" fill-rule="nonzero" opacity="0.700502232" stroke="#FFAFB4" stroke-dasharray="4" stroke-linejoin="round" stroke-width="2">
<use mask="url(#mask-2)" transform="translate(309.500000, 272.500000) scale(-1, 1) rotate(-90.000000) translate(-309.500000, -272.500000) " xlink:href="#path-1"></use>
<use mask="url(#mask-4)" transform="translate(264.500000, 290.000000) scale(-1, 1) rotate(-180.000000) translate(-264.500000, -290.000000) " xlink:href="#path-3"></use>
<use mask="url(#mask-6)" xlink:href="#path-5"></use>
<use mask="url(#mask-8)" transform="translate(354.000000, 270.500000) rotate(-300.000000) translate(-354.000000, -270.500000) " xlink:href="#path-7"></use>
<use mask="url(#mask-10)" transform="translate(299.500000, 272.500000) rotate(-192.000000) translate(-299.500000, -272.500000) " xlink:href="#path-9"></use>
</g>
<text id="HTML" font-family="Circular-Book, Circular" font-size="16" font-weight="300" letter-spacing="-0.1542857" fill="#FFAFB4">
<tspan x="271" y="272">HTML</tspan>
</text>
<text id="CSS" font-family="Circular-Book, Circular" font-size="16" font-weight="300" letter-spacing="-0.1542857" fill="#FFAFB4">
<tspan x="281" y="182">CSS</tspan>
</text>
<text id="SASS" font-family="Circular-Book, Circular" font-size="16" font-weight="300" letter-spacing="-0.1542857" fill="#FFAFB4">
<tspan x="423" y="227">SASS</tspan>
</text>
<text id="React" font-family="Circular-Book, Circular" font-size="16" font-weight="300" letter-spacing="-0.1542857" fill="#FFAFB4">
<tspan x="180" y="443">React</tspan>
</text>
<text id="Jquery" font-family="Circular-Book, Circular" font-size="16" font-weight="300" letter-spacing="-0.1542857" fill="#FFAFB4">
<tspan x="207" y="44">Jquery</tspan>
</text>
<text id="JS" font-family="Circular-Book, Circular" font-size="16" font-weight="300" letter-spacing="-0.1542857" fill="#FFAFB4">
<tspan x="43" y="318">JS</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<div id="portfolio">
<ul class="portfolio grid__row">
<li class="flex-item">
<a href="responsive_layout/responsive-layout.html" target="_blank">
<img src="imgs/responsive-layout.png" alt="">
<div class="description">
<h3> Responsive layout </h3>
<p>A web page that looks and functions well on multiple screen sizes, I used HTML, CSS, and responsive design, to create a mobile-first web page with a layout that adjusts to fit mobile phones, tablets and desktop displays.</p>
</div>
</a>
</li>
<li class="flex-item">
<a href="online_registration/online-registration.html" target="_blank">
<img src="imgs/online-registration.png" alt="">
<div class="description">
<h3> Online registration </h3>
<p>A web page with responsive, mobile-first registration form using a variety of HTML form elements and CSS for the styling.</p>
</div>
</a>
</li>
<li class="flex-item">
<a href="photo_gallery/photo-gallery.html" target="_blank">
<img src="imgs/photo-gallery.png" alt="">
<div class="description">
<h3> Photo gallery </h3>
<p>For this interactive image gallerie I built it using HTML, CSS, JavaScript and Jquery to create an interactive, searchable gallery of photos.</p>
</div>
</a>
</li>
<li class="flex-item">
<a href="style_guide/style-guide.html" target="_blank">
<img src="imgs/style-guide.png" alt="">
<div class="description">
<h3> Web Style guide </h3>
<p>This web style guide acts as my own personal and custom Bootstrap for layout and development in general, I built it using HTML and implementing Sass. </p>
</div>
</a>
</li>
<li class="flex-item">
<a href="video_player/video-player.html" target="_blank">
<img src="imgs/video-player.png" alt="">
<div class="description">
<h3> Video player </h3>
<p>This is an HTML5 video player using JavaScript and the HTML5 Video API. While the video is playing it highlights the part of the transcript the video is at, also clicking on any part of the transcript, the video will start playing from there.</p>
</div>
</a>
</li>
<li class="flex-item">
<a href="game_show_app/game-show-app.html" target="_blank">
<img src="imgs/game-show-app.png" alt="">
<div class="description">
<h3> Game show app </h3>
<p>In Game show app I created a browser version of “Wheel of Success”, a word guessing game. I used Javascript to come up with a random phrase that players will try to guess by entering different letters into the program.</p>
</div>
</a>
</li>
<li class="flex-item">
<a href="svg_update/svg-update.html" target="_blank">
<img src="imgs/svg-animations.png" alt="">
<div class="description">
<h3> SVG Animations layout </h3>
<p>Scaleable Vector Graphics. SVG graphics are quickly becoming one of the most widely used graphic formats on the web. In this web page I have modernized the user interface of a by adding, styling and optimizing SVG graphics. I used HTML and CSS.</p>
</div>
</a>
</li>
<li class="flex-item">
<a href="web_app_dashboard/web-app-dashboard.html" target="_blank">
<img src="imgs/web-dashboard.png" alt="">
<div class="description">
<h3> Web app dashboard </h3>
<p>This is an interactive dashboard for a web application using HTML, Sass, Jquery, JavaScript and including SVG graphics, I have also created tables, charts, graphics and other user interface components in a manner that promotes interactivity and usability. </p>
</div>
</a>
</li>
<li class="flex-item">
<a href="employee_directory/employee-directory.html" target="_blank">
<img src="imgs/employee-directory.png" alt="">
<div class="description">
<h3> Employee directory </h3>
<p>I created an employee directory by communicating with a third-party API using JavaScript, Jquery, Sass, and HTML.</p>
</div>
</a>
</li>
</ul>
</div>
<div id="footer" class="fade-in grid__row">
<div class="footer grid__row">
<div class="grid__col--4">
<h2>Speaking</h2>
<p>English = { <span>Fluent</span> }<br>
Spanish = { <span>Native</span> }</p>
</div>
<div class="grid__col--4">
<h2>Degrees</h2>
<p><a href="https://teamtreehouse.com/nathaliabuitragojurado" target="_blank">
<svg width="20px" height="11px" viewBox="0 0 20 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-544.000000, -908.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="noun_1191146_cc" transform="translate(544.000000, 908.000000)">
<path d="M19.1425,9.175 C19.487678,9.175 19.7675,8.89517797 19.7675,8.55 L19.7675,3.47 C19.7710484,3.43174878 19.7710484,3.39325122 19.7675,3.355 C19.7675,3.3425 19.7675,3.33 19.7675,3.3175 C19.7547909,3.29411457 19.7405951,3.27156829 19.725,3.25 L19.7075,3.21 C19.6971295,3.18766001 19.6854423,3.16595519 19.6725,3.145 L19.6525,3.1125 C19.6343504,3.08685981 19.6142936,3.06262446 19.5925,3.04 C19.5662901,3.01420163 19.5378455,2.99077667 19.5075,2.97 L19.4775,2.9525 L19.41,2.915 L19.37,2.8975 L19.335,2.885 L10.185,0.055 C10.0652451,0.0183246527 9.93725494,0.0183246527 9.8175,0.055 L0.675,2.8725 C0.412528497,2.95304434 0.233354165,3.19544822 0.233354165,3.47 C0.233354165,3.74455178 0.412528497,3.98695566 0.675,4.0675 L4.0375,5.105 C4.0375,5.105 4.0375,5.105 4.0375,5.1175 L4.0375,8.25 C4.04157761,8.44985439 4.1410056,8.63570109 4.305,8.75 C7.73128583,11.1246038 12.2712142,11.1246038 15.6975,8.75 C15.8614944,8.63570109 15.9609224,8.44985439 15.965,8.25 L15.965,5.1175 C15.965,5.1175 15.965,5.1175 15.965,5.105 L18.52,4.3175 L18.52,8.55 C18.5199972,8.89420401 18.7982987,9.17362318 19.1425,9.175 Z M14.715,7.925 C11.8411474,9.76263385 8.16135257,9.76263385 5.2875,7.925 L5.2875,5.5 L9.8175,6.8975 C9.93723191,6.93432882 10.0652681,6.93432882 10.185,6.8975 L14.7125,5.5 L14.715,7.925 Z M10,5.635 L2.98,3.47 L10,1.305 L17.02,3.47 L10,5.635 Z" ></path>
</g>
</g>
</g>
</svg>
Treehouse tech degree<br></a>
role = { <span>Front-end developer</span>}
</div>
<div class="grid__col--4">
<h2>Code/folio</h2>
<ul>
<li><a href="https://github.com/nathaliabj" target="_blank">
<svg width="22px" height="20px" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-928.000000, -903.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(928.000000, 903.000000)">
<path d="M10.6666667,0 C4.77604167,0 0,4.5907307 0,10.2527988 C0,14.7834545 3.056,18.6257509 7.29491667,19.9811829 C7.828125,20.0750601 8.02279167,19.7584048 8.02279167,19.4880673 C8.02279167,19.2440027 8.01302083,18.4355134 8.0078125,17.5794448 C5.04166667,18.1989581 4.41470833,16.3704355 4.41470833,16.3704355 C3.92904167,15.1864576 3.23045833,14.8710639 3.23045833,14.8710639 C2.2610625,14.2352702 3.304,14.2477858 3.304,14.2477858 C4.37495833,14.3191148 4.93879167,15.3041044 4.93879167,15.3041044 C5.890625,16.8710605 7.4361875,16.4179949 8.04295833,16.1551668 C8.13991667,15.4943419 8.41595833,15.0412763 8.72004167,14.7859576 C6.35220833,14.5268942 3.86133333,13.6470359 3.86133333,9.71837164 C3.86133333,8.59821332 4.27735417,7.68459283 4.95833333,6.96681682 C4.84960417,6.70649185 4.48241667,5.66330962 5.06379167,4.25218809 C5.06379167,4.25218809 5.95833333,3.97684438 7.997375,5.30350047 C8.847625,5.07509534 9.75975,4.96245473 10.6666458,4.95869003 C11.5728958,4.96245473 12.4856458,5.07633689 13.3372292,5.30474202 C15.3723958,3.97684438 16.2682292,4.25342964 16.2682292,4.25342964 C16.8515625,5.66581275 16.484375,6.7077334 16.375,6.96681682 C17.0585833,7.68459283 17.4713542,8.59823335 17.4713542,9.71837164 C17.4713542,13.6570484 14.9765625,14.5243711 12.6002708,14.7784482 C12.9843958,15.0963451 13.3242292,15.7196231 13.3242292,16.6758168 C13.3242292,18.0462875 13.3098958,19.1514071 13.3098958,19.4893289 C13.3098958,19.7621695 13.5038958,20.0813079 14.0442708,19.9811829 C18.2799583,18.6232478 21.3333333,14.7809514 21.3333333,10.2527988 C21.3333333,4.5907307 16.5572917,0 10.6666667,0 Z" ></path>
</g>
</g>
</g>
</svg>
Github</a>
</li>
<li><a href="https://www.linkedin.com/in/nathalia-buitrago-jurado-b77181159/" target="_blank">
<svg class="social-media" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="22px" height="20px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve">
<g>
<g>
<path d="M459,0H51C22.95,0,0,22.95,0,51v408c0,28.05,22.95,51,51,51h408c28.05,0,51-22.95,51-51V51C510,22.95,487.05,0,459,0z
M153,433.5H76.5V204H153V433.5z M114.75,160.65c-25.5,0-45.9-20.4-45.9-45.9s20.4-45.9,45.9-45.9s45.9,20.4,45.9,45.9
S140.25,160.65,114.75,160.65z M433.5,433.5H357V298.35c0-20.399-17.85-38.25-38.25-38.25s-38.25,17.851-38.25,38.25V433.5H204
V204h76.5v30.6c12.75-20.4,40.8-35.7,63.75-35.7c48.45,0,89.25,40.8,89.25,89.25V433.5z"/>
</g>
</g>
</svg>
LinkedIn</a>
</li>
<li><a href="https://twitter.com/NathaliaBJurado" target="_blank">
<svg class="social-media" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="22px" height="20px" viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;"
xml:space="preserve">
<g>
<path d="M512.002,97.211c-18.84,8.354-39.082,14.001-60.33,16.54c21.686-13,38.342-33.585,46.186-58.115
c-20.299,12.039-42.777,20.78-66.705,25.49c-19.16-20.415-46.461-33.17-76.674-33.17c-58.011,0-105.042,47.029-105.042,105.039
c0,8.233,0.929,16.25,2.72,23.939c-87.3-4.382-164.701-46.2-216.509-109.753c-9.042,15.514-14.223,33.558-14.223,52.809
c0,36.444,18.544,68.596,46.73,87.433c-17.219-0.546-33.416-5.271-47.577-13.139c-0.01,0.438-0.01,0.878-0.01,1.321
c0,50.894,36.209,93.348,84.261,103c-8.813,2.399-18.094,3.687-27.674,3.687c-6.769,0-13.349-0.66-19.764-1.888
c13.368,41.73,52.16,72.104,98.126,72.949c-35.95,28.176-81.243,44.967-130.458,44.967c-8.479,0-16.84-0.496-25.058-1.471
c46.486,29.807,101.701,47.197,161.021,47.197c193.211,0,298.868-160.062,298.868-298.872c0-4.554-0.104-9.084-0.305-13.59
C480.111,136.775,497.92,118.275,512.002,97.211z"/>
</g>
</svg>
Twitter</a>
</li>
<li><a href="cv/NathaliaBuitrago-cv.pdf">
<svg width="17px" height="20px" viewBox="0 0 17 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1073.000000, -903.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1073.000000, 903.000000)">
<path d="M15.9477273,5.05272727 L11.1172727,0.383181818 C10.8627273,0.137272727 10.5231818,0 10.1695455,0 L1.36363636,0 C0.610454545,0 0,0.610454545 0,1.36363636 L0,18.6363636 C0,19.3895455 0.610454545,20 1.36363636,20 L15,20 C15.7531818,20 16.3636364,19.3895455 16.3636364,18.6363636 L16.3636364,6.03318182 C16.3636364,5.66318182 16.2136364,5.30954545 15.9477273,5.05272727 Z M11.1754545,1.70363636 L14.5854545,5 L11.1754545,5 L11.1754545,1.70363636 Z" ></path>
</g>
</g>
</g>
</svg>
Resume</a>
</li>
</ul>
</div>
</div>
</div>
<div id="footer-mobile">
<p><a href="mailto:nathalia.buitragoj@gmail.com" class="mail-mobile">nathalia.buitragoj@gmail.com</a><br>
<a href="tel:+447473965418">07473 965418</a>, London UK</p>
</div>
<script src="js/TweenMax.min.js"></script>
<script src="js/TimelineLite.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>