-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
236 lines (221 loc) · 13.3 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
<!DOCTYPE html>
<head lang="es">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Portafolio Talento Digital Alexandra Álvarez"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!--<link href="https://fonts.googleapis.com/css2?family=Imprima&family=Mali:wght@600&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Alexandra</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top text-white mb-2">
<div class="container">
<h1 class="navbar-brand logo">Alexandra</h1>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav ml-auto">
<li class="nav-item nav-link active" href="#knowMe">Conóceme<span class="sr-only">(current)</span></li>
<li><a class="nav-item nav-link active" href="#myExper">Mi experiencia</a></li>
<li><a class="nav-item nav-link active" href="#myWork">Mis trabajos</a></li>
<li><a class="nav-item nav-link active" href="#contactMe">Contáctame</a></li>
</ul>
</div>
</div>
</nav>
<header id="headerKnowMe" class="container-fluid d-flex justify-content-end align-items-end text-right text-white py-5">
<div class="mb-3">
<h1 class="display-3 font-weight-bold text-white logo">Alexandra</h1>
<h3 class="font-weight-bold text-white mt-4">Diseñadora <span class="spanHeadColor">UX/UI-Front end junior</span> </h3>
</div>
</header>
<section id="knowMe" class="container text-center my-5 d-none d-sm-block">
<h1 class="font-weight-bold my-3">CONÓCEME</h1>
<h4>Un poco sobre mi</h4>
<div class="row border-top">
<div class="col-md-6">
<p class="my-3 text-justify">Soy Alexandra, diseñadora UX/UI y front end junior. Busco entender el universo, la sociedad y a las
personas a través de la investigación racional y emocional. Mi mentalidad de crecimiento me permite estar en constante
aprendizaje y disfrutar de cada desafío. Aprecio ser parte de un equipo, por eso contribuyo activamente al desarrollo de un
buen ambiente laboral. </p>
</div>
<div class="col-md-6">
<p class="my-3 text-justify">Poseo una fuerte vocación de servicio, compromiso y creatividad, que me inspiran a participar en
proyectos orientados tanto a clientes como a clientes internos, así como en voluntariados y talleres de artes. Mi objetivo
es poder combinar mis conocimientos y habilidades socio-emocionales en las áreas de tecnología y servicios, idealmente en
áreas como salud y educación.
</p>
</div>
</div>
</section>
<section id="myExper">
<div class="container">
<div class="row">
<div class="col xs-12 col-sm-12 col-md-12 text-center border-bottom mt-5">
<h1>EXPERIENCIA</h1>
<h4>Algunos empleos</h4>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pt-4 py-2">
<h3>Sermaluc</h3>
<h5>Diseñadora 2018 - 2019</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis magni eius non
delectus expedita minima sit, odio soluta error maxime hic quo corrupti veniam vero ut facilis
libero aspernatur voluptates.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pt-4 py-2">
<h3>Banco Itaú</h3>
<h5>Diseñadora UI y maquetadora 2019</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis magni eius non
delectus expedita minima sit, odio soluta error maxime hic quo corrupti veniam vero ut facilis
libero aspernatur voluptates.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 px-4 py-2">
<h3>Front end trainee</h3>
<h5>Estudiante bootcamp Talento Digital 2020</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis magni eius non
delectus expedita minima sit, odio soluta error maxime hic quo corrupti veniam vero ut facilis
libero aspernatur voluptates.</p>
</div>
</div>
</div>
</section>
<section id="tools" class="d-none d-md-block py-5">
<div class="container text-white">
<div class="row">
<div class="col-12 text-center border-bottom">
<h1 class="font-weight-bold">HERRAMIENTAS</h1>
<h4>Con las que he trabajado</h4>
</div>
<div class="col-12 rounded pt-5 pb-5">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active text-center">
<div class="row">
<div class="col-3">
<i class="fab fa-html5 fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="HTML5"></i>
</div>
<div class="col-3">
<i class="fab fa-css3-alt fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="CSS3"></i>
</div>
<div class="col-3">
<i class="fab fa-js fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="JavaScript"></i>
</div>
<div class="col-3">
<i class="fab fa-github fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="PHP"></i>
</div>
</div>
</div>
<div class="carousel-item text-center">
<div class="row">
<div class="col-3">
<i class="fab fa-invision fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Invision"></i>
</div>
<div class="col-3">
<i class="fab fa-sketch fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Sketch"></i>
</div>
<div class="col-3">
<i class="fab fa-sass fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Sass"></i>
</div>
<div class="col-3">
<i class="fab fa-vuejs fa-5x" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Vue"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="myWork">
<div class="container">
<div class="row mt-5">
<div class="col-xs-12 col-sm-12 col-md-12 text-center border-bottom">
<h1>TRABAJOS</h1>
<h4>Mi selección</h4>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pt-3">
<img src="assets/img/cuppon.png" class="img-fluid py-2 mx-auto d-block" alt=""><a href="https://alexandraalvarez.github.io/cuppon/"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pt-3">
<img src="assets/img/suricata-comidas.png" class="img-fluid py-2 mx-auto d-block" alt=""><a href="https://alexandraalvarez.github.io/suricata/"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pt-3">
<img src="assets/img/ricomida.png" class="img-fluid py-2 mx-auto d-block" alt=""><a href="https://alexandraalvarez.github.io/ricomida/"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pb-5">
<img src="assets/img/iguanas.png" class="img-fluid py-2 mx-auto d-block" alt=""><a href="https://alexandraalvarez.github.io/iguana-page/"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pb-5">
<img src="assets/img/social-movie.png" class="img-fluid py-2 mx-auto d-block" alt=""><a href=" https://alexandraalvarez.github.io/social-movie/"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pb-5">
<img src="assets/img/meet-coffee.png" class="img-fluid py-2 mx-auto d-block" alt=""><a href="https://alexandraalvarez.github.io/meet-coffee/"></a>
</div>
</div>
</div>
</div>
</section>
<section id="contactMe" class="py-5">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="font-weight-bold">CONTÁCTAME</h1>
</div>
<div class="typeform-widget" data-url="https://form.typeform.com/to/ZW6PyfU6"
style="width: 100%; height: 400px;"></div>
<script>
(function () {
var qs, js, q, s, d = document,
gi = d.getElementById,
ce = d.createElement,
gt = d.getElementsByTagName,
id = "typef_orm",
b = "https://embed.typeform.com/";
if (!gi.call(d, id)) {
js = ce.call(d, "script");
js.id = id;
js.src = b + "embed.js";
q = gt.call(d, "script")[0];
q.parentNode.insertBefore(js, q)
}
})()
</script>
<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">
powered by <a
href="https://admin.typeform.com/signup?utm_campaign=ZW6PyfU6&utm_source=typeform.com-01EE8QB0W80M2DZ5VZQTHCH6X5-free&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN"
style="color: #999" target="_blank">Typeform</a> </div>
</div>
</div>
</section>
<footer class="text-center py-4">
<div class="iconos d-inline px-3">
<a class="text-white" href="https://github.com/alexandraalvarez">
<i class=" fab fa-github-alt fa-3x" data-toggle="tooltip" data-placement="bottom" title="Github"></i>
</a>
</div>
<div class="iconos d-inline px-3">
<a class="text-white" href="https://www.linkedin.com/in/alexandra-mabel-alvarez-alday">
<i class="fab fa-linkedin fa-3x" data-toggle="tooltip" data-placement="bottom" title="LinkedIN"></i>
</a>
</div>
</footer>
<!--scripts para Bootstrap, JS, Popper.js, and jQuery-->
<script src="http://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<!--<script type="text/javascript" src=""></script>-->
</body>
</html>