-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
351 lines (317 loc) · 19.4 KB
/
about.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola 👋 mi nombre es Selene González | @gonzalezseledev</title>
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="512x512" href="./assets/images/favicon/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="192x192" href="./assets/images/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon//favicon-16x16.png">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./assets/pages/about.css">
</head>
<body>
<div class="loader-section">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="edfb101d4f"><path d="M 50.296875 27.578125 L 324.796875 27.578125 L 324.796875 347 L 50.296875 347 Z M 50.296875 27.578125 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#edfb101d4f)"><path fill="#5EC4C8" d="M 54.042969 108.332031 C 53.472656 108.691406 52.957031 109.117188 52.492188 109.605469 C 52.03125 110.09375 51.632812 110.628906 51.308594 111.21875 C 50.980469 111.804688 50.730469 112.425781 50.558594 113.078125 C 50.386719 113.726562 50.300781 114.390625 50.296875 115.0625 L 50.296875 263.210938 C 50.300781 263.898438 50.386719 264.574219 50.566406 265.238281 C 50.742188 265.902344 51 266.53125 51.34375 267.128906 C 51.683594 267.726562 52.09375 268.269531 52.578125 268.757812 C 53.058594 269.25 53.597656 269.667969 54.1875 270.019531 L 182.78125 345.878906 C 183.390625 346.226562 184.035156 346.496094 184.710938 346.675781 C 185.390625 346.859375 186.082031 346.949219 186.785156 346.949219 C 187.488281 346.949219 188.179688 346.859375 188.859375 346.675781 C 189.539062 346.496094 190.183594 346.226562 190.792969 345.878906 L 320.59375 269.992188 C 321.191406 269.644531 321.734375 269.226562 322.222656 268.738281 C 322.707031 268.25 323.125 267.707031 323.46875 267.105469 C 323.8125 266.507812 324.074219 265.878906 324.253906 265.210938 C 324.429688 264.542969 324.519531 263.867188 324.519531 263.175781 L 324.769531 115.019531 C 324.765625 114.339844 324.679688 113.671875 324.503906 113.015625 C 324.332031 112.359375 324.078125 111.738281 323.746094 111.144531 C 323.414062 110.554688 323.011719 110.011719 322.542969 109.523438 C 322.070312 109.035156 321.546875 108.609375 320.96875 108.253906 L 190.941406 28.832031 C 190.320312 28.445312 189.652344 28.152344 188.945312 27.953125 C 188.242188 27.75 187.519531 27.648438 186.785156 27.648438 C 186.050781 27.648438 185.332031 27.75 184.625 27.953125 C 183.917969 28.152344 183.253906 28.445312 182.628906 28.832031 Z M 186.832031 44.894531 L 308.925781 119.5 L 308.703125 258.679688 L 186.832031 329.878906 L 66.160156 258.695312 L 66.160156 119.480469 Z M 186.832031 44.894531 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#5EC4C8" d="M 83.917969 252.484375 C 112.910156 269.085938 147.121094 288.730469 181.277344 308.480469 C 185.503906 310.925781 189.066406 310.917969 193.230469 308.480469 C 203.519531 302.484375 213.820312 296.5 224.128906 290.527344 C 246.0625 277.796875 268.742188 264.644531 290.890625 251.460938 C 293.082031 250.152344 294.84375 245.984375 295.101562 242.890625 C 295.511719 238.109375 295.4375 233.175781 295.386719 228.402344 C 295.339844 225.027344 295.296875 221.542969 295.386719 218.09375 C 295.492188 214.875 294.496094 213.203125 291.558594 211.480469 C 280.28125 204.960938 269.066406 198.367188 257.910156 191.703125 C 248.972656 186.421875 240.027344 181.152344 231.070312 175.898438 C 218.609375 168.609375 206.085938 161.398438 193.460938 154.136719 L 175.488281 143.792969 L 176.851562 142.476562 C 182.941406 136.601562 188.273438 135.933594 195.25 140.09375 C 225.304688 158.109375 256.085938 175.648438 282.558594 190.636719 C 285.53125 192.316406 290.097656 193.015625 291.636719 192.03125 C 293.96875 190.511719 295.699219 185.996094 295.785156 182.894531 C 296.035156 174.324219 296 165.585938 295.972656 157.117188 C 295.972656 149.238281 295.921875 141.117188 296.117188 133.117188 C 296.257812 127.445312 294.148438 123.976562 288.835938 121.160156 C 282.308594 117.683594 275.800781 113.941406 269.507812 110.316406 L 253.699219 101.25 C 233.136719 89.492188 212.605469 77.703125 192.101562 65.882812 C 188.601562 63.871094 185.867188 63.84375 182.539062 65.765625 C 171.527344 72.1875 160.492188 78.605469 149.445312 85.019531 C 128.078125 97.464844 105.984375 110.28125 84.363281 123.089844 C 83.082031 123.996094 82.023438 125.113281 81.191406 126.445312 C 80.363281 127.777344 79.820312 129.21875 79.574219 130.769531 C 78.980469 139.613281 78.980469 148.457031 79.574219 157.300781 C 79.71875 158.421875 80.074219 159.46875 80.640625 160.445312 C 81.207031 161.421875 81.941406 162.25 82.839844 162.929688 C 94.511719 170.324219 106.617188 177.425781 116.90625 183.371094 C 136.777344 194.898438 156.683594 206.402344 176.628906 217.886719 L 199.425781 231.035156 L 197.976562 232.351562 C 193.050781 236.855469 187.410156 240.253906 179.746094 234.839844 C 174.65625 231.394531 169.398438 228.226562 163.980469 225.328125 C 161.800781 224.117188 159.628906 222.902344 157.472656 221.648438 L 143.328125 213.460938 C 126.699219 203.800781 109.5 193.808594 92.402344 184.296875 C 90.34375 183.234375 88.15625 182.707031 85.839844 182.714844 C 84.660156 182.667969 83.523438 182.878906 82.441406 183.355469 C 80.660156 184.242188 79.175781 188.757812 79.101562 191.984375 C 78.898438 201.765625 78.933594 211.628906 78.976562 221.222656 C 78.976562 228.6875 79.03125 236.15625 78.976562 243.628906 C 78.890625 247.878906 80.339844 250.429688 83.917969 252.484375 Z M 83.917969 252.484375 " fill-opacity="1" fill-rule="nonzero"/></svg>
</div>
<header class="header" data-header>
<div class="container">
<a href="home.html" class="logo">
gonzalezsele.dev
</a>
<nav class="navbar" data-navbar>
<div class="navbar-top">
<a href="home.html" class="logo">
gonzalezsele.dev
</a>
<button class="nav-close-btn" aria-label="close-menu" data-nav-toggler>
<ion-icon name="close-outline" aria-hidden="true"></ion-icon>
</button>
</div>
<ul class="navbar-list">
<li>
<a href="portfolio.html" class="navbar-link">Proyectos</a>
</li>
<li>
<a href="about.html" class="navbar-link active">About</a>
</li>
<li>
<a href="contact.html" class="navbar-link">Contacto</a>
</li>
<li>
<a download="" href="./assets/pdf/resume.pdf" class="navbar-link">Curriculum</a>
</li>
</ul>
<div class="wrapper">
<a href="mailto:[email protected]" class="contact-link">
</a>
</div>
<ul class="social-list">
<li>
<a href="https://www.linkedin.com/in/gonzalezseledev/" class="social-link" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li>
<a href="https://github.com/gonzalezseledev" class="social-link" target="_blank">
<ion-icon name="logo-github"></ion-icon>
</a>
</li>
</ul>
</nav>
<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
</button>
<div class="overlay" data-nav-toggler data-overlay></div>
</div>
</header>
<main class="main">
<!-- HERO SECTION -->
<section class="section hero" aria-label="about">
<div class="hero-container">
<div class="about-content">
<p class="subtitle">👋 ¡Hola, mundo!</p>
<h2 class="title">
Mi nombre es
<br>
<span>SELENE GONZÁLEZ</span>
</h2>
<p class="section-text">
Una <span>Front End Developer</span>, a la que le encanta <span>aprender cosas nuevas, la cultura coreana 🌺, los teclados mecánicos ⌨️, las novelas de ciencia ficción 🪐, y los gifs de gatos 🐱.</span>
<br><br>
<span>Uso mi lado creativo para diseñar y mi lado lógico para codificar</span>, por lo que paso los días (y a menudo muchas noches), convirtiendo líneas infinitas de código, en <span>experiencias de usuario intuitivas y adaptables</span>.
<br><br>
<span>Mi pasión por el código, me ha llevado a aprender diferentes lenguajes de programación</span>, y en un interesante giro de los acontecimientos... <span>Python 🐍 llegó a mi vida</span>, cautivándome por completo.
<br><br>
<span>Soy una persona alegre y curiosa, que busca un equipo valiente con el que potenciar mis conocimientos y habilidades profesionales, creando un impacto duradero y significativo en la vida de las personas, la sociedad y el mundo en el que vivimos</span>.
<br><br>
<span>Si estás buscando una profesional proactiva y dedicada, que viva los lunes como si fueran viernes, ¡cuenta conmigo!</span>
</p>
</div>
<figure class="about-banner">
<a href="./assets/images/about-banner.png" target="_blank">
<img src="./assets/images/about-banner.png" width="1246" height="1326" loading="lazy" alt="about-banner" class="w-100">
</a>
</figure>
</div>
</section>
<!-- SKILLS -->
<section class="section skills">
<div class="skills-bg">
<div class="skills-content container grid">
<!-- <p class="section-subtitle">Hard Skills</p> -->
<h2 class="h2 section-title">
Desarrollo <span>aplicaciones increíbles</span>, para <span>proyectos increíbles</span>, con las siguientes tecnologías
</h2>
<div class="skills-toggle" data-toggle-box>
<div class="toggle-btn active" data-toggle-btn>Skills</div>
<div class="toggle-btn" data-toggle-btn>Tools</div>
</div>
</div>
<div class="skills-box" data-skills-box>
<ul class="skills-list">
<li>
<div class="skill-card">
<div class="tooltip">HTML5</div>
<div class="card-icon">
<img src="assets/images/languages/html.png" alt="HTML5 logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">CSS3</div>
<div class="card-icon">
<img src="assets/images/languages/css.png" alt="CSS3 logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">JavaScript</div>
<div class="card-icon">
<img src="assets/images/languages/js.png" alt="JavaScript logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Angular</div>
<div class="card-icon">
<img src="assets/images/languages/angular.png" alt="Angular logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">TypeScript</div>
<div class="card-icon">
<img src="assets/images/languages/ts.png" alt="TypeScript logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Bootstrap</div>
<div class="card-icon">
<img src="assets/images/languages/bootstrap.png" alt="Bootstrap logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">In progress</div>
<div class="card-icon learn">
<img src="assets/images/languages/sass.png" alt="SASS logo">
</div>
</div>
</li>
<!-- <li>
<div class="skill-card">
<div class="tooltip">In progress</div>
<div class="card-icon learn">
<img src="assets/images/languages/tailwind.png" alt="Tailwind logo">
</div>
</div>
</li> -->
<li>
<div class="skill-card">
<div class="tooltip">In progress</div>
<div class="card-icon learn">
<img src="assets/images/languages/python.png" alt="Python logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Mongo DB</div>
<div class="card-icon">
<img src="assets/images/languages/mongo.png" alt="Mongo logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">MySQL</div>
<div class="card-icon">
<img src="assets/images/languages/mysql.png" alt="MySQL logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">NodeJS</div>
<div class="card-icon">
<img src="assets/images/languages/node.png" alt="Node logo">
</div>
</div>
</li>
</ul>
<ul class="tools-list">
<li>
<div class="skill-card">
<div class="tooltip">Figma</div>
<div class="card-icon">
<img src="assets/images/languages/figma.png" alt="Figma logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Git</div>
<div class="card-icon">
<img src="assets/images/languages/git.png" alt="Git logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">GitHub</div>
<div class="card-icon">
<img src="assets/images/languages/github.png" alt="GitHub logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Npm</div>
<div class="card-icon">
<img src="assets/images/languages/npm.png" alt="Npm logo">
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">VS Code</div>
<div class="card-icon">
<img src="assets/images/languages/vscode.png" alt="VS Code logo">
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- INFO -->
<section class="section info">
<div class="container grid">
<!-- <p class="section-subtitle">
Soft skills
</p> -->
<h2 class="h2 section-title">3 puntos clave</h2>
</div>
<div class="info-container">
<div class="info-box">
<div class="info-content">
<h3>prepocesadores css</h3>
<p class="section-text">
Opino que <span>el código que escribimos no solo tiene que ser fácil de modificar, testear y escalar, sino que debe ser fácil de leer de forma natural</span>.
</p>
</div>
</div>
<div class="info-box">
<div class="info-content">
<h3>open source</h3>
<p class="section-text">
Soy una apasionada de <span>la accesibilidad web</span> y <span>el diseño responsive</span>, por lo que estoy mejorando mis competencias en <span>Sass</span> y <span>Less</span>.
</p>
</div>
</div>
<div class="info-box">
<div class="info-content">
<h3>clean code</h3>
<p class="section-text">
Me encanta la cooperación y el trabajo en equipo. Por lo que me gustaría comenzar a <span>contribuir en proyectos de código abierto</span> para <span>generar y aportar valor para la comunidad web.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-menu">
<a href="#" class="link footer-link">Back To Top</a>
•
<a href="portfolio.html" class="link footer-link">Proyectos</a>
•
<a href="about.html" class="link footer-link">About</a>
•
<a href="contact.html" class="link footer-link">Contacto</a>
</div>
<div class="footer-bottom">
<p class="copyright">
Hecho con ♡ desde Madrid © <a href="https://www.linkedin.com/in/gonzalezseledev/">gonzalezseledev</a>
2023
</p>
</div>
</footer>
<!-- custom js link -->
<script src="./assets/js/script.js"></script>
<!-- ionicon link -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>