This repository has been archived by the owner on Jun 4, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (305 loc) · 26.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>David Ponce Vargas | Web Developer</title>
<link rel="canonical" href="https://www.davidponc.dev/">
<script defer type="module" src="/src/js/script.js"></script>
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="preload" as="font" type="font/ttf" href="fonts/Poppins-Regular.ttf" crossorigin />
<link rel="preload" as="font" type="font/ttf" href="fonts/Poppins-Medium.ttf" crossorigin />
<link rel="preload" as="font" type="font/ttf" href="fonts/Poppins-Bold.ttf" crossorigin />
<link rel="preload" as="image" href="img/avatar-min.png" />
<link rel="stylesheet" href="/src/scss/style.scss" />
<meta name="description" content="My name is David Ponce and this is my personal page, where you can find the projects and technologies i have worked on.">
<meta name="apple-mobile-web-app-title" content="davidponc.dev">
<meta name="application-name" content="davidponc.dev">
<meta name="theme-color" content="#f7f7f7">
<meta name="theme-color" content="#1b1c1e" media="(prefers-color-scheme: dark)">
<meta name=twitter:card content="summary_large_image">
<meta name=twitter:creator content="@davidponc_">
<meta name=twitter:domain content="davidponc.dev">
<meta name=twitter:image content="https://davidponc.dev/img/card-portfolio.png">
<meta name=twitter:site content="@davidponc_">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="Personal page | David Ponce">
<meta property="og:image" content="https://davidponc.dev/img/card-portfolio.png">
<meta property="og:description" content="My name is David Ponce and this is my personal page, where you can find the projects and technologies i have worked on.">
<meta property="og:url" content="https://davidponc.dev/">
<meta property="og:site_name" content="David Ponce personal page">
</head>
<body>
<main class="landing">
<section class="landing__content">
<svg class="landing__image" viewBox="0 0 636 601" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<path d="M135 0h200a300 300 0 0 1 0 600H131.9a97.4 97.4 0 0 1-84.4-140.2l15-30.6A67.3 67.3 0 0 0 36.8 342l-19.7-11.9c-2.3-1.4-4.5-3-6.5-5l-.7-.7A34.8 34.8 0 0 1 0 300.1v-.2a34.8 34.8 0 0 1 9.9-24.3l.7-.7c2-2 4.2-3.6 6.5-5l19.7-12c29.8-18 41-55.8 25.7-87l-15-30.7A97.4 97.4 0 0 1 135 0Zm189.4 529.9c23.3-23 39.8-54.5 48.6-86 7.8-27.5 13.5-56.3 11.7-84.6a20 20 0 0 0-39.9 2.5c1.5 23.9-3.8 48.2-10.3 71.4-7.3 26-20.8 52.1-40.5 70.4a20 20 0 0 0-2.7 26.3l.4.5.3.5.5.5.4.4a20 20 0 0 0 14.6 6.5h.2a20 20 0 0 0 13.4-5.3l.7-.7.5-.5 1-.9.7-.6.4-.4Zm83-113.6c-.2 16.5-2 35.9-12.1 49.4a20 20 0 0 0 32 24c15.1-20.2 19.9-48.5 20-73a20 20 0 0 0-40-.4Zm-133.8-17.5c-2 17.6-6.1 38-18.4 51.4a20 20 0 0 0 29.4 27.1c17.9-19.4 25.9-48.4 28.7-74a20 20 0 0 0-39.7-4.5Zm283.6-39.7A230.2 230.2 0 0 0 335 70H133.2a27.3 27.3 0 0 0-22.8 39.4l15 30.6A137.4 137.4 0 0 1 96.4 300a137.5 137.5 0 0 1 42.8 96.3l4.2-1.3a153.4 153.4 0 0 0 37.1-19.4c36.4-24.8 73-51 115.5-64.4 96-30.5 179.3 3.4 261 47.9ZM446.9 175.7a50 50 0 1 1 0 100 50 50 0 0 1 0-100Z" fill="currentColor"/>
</svg>
<h1 class="landing__title">David Ponce Vargas</h1>
<h2 class="landing__subtitle">Web Developer</h2>
<nav class="landing__nav">
<a class="landing__nav-item" href="#about-me">About me</a>
<a class="landing__nav-item" href="#skills">Skills</a>
<a class="landing__nav-item" href="#projects">Projects</a>
</nav>
<div class="landing__social">
<a
href="https://www.linkedin.com/in/david-ponce-230369128/"
class="landing__social-item"
target="_blank"
rel="noopener noreferrer"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M2.39734 4.46525H2.36918C2.06256 4.48374 1.75542 4.43882 1.46694 4.33329C1.17846 4.22776 0.914829 4.06388 0.69252 3.8519C0.470211 3.63992 0.293993 3.38438 0.174871 3.10124C0.0557492 2.8181 -0.00371909 2.51344 0.000180051 2.20628C0.00407919 1.89913 0.0712618 1.59608 0.197533 1.31606C0.323804 1.03603 0.506452 0.785047 0.73407 0.578775C0.961689 0.372504 1.22939 0.215375 1.52046 0.117201C1.81152 0.0190276 2.11971 -0.018083 2.42576 0.00818709C2.73333 -0.014088 3.04218 0.0275121 3.33289 0.130371C3.62361 0.233231 3.8899 0.395125 4.11502 0.605874C4.34014 0.816623 4.51922 1.07167 4.64101 1.35498C4.76279 1.63828 4.82465 1.94372 4.82268 2.25209C4.82072 2.56046 4.75497 2.86509 4.62958 3.14682C4.50419 3.42855 4.32187 3.68129 4.09408 3.88915C3.86629 4.09701 3.59796 4.2555 3.30596 4.35464C3.01396 4.45378 2.7046 4.49144 2.39734 4.46525Z"
fill="currentColor"
/>
<path
d="M4.41183 7.46525H0.411835V19.4652H4.41183V7.46525Z"
fill="currentColor"
/>
<path
d="M14.9114 7.46525C14.2373 7.46709 13.5724 7.62126 12.9663 7.91623C12.3603 8.21121 11.8287 8.63936 11.4114 9.16868V7.46525H7.41138V19.4652H11.4114V13.9652C11.4114 13.4348 11.6221 12.9261 11.9972 12.551C12.3722 12.176 12.8809 11.9652 13.4114 11.9652C13.9418 11.9652 14.4505 12.176 14.8256 12.551C15.2007 12.9261 15.4114 13.4348 15.4114 13.9652V19.4652H19.4114V11.9652C19.4114 11.3743 19.295 10.7891 19.0688 10.2432C18.8427 9.69721 18.5112 9.20113 18.0934 8.78327C17.6755 8.3654 17.1794 8.03394 16.6335 7.80779C16.0875 7.58164 15.5023 7.46525 14.9114 7.46525Z"
fill="currentColor"
/>
</svg>
</a>
<a
href="https://www.github.com/david-ponc"
class="landing__social-item"
target="_blank"
rel="noopener noreferrer"
>
<svg width="19" height="22" viewBox="0 0 19 22" fill="none">
<path
d="M17.3411 3.90268C17.2599 3.7949 17.1731 3.69142 17.0811 3.59268C17.1737 3.34612 17.244 3.09177 17.2911 2.83268C17.4305 1.88487 17.3095 0.917022 16.9411 0.0326789C16.9411 0.0326789 15.8211 -0.317321 13.2511 1.41268C12.1601 1.11141 11.0331 0.960025 9.90114 0.962679C8.76599 0.960692 7.63577 1.11206 6.54114 1.41268C3.97114 -0.337321 2.85114 0.0326789 2.85114 0.0326789C2.48724 0.907669 2.36632 1.86467 2.50114 2.80268C2.5486 3.07254 2.62228 3.33713 2.72114 3.59268C2.63114 3.69268 2.54114 3.80268 2.46114 3.90268C1.71491 4.83869 1.31879 6.00582 1.34114 7.20268C1.33877 7.48653 1.35212 7.7703 1.38114 8.05268C1.70108 12.4827 4.65114 13.5127 7.46114 13.8327C7.0634 14.2025 6.79372 14.6893 6.69114 15.2227C6.5982 15.5784 6.55446 15.9451 6.56114 16.3127V17.6222C5.44292 17.7216 4.29466 17.5589 3.93895 16.5609C3.55655 15.6059 2.92261 14.7724 2.10448 14.1488C2.04503 14.1163 1.98848 14.0787 1.93548 14.0365C1.86364 13.8475 1.73629 13.6847 1.57018 13.5695C1.40407 13.4543 1.20698 13.3921 1.00482 13.391H1.00001C0.735613 13.3909 0.481942 13.4956 0.294526 13.6821C0.107109 13.8686 0.00121212 14.1217 1.39822e-05 14.3861C-0.00388602 15.1986 0.809104 15.723 1.14259 15.9017C1.53152 16.2936 1.84443 16.7542 2.06544 17.2601C2.4297 18.2836 3.49464 19.8382 6.53126 19.6361C6.53226 19.6713 6.53326 19.7045 6.53371 19.7348L6.5381 20.0023C6.53807 20.1337 6.56391 20.2637 6.61415 20.3851C6.6644 20.5064 6.73806 20.6167 6.83092 20.7095C6.92379 20.8024 7.03404 20.876 7.15538 20.9263C7.27672 20.9765 7.40677 21.0024 7.5381 21.0023L7.54121 21.0017V21.0024H12.2523C12.3837 21.0024 12.5137 20.9766 12.6351 20.9263C12.7564 20.8761 12.8667 20.8024 12.9595 20.7096C13.0524 20.6167 13.126 20.5064 13.1763 20.3851C13.2265 20.2638 13.2524 20.1337 13.2523 20.0024C13.2523 20.0024 13.2597 16.8427 13.2597 16.3127C13.2663 15.9452 13.2226 15.5784 13.1297 15.2227L13.1278 15.2166L13.1312 15.2227C13.1226 15.1877 13.1095 15.1592 13.1001 15.1253C12.9884 14.6299 12.7304 14.1795 12.3596 13.8327L12.3712 13.8535C12.3644 13.8474 12.358 13.8386 12.3511 13.8327C15.1611 13.5127 18.0911 12.4627 18.4111 8.05267C18.4401 7.77029 18.4535 7.48652 18.4511 7.20267C18.4688 6.00819 18.0771 4.84365 17.3411 3.90268Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</section>
<a href="#about-me" class="landing__arrow-icon">
<svg
style="width: 24px"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 17l-4 4m0 0l-4-4m4 4V3"
/>
</svg>
</a>
</main>
<section class="about-me" id="about-me">
<div class="about-me__content">
<h2 class="about-me__title">About me</h2>
<figure class="about-me__avatar">
<img
class="about-me__image"
loading="lazy"
src="img/avatar-min.png"
alt="Avatar"
/>
</figure>
<article class="about-me__info">
<h3>Profile</h3>
<p>
I am enthusiastic about web application development and interface
design. Passionate about self-taught learning and someone
self-critical with me work, constantly seeking to improve. I
consider someone direct and responsible.
</p>
<h3>Education</h3>
<p>
Lic. Ciencias de la Computación Benemérita Universidad Autónoma de
Puebla 2015 - Actual
</p>
<p>
Técnico en Programación Cetis No. 3 Juana Belén Gutiérrez de Mendoza
2012 - 2015
</p>
</article>
</div>
</section>
<section class="skills" id="skills">
<div class="skills__content">
<h2 class="skills__title">Skills</h2>
<ul class="skills__technologies">
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--html">
<path d="M1.5 0h21l-2 21.6L12 24l-8.6-2.4L1.5 0zm7 9.8L8.3 7h10l.3-2.6H5.4l.7 8h9.1l-.3 3.4-2.9.8-3-.8-.1-2H6.2l.4 4.1 5.4 1.5 5.4-1.5.7-8.1H8.5z"/>
</svg>
<span class="skills__name">HTML</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--css">
<path d="M1.5 0h21l-2 21.6L12 24l-8.6-2.4L1.5 0zm17 4.4h-13L5.5 7h10.1l-.2 2.8H8.9l.2 2.5h6.2l-.4 3.5-2.9.8-3-.8-.1-2H6.2l.3 3.8 5.5 1.7 5.4-1.5 1.2-13.4z"/>
</svg>
<span class="skills__name">CSS</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--javascript">
<path d="M0 0h24v24H0V0zm22 18.3c-.1-1.1-.9-2-3-2.9-.7-.3-1.5-.6-1.8-1.1v-.7c.1-.7.9-.9 1.5-.7.4.1.8.4 1 .9l1.7-1.1-.6-.8c-.6-.7-1.4-1-2.8-1h-.7c-.7.2-1.3.6-1.7 1a3.1 3.1 0 0 0 .6 4.5c1.3 1 3.3 1.3 3.6 2.2.2 1.2-.9 1.6-2 1.4-.8-.1-1.2-.5-1.7-1.3l-1.9 1c.2.5.5.7.8 1.2 1.8 1.7 6.1 1.6 7-1 0-.1.2-.7 0-1.7zM13 11h-2.2v5.8l-.1 2.7c-.4.7-1.2.6-1.6.5a2 2 0 0 1-.8-.8L8 19 6.3 20c.3.6.8 1.2 1.3 1.5.9.5 2 .7 3.2.4.8-.2 1.5-.7 1.8-1.4.6-1 .5-2 .4-3.3V11z"/>
</svg>
<span class="skills__name">JavaScript</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--typescript">
<path d="M1.1 0C.5 0 0 .5 0 1.1V23c0 .6.5 1.1 1.1 1.1H23c.6 0 1.1-.5 1.1-1.1V1c0-.6-.5-1.1-1.1-1.1zm17.4 9.8H20a6.4 6.4 0 0 1 1.3.4v2.5a4 4 0 0 0-.6-.4 5 5 0 0 0-.7-.3 5.5 5.5 0 0 0-1.5-.2l-.8.1a2.1 2.1 0 0 0-.6.3c-.2 0-.3.2-.4.3a.9.9 0 0 0-.1.5l.1.6.5.4.7.4.9.4c.5.2.9.4 1.2.7l1 .7c.3.3.5.6.6 1 .2.3.2.7.2 1.2 0 .7 0 1.2-.3 1.7a3 3 0 0 1-1 1 4.4 4.4 0 0 1-1.5.7l-1.8.1a10 10 0 0 1-1.9-.1 5.5 5.5 0 0 1-1.5-.5v-2.6a5 5 0 0 0 3.3 1.2l.8-.1.7-.3.3-.4a1 1 0 0 0 0-1 2.1 2.1 0 0 0-.6-.6 5.6 5.6 0 0 0-.8-.4 27.7 27.7 0 0 0-1-.4c-1-.4-1.6-.9-2-1.4a3 3 0 0 1-.7-2c0-.7.1-1.2.3-1.6.3-.5.6-.8 1-1.1a4.5 4.5 0 0 1 1.5-.6 7.5 7.5 0 0 1 1.8-.2zm-15.1.1h9.5v2.2H9.5v9.7H6.8V12H3.4z"/>
</svg>
<span class="skills__name">TypeScript</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--node">
<path d="M12 24c-.32 0-.64-.08-.92-.25l-2.94-1.73c-.44-.25-.22-.34-.08-.39.58-.2.7-.25 1.33-.6.06-.04.15-.02.22.02l2.25 1.33c.08.05.2.05.27 0l8.8-5.07a.28.28 0 0 0 .13-.24V6.92c0-.1-.05-.2-.13-.24l-8.8-5.07a.28.28 0 0 0-.27 0L3.07 6.68a.28.28 0 0 0-.13.24v10.15c0 .1.05.19.14.24l2.4 1.39c1.31.65 2.11-.12 2.11-.9V7.8c0-.15.12-.26.26-.26h1.11c.14 0 .26.12.26.26V17.8c0 1.74-.95 2.74-2.6 2.74-.51 0-.91 0-2.03-.55l-2.31-1.32a1.86 1.86 0 0 1-.92-1.6V6.91c0-.66.35-1.27.92-1.6l8.8-5.08c.55-.32 1.3-.32 1.84 0l8.8 5.08c.57.33.92.94.92 1.6v10.15c0 .66-.35 1.27-.92 1.6l-8.8 5.08c-.28.17-.6.25-.92.25zm7.1-10c0-1.9-1.29-2.41-3.99-2.77-2.73-.36-3-.55-3-1.19 0-.52.23-1.23 2.25-1.23 1.8 0 2.47.39 2.75 1.6.02.12.13.2.25.2h1.14c.07 0 .13-.02.18-.07a.26.26 0 0 0 .07-.2c-.18-2.1-1.57-3.08-4.39-3.08-2.5 0-4 1.06-4 2.84 0 1.92 1.49 2.45 3.9 2.7 2.87.27 3.1.7 3.1 1.26 0 .98-.8 1.4-2.65 1.4-2.32 0-2.84-.58-3-1.74a.26.26 0 0 0-.26-.22H10.3a.25.25 0 0 0-.25.26c0 1.48.8 3.25 4.65 3.25 2.8 0 4.39-1.1 4.39-3.02z"/>
</svg>
<span class="skills__name">Node</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--react">
<path d="M14.2 12a2.2 2.2 0 0 1-2.2 2.2A2.2 2.2 0 0 1 9.8 12 2.2 2.2 0 0 1 12 9.8a2.2 2.2 0 0 1 2.2 2.2zM17 1.3c-1.4 0-3.1 1-5 2.6-1.7-1.6-3.5-2.6-4.8-2.6-.4 0-.8.1-1.1.3C4.6 2.4 4.3 5 5 8c-3 1-5 2.4-5 4s2 3.1 5 4c-.7 3.1-.3 5.6 1 6.4.4.2.7.3 1.1.3 1.4 0 3.1-1 5-2.6 1.7 1.6 3.5 2.6 4.8 2.6.4 0 .8-.1 1.1-.3 1.4-.8 1.7-3.3 1-6.4 3-.9 5-2.4 5-4s-2-3-5-4c.7-3.1.3-5.6-1-6.4-.3-.2-.7-.3-1.1-.3zm0 1.1.5.1c.7.4 1 1.9.8 3.7l-.3 1.5c-1-.3-2-.4-3.1-.6l-2-2.4c1.6-1.5 3-2.3 4-2.3zM7 2.4c1 0 2.5.8 4.1 2.3a23 23 0 0 0-2 2.4C8 7.3 7 7.4 6 7.7l-.3-1.4c-.2-1.9 0-3.4.7-3.7l.6-.2zm4.9 3L13.3 7a29.6 29.6 0 0 0-2.7 0L12 5.5zm0 2.7h2.2a26.4 26.4 0 0 1 2.2 3.9 27.2 27.2 0 0 1-2.2 3.8 25.6 25.6 0 0 1-4.4 0A26.6 26.6 0 0 1 7.6 12a25.2 25.2 0 0 1 2.2-3.8l2.2-.1zm-3.6.3A25.5 25.5 0 0 0 7 10.7c-.2-.7-.5-1.3-.6-2l2-.3zm7.2 0c.7 0 1.4.2 2 .3-.1.7-.4 1.3-.6 2a23 23 0 0 0-1.4-2.3zm3 .6 1.5.5c1.7.8 2.8 1.7 2.8 2.5s-1.1 1.7-2.8 2.5l-1.4.5c-.3-1-.6-2-1.1-3 .5-1 .8-2 1-3zM5.4 9l1 3-1 3-1.4-.5c-1.7-.8-2.8-1.7-2.8-2.5s1.1-1.7 2.8-2.5L5.3 9zM17 13.3c.2.7.5 1.3.6 2l-2 .4a25.8 25.8 0 0 0 1.4-2.4zm-10 0a22.7 22.7 0 0 0 1.4 2.4 22 22 0 0 1-2-.4c.1-.7.4-1.3.6-2zm11 3 .2 1.4c.2 2 0 3.4-.7 3.8a1 1 0 0 1-.6 0c-1 0-2.5-.7-4.1-2.2a23 23 0 0 0 2-2.4c1.1-.2 2.2-.3 3.1-.6zm-12 0c1 .3 2.1.4 3.2.6l2 2.4c-1.6 1.5-3 2.3-4 2.3l-.6-.1c-.7-.4-1-1.9-.8-3.7l.3-1.5zm4.7.7a29.6 29.6 0 0 0 2.7 0L12 18.5 10.7 17z"/>
</svg>
<span class="skills__name">React</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--next">
<path d="M11.57 0a5.11 5.11 0 0 0-.72.04 12.03 12.03 0 0 0 0 23.93c.36.04 1.94.04 2.3 0 1.61-.18 2.98-.58 4.32-1.26.21-.11.25-.14.22-.16l-1.95-2.62-1.92-2.6-2.4-3.55a338.74 338.74 0 0 0-2.43-3.56s-.02 1.58-.02 3.51c0 3.38-.01 3.52-.05 3.6a.43.43 0 0 1-.2.21c-.08.04-.15.05-.5.05H7.8l-.1-.07a.44.44 0 0 1-.17-.17l-.04-.11v-9.4l.08-.1a.65.65 0 0 1 .17-.14c.1-.05.14-.05.54-.05.48 0 .56.01.69.15l2.9 4.36a10760.43 10760.43 0 0 0 4.73 7.17l1.9 2.88.1-.06c.84-.56 1.74-1.35 2.46-2.17a11.94 11.94 0 0 0 2.82-9.63A12.05 12.05 0 0 0 13.2.04C13.02.02 12.1 0 11.57 0zm4.07 7.22c.35 0 .4 0 .49.04.1.06.2.17.23.28.02.06.03 1.37.02 4.3v4.22l-.75-1.14-.74-1.14v-3.06c0-1.99 0-3.1.02-3.15a.48.48 0 0 1 .23-.3c.1-.05.13-.05.5-.05z"/>
</svg>
<span class="skills__name">Next</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--scss">
<path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zM9.62 16c.17.64.15 1.25-.03 1.79l-.06.18-.08.18c-.14.29-.33.56-.56.8-.7.76-1.67 1.05-2.09.81-.45-.26-.22-1.33.59-2.19.87-.92 2.12-1.5 2.12-1.5v-.01l.1-.06zm9.9-10.86C18.99 3 15.46 2.3 12.1 3.49c-1.99.7-4.14 1.82-5.69 3.27C4.57 8.48 4.28 9.98 4.4 10.6c.42 2.2 3.45 3.65 4.7 4.73-.37.18-3.06 1.53-3.69 2.93-.67 1.47.1 2.52.62 2.65a3.8 3.8 0 0 0 4.06-1.65c.84-1.26.77-2.88.4-3.67.5-.14 1.09-.2 1.84-.1 2.1.23 2.52 1.55 2.43 2.1-.1.53-.53.85-.68.94-.15.09-.2.12-.18.18.02.09.1.09.21.07.17-.03 1.1-.45 1.14-1.47.05-1.29-1.18-2.73-3.37-2.7-.9.02-1.47.1-1.88.26a.36.36 0 0 0-.1-.1c-1.35-1.46-3.86-2.48-3.75-4.42.03-.7.28-2.56 4.8-4.81 3.7-1.85 6.66-1.33 7.17-.21.73 1.6-1.58 4.59-5.43 5.02-1.47.17-2.24-.4-2.43-.61-.21-.23-.24-.24-.32-.2-.12.06-.04.26 0 .38.12.3.59.82 1.4 1.1.7.22 2.43.35 4.5-.45 2.32-.9 4.14-3.41 3.61-5.51l.08.07z"/>
</svg>
<span class="skills__name">SCSS</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--bash">
<path d="M21.04 4.9 13.46.4a2.86 2.86 0 0 0-2.92 0L2.96 4.9A3.02 3.02 0 0 0 1.5 7.5v9c0 1.07.56 2.06 1.46 2.6l7.58 4.5a2.86 2.86 0 0 0 2.92 0l7.58-4.5a3.02 3.02 0 0 0 1.46-2.6v-9c0-1.07-.56-2.06-1.46-2.6zm-5.87 14.05.01.64c0 .08-.05.17-.1.2l-.4.22c-.05.03-.1 0-.1-.09l-.01-.63c-.33.14-.66.17-.87.08-.04-.01-.06-.07-.04-.14l.14-.58c0-.05.03-.1.06-.12a.16.16 0 0 1 .04-.03h.06c.23.07.52.04.8-.1.36-.19.6-.55.6-.91 0-.33-.18-.47-.62-.47-.55 0-1.06-.1-1.07-.92 0-.67.34-1.36.9-1.8l-.02-.65c0-.08.05-.17.11-.2l.38-.24c.06-.03.1.01.1.1l.01.64c.28-.1.51-.13.73-.08.05 0 .07.07.05.15l-.15.58a.25.25 0 0 1-.06.11.16.16 0 0 1-.04.03.08.08 0 0 1-.06 0c-.1-.01-.33-.06-.7.12a.88.88 0 0 0-.51.78c0 .3.15.39.68.4.7 0 1 .31 1 1.02a2.5 2.5 0 0 1-.92 1.89zm3.97-1.1c0 .07 0 .13-.05.15l-1.92 1.17c-.05.03-.1 0-.1-.06v-.5c0-.05.05-.08.1-.11l1.88-1.13c.05-.03.1 0 .1.05v.44zM20.46 6.8l-7.17 4.42c-.9.53-1.55 1.11-1.55 2.2v8.82c0 .65.26 1.07.66 1.19a2.3 2.3 0 0 1-1.6-.3l-7.57-4.49a2.5 2.5 0 0 1-1.2-2.14v-9c0-.88.46-1.7 1.2-2.14L10.8.86a2.34 2.34 0 0 1 2.4 0l7.57 4.5a2.48 2.48 0 0 1 1.17 1.73c-.25-.53-.82-.68-1.48-.3z"/>
</svg>
<span class="skills__name">Bash</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--php">
<path d="M7.01 10.2h-.94l-.52 2.66h.84c.56 0 .97-.11 1.24-.32.27-.2.46-.56.55-1.05.1-.47.05-.8-.12-1-.18-.19-.53-.28-1.05-.28zM12 5.7C5.37 5.69 0 8.5 0 12s5.37 6.31 12 6.31S24 15.5 24 12c0-3.49-5.37-6.31-12-6.31zm-3.26 7.45c-.26.25-.57.44-.92.55-.33.1-.76.16-1.28.16H5.36l-.33 1.68H3.65l1.23-6.32h2.65c.8 0 1.38.2 1.75.63.36.41.47 1 .33 1.75a2.84 2.84 0 0 1-.3.85c-.15.25-.34.49-.57.7zm4.02.71.55-2.8c.06-.31.04-.53-.07-.65-.1-.11-.34-.17-.69-.17h-1.09l-.7 3.63H9.39l1.23-6.33h1.37l-.33 1.68h1.22c.76 0 1.3.13 1.58.4s.38.7.26 1.3l-.57 2.94h-1.39zm7.6-2.26a2.78 2.78 0 0 1-.3.85c-.15.25-.33.49-.56.7a2.44 2.44 0 0 1-.92.55c-.34.1-.77.16-1.29.16h-1.18l-.33 1.69h-1.37l1.23-6.33h2.65c.8 0 1.37.2 1.74.63.37.41.48 1 .33 1.75zm-2.6-1.38h-.94l-.51 2.65h.83c.56 0 .98-.11 1.25-.32.27-.2.45-.56.55-1.05.09-.47.05-.8-.13-1s-.52-.28-1.04-.28z"/>
</svg>
<span class="skills__name">PHP</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--mongo">
<path d="M17.2 9.55c-1.27-5.58-4.26-7.4-4.58-8.11-.28-.4-.53-.95-.73-1.44-.04.5-.06.68-.53 1.18-.72.57-4.44 3.69-4.74 10.02-.28 5.92 4.27 9.44 4.89 9.89l.07.05a73.49 73.49 0 0 1 .33 2.86h.48c.11-1.03.28-2.06.51-3.07.42-.3.6-.46.85-.7a11.34 11.34 0 0 0 3.64-8.46 13 13 0 0 0-.2-2.22zm-5.34 8.2s0-8.3.27-8.29c.22 0 .5 10.7.5 10.7-.39-.05-.77-1.76-.77-2.41z"/>
</svg>
<span class="skills__name">MongoDB</span>
</li>
<li class="skills__item">
<svg viewBox="0 0 24 24" fill="currentColor" class="skills__image skills__item--mysql">
<path d="M16.4 5.5c-.11 0-.19.02-.27.03v.02h.02c.05.1.14.18.2.27l.16.32.02-.01c.1-.07.14-.18.14-.34-.04-.04-.05-.1-.08-.14-.04-.06-.13-.1-.18-.15zM5.78 18.7h-.93a50.85 50.85 0 0 0-.27-4.41l-1.41 4.4h-.71l-1.4-4.4h-.01a72.9 72.9 0 0 0-.2 4.4H0c.06-1.96.2-3.8.41-5.53h1.15l1.33 4.07h.01l1.35-4.07h1.1c.24 2.02.38 3.86.42 5.53zm4.02-4.08c-.38 2.04-.88 3.53-1.5 4.46-.48.71-1 1.07-1.58 1.07-.15 0-.34-.05-.56-.14v-.5c.1.02.24.03.38.03.27 0 .48-.07.65-.22a.8.8 0 0 0 .3-.6c0-.16-.08-.48-.24-.95l-1.01-3.15h.91l.73 2.36c.16.53.23.9.2 1.12.4-1.07.68-2.23.84-3.48zM22.1 18.7h-2.63v-5.53h.89V18h1.74zm-3.32.13-1.01-.5.25-.25c.43-.5.65-1.26.65-2.25 0-1.83-.72-2.75-2.16-2.75-.7 0-1.25.23-1.65.7-.43.5-.64 1.25-.64 2.24 0 .98.19 1.69.57 2.14.35.41.88.62 1.58.62.27 0 .51-.04.73-.1l1.32.77.36-.62zm-3.29-1.24a3.4 3.4 0 0 1-.34-1.74c0-1.4.43-2.09 1.27-2.09.45 0 .77.17.98.5.22.36.34.94.34 1.73 0 1.4-.43 2.1-1.27 2.1-.45 0-.77-.16-.98-.5zm-1.66-.43c0 .47-.17.86-.51 1.16-.35.3-.8.45-1.39.45-.54 0-1.06-.17-1.57-.52l.24-.47c.43.22.83.33 1.19.33.33 0 .59-.08.78-.22a.75.75 0 0 0 .3-.62c0-.33-.23-.6-.65-.84l-1.16-.66c-.42-.3-.63-.64-.63-1.18 0-.45.15-.8.47-1.08.31-.28.72-.42 1.22-.42s.98.14 1.4.41l-.22.48a2.73 2.73 0 0 0-1.06-.23c-.28 0-.5.07-.65.2a.69.69 0 0 0-.25.53c0 .33.23.6.66.85.4.21 1.19.67 1.19.67.43.3.65.63.65 1.17zm9.38-5.85c-.53-.01-.95.04-1.3.19-.1.04-.25.04-.27.17.06.05.07.14.11.21.08.13.22.31.35.4.14.12.28.22.43.32.26.16.55.25.8.41l.45.32c.07.05.12.14.21.17v-.02c-.05-.06-.06-.15-.1-.22l-.2-.19a3.22 3.22 0 0 0-.7-.67c-.21-.15-.68-.35-.77-.6l-.01-.01c.14-.02.32-.07.46-.1.22-.07.43-.06.67-.11l.32-.1v-.06c-.12-.12-.21-.28-.34-.4a8.87 8.87 0 0 0-1.1-.82c-.21-.13-.48-.22-.7-.33-.08-.04-.21-.06-.26-.13-.12-.14-.19-.34-.27-.51a17.69 17.69 0 0 1-.55-1.16c-.12-.27-.2-.53-.34-.77a6.74 6.74 0 0 0-2.59-2.5c-.24-.14-.54-.2-.85-.27l-.5-.03c-.11-.05-.22-.17-.31-.23-.38-.24-1.37-.76-1.65-.08-.18.44.27.87.43 1.09.11.15.26.32.34.5l.1.35c.1.3.21.62.35.9.07.14.15.29.25.41.05.08.14.1.16.23-.09.14-.1.33-.15.5-.24.76-.15 1.7.2 2.25.1.17.36.53.7.4.3-.13.23-.5.32-.84.02-.08 0-.14.04-.19v.02c.1.18.2.36.28.55.2.33.56.67.87.9.16.12.28.32.48.4v-.02h-.01c-.05-.06-.1-.09-.16-.14a3.44 3.44 0 0 1-.35-.4 8.76 8.76 0 0 1-.74-1.21c-.11-.21-.2-.44-.3-.65-.03-.08-.03-.2-.1-.24-.1.15-.25.28-.32.46-.13.28-.14.64-.19 1l-.03.02c-.2-.05-.28-.27-.36-.46a2.9 2.9 0 0 1-.06-1.78c.04-.14.24-.59.16-.72-.04-.13-.17-.2-.24-.3a2.48 2.48 0 0 1-.24-.43c-.16-.37-.24-.79-.42-1.16-.08-.18-.22-.36-.33-.52-.13-.18-.27-.3-.37-.52-.03-.07-.08-.19-.03-.27.02-.05.05-.07.1-.09.09-.07.33.02.42.06.25.1.46.2.66.34.1.06.2.19.32.22h.14c.21.05.45.02.65.08.36.1.68.28.96.46a5.95 5.95 0 0 1 2.09 2.28c.08.16.12.3.19.46.14.33.31.66.45.98.14.31.28.63.48.9.1.14.5.2.68.28.13.06.34.12.46.19.23.14.45.3.67.45.11.08.44.25.46.38z"/>
</svg>
<span class="skills__name">MySQL</span>
</li>
</ul>
</div>
</section>
<section class="projects" id="projects">
<div class="projects__content">
<h2 class="projects__title">Projects</h2>
<ul class="projects__collection">
<li class="project">
<figure class="project__image">
<img
loading="lazy"
src="img/projects/todolist-project.png"
alt="Lista de pendientes"
/>
</figure>
<article class="project__info">
<h3>To-do list app</h3>
<p>
This application was inspired by the
<a
rel="noreferrer noopener"
href="https://www.dona.ai/"
target="_blank"
>Dona</a
>
group, which is in the development phase of its to-do list
application. The application has an authentication system, to
keep each to-do list per account secure and private.
</p>
<div class="project__actions">
<a
rel="noreferrer noopener"
href="https://github.com/david-ponc/todo-app-client"
target="_blank"
class="button button__flat"
>View source</a
>
<a
rel="noreferrer noopener"
href="https://todo.davidponc.dev"
target="_blank"
class="button button__primary"
>Visit site</a
>
</div>
</article>
</li>
<li class="project">
<figure class="project__image">
<img
loading="lazy"
src="img/projects/covid-project-dark.png"
alt="Lista de pendientes"
/>
</figure>
<article class="project__info">
<h3>COVID-19 countries list</h3>
<p>
This application was built with the help of an
<a
rel="noreferrer noopener"
target="_blank"
href="https://covid19api.com/"
>API</a
>, which offers global data by country, on Coronavirus cases.
The application has a dark mode and a search engine where you
can search for countries by name. Where you can search the
countries by name.
</p>
<div class="project__actions">
<a
rel="noreferrer noopener"
href="https://github.com/david-ponc/covid-19-countries-list"
target="_blank"
class="button button__flat"
>View source</a
>
<a
rel="noreferrer noopener"
href="https://david-ponc.github.io/covid-19-countries-list/"
target="_blank"
class="button button__primary"
>Visit site</a
>
</div>
</article>
</li>
</ul>
</div>
</section>
<header class="navbar navbar--hidden" id="navbar">
<nav class="navbar__links">
<a class="navbar-item" href="#about-me">About me</a>
<a class="navbar-item" href="#skills">Skills</a>
<a class="navbar-item" href="#projects">Projects</a>
</nav>
</header>
</body>
</html>