-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (328 loc) · 20.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
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luciano Treachi | Curriculum Vitae Web</title>
<meta name="description"
content="Bienvenido a mi Curriculum Vitae Web. Descubre mi experiencia laboral, habilidades, educación y proyectos destacados.">
<link rel="canonical" href="https://curriculumvitaeweb.netlify.app/">
<!-- Schema person -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Luciano Treachi",
"jobTitle": "Desarrollador Frontend",
"description": "Soy Luciano Treachi, desarrollador frontend especializado en accesibilidad y optimización web. Me dedico a crear soluciones web eficientes y accesibles.",
"url": "https://lucianotreachi.website/",
"sameAs": [
"https://github.com/LucianoTreachi",
"https://www.linkedin.com/in/luciano-treachi/"
],
"knowsAbout": [
"HTML", "CSS", "JavaScript", "React", "Next.js", "Optimización web", "Accesibilidad web"
]
}
</script>
<!-- LCP -->
<link rel="preload" fetchpriority="high" as="image"
href="https://res.cloudinary.com/dwqk2mkgh/image/upload/f_auto,q_auto/w_500/v1735040041/curriculum-vitae-web/profile-pic_ngjwg0.jpg">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="preload" as="style" href="/css/styles.css">
<link rel="stylesheet" href="/css/styles.css">
<!-- Scripts -->
<script src="/js/main.js" defer></script>
<!-- Favicon -->
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
<!-- Open Graph -->
<meta property="og:url" content="https://curriculumvitaeweb.netlify.app/">
<meta property="og:type" content="website">
<meta property="og:title" content="Luciano Treachi | Curriculum Vitae Web">
<meta property="og:description"
content="Bienvenido a mi Curriculum Vitae Web. Descubre mi experiencia laboral, habilidades, educación y proyectos destacados.">
<meta property="og:image"
content="https://raw.githubusercontent.com/LucianoTreachi/curriculum-vitae-web/main/assets/og/banner.jpg">
<meta property="og:image:alt" content="Imagen de portada">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://curriculumvitaeweb.netlify.app/">
<meta name="twitter:title" content="Luciano Treachi | Curriculum Vitae Web">
<meta name="twitter:description"
content="Bienvenido a mi Curriculum Vitae Web. Descubre mi experiencia laboral, habilidades, educación y proyectos destacados.">
<meta name="twitter:image"
content="https://raw.githubusercontent.com/LucianoTreachi/curriculum-vitae-web/main/assets/og/banner.jpg">
</head>
<body>
<div class="wrapper">
<header id="header">
<!-- Profile Pic -->
<div class="image" aria-hidden="false">
<picture>
<source media="(max-width: 576px)"
srcset="https://res.cloudinary.com/dwqk2mkgh/image/upload/f_auto,q_auto/w_500/v1735040041/curriculum-vitae-web/profile-pic_ngjwg0.jpg">
<img
src="https://res.cloudinary.com/dwqk2mkgh/image/upload/f_auto,q_auto/v1735040041/curriculum-vitae-web/profile-pic_ngjwg0.jpg"
alt="Avatar de Luciano Treachi">
</picture>
</div>
<!-- Open Menu Button -->
<button class="open-menu-button" aria-label="Menú de navegación" aria-expanded="false" aria-hidden="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path>
</svg>
</button>
<!-- Nav -->
<nav>
<div class="navbar" aria-hidden="true">
<!-- Close Menu Button -->
<button class="close-menu-button" aria-label="Cerrar menú de navegación">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z">
</path>
</svg>
</button>
<!-- Navigation Links -->
<a href="#header" class="nav-link">Inicio</a>
<a href="#contact" class="nav-link">Contacto</a>
<a href="#about" class="nav-link">Sobre Mí</a>
<a href="#skills" class="nav-link">Habilidades</a>
<a href="#experience" class="nav-link">Experiencia</a>
<a href="#education" class="nav-link">Educación</a>
<!-- Theme Button -->
<button class="theme-button" aria-label="Modo de visualización: Claro/Oscuro">
<!-- moon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="moon-icon" aria-hidden="true">
<path
d="M11.3807 2.01886C9.91573 3.38768 9 5.3369 9 7.49999C9 11.6421 12.3579 15 16.5 15C18.6631 15 20.6123 14.0843 21.9811 12.6193C21.6613 17.8537 17.3149 22 12 22C6.47715 22 2 17.5228 2 12C2 6.68514 6.14629 2.33869 11.3807 2.01886Z">
</path>
</svg>
<!-- sun -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sun-icon" aria-hidden="true">
<path
d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z">
</path>
</svg>
</button>
</div>
</nav>
<!-- Overlay -->
<div class="overlay"></div>
</header>
<main aria-hidden="false">
<!--===== HOME =====-->
<section class="section1" id="home" aria-label="Inicio">
<div class="container">
<h1>Luciano Treachi</h1>
<p>Desarrollador Frontend enfocado en optimización y accesibilidad web.</p>
</div>
</section>
<!--===== CONTACTO =====-->
<section class="section2" id="contact" aria-label="Contacto">
<div class="container">
<h2 class="title-section">Contacto</h2>
<a href="https://api.whatsapp.com/send?phone=3516819562" target="_blank"
aria-label="WhatsApp de Luciano Treachi" title="Se abre en una nueva pestaña" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22C10.1671 22 8.44851 21.5064 6.97086 20.6447L2.00516 22L3.35712 17.0315C2.49494 15.5536 2.00098 13.8345 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2ZM8.59339 7.30019L8.39232 7.30833C8.26293 7.31742 8.13607 7.34902 8.02057 7.40811C7.93392 7.45244 7.85348 7.51651 7.72709 7.63586C7.60774 7.74855 7.53857 7.84697 7.46569 7.94186C7.09599 8.4232 6.89729 9.01405 6.90098 9.62098C6.90299 10.1116 7.03043 10.5884 7.23169 11.0336C7.63982 11.9364 8.31288 12.8908 9.20194 13.7759C9.4155 13.9885 9.62473 14.2034 9.85034 14.402C10.9538 15.3736 12.2688 16.0742 13.6907 16.4482C13.6907 16.4482 14.2507 16.5342 14.2589 16.5347C14.4444 16.5447 14.6296 16.5313 14.8153 16.5218C15.1066 16.5068 15.391 16.428 15.6484 16.2909C15.8139 16.2028 15.8922 16.159 16.0311 16.0714C16.0311 16.0714 16.0737 16.0426 16.1559 15.9814C16.2909 15.8808 16.3743 15.81 16.4866 15.6934C16.5694 15.6074 16.6406 15.5058 16.6956 15.3913C16.7738 15.2281 16.8525 14.9166 16.8838 14.6579C16.9077 14.4603 16.9005 14.3523 16.8979 14.2854C16.8936 14.1778 16.8047 14.0671 16.7073 14.0201L16.1258 13.7587C16.1258 13.7587 15.2563 13.3803 14.7245 13.1377C14.6691 13.1124 14.6085 13.1007 14.5476 13.097C14.4142 13.0888 14.2647 13.1236 14.1696 13.2238C14.1646 13.2218 14.0984 13.279 13.3749 14.1555C13.335 14.2032 13.2415 14.3069 13.0798 14.2972C13.0554 14.2955 13.0311 14.292 13.0074 14.2858C12.9419 14.2685 12.8781 14.2457 12.8157 14.2193C12.692 14.1668 12.6486 14.1469 12.5641 14.1105C11.9868 13.8583 11.457 13.5209 10.9887 13.108C10.8631 12.9974 10.7463 12.8783 10.6259 12.7616C10.2057 12.3543 9.86169 11.9211 9.60577 11.4938C9.5918 11.4705 9.57027 11.4368 9.54708 11.3991C9.50521 11.331 9.45903 11.25 9.44455 11.1944C9.40738 11.0473 9.50599 10.9291 9.50599 10.9291C9.50599 10.9291 9.74939 10.663 9.86248 10.5183C9.97128 10.379 10.0652 10.2428 10.125 10.1457C10.2428 9.95633 10.2801 9.76062 10.2182 9.60963C9.93764 8.92565 9.64818 8.24536 9.34986 7.56894C9.29098 7.43545 9.11585 7.33846 8.95659 7.32007C8.90265 7.31384 8.84875 7.30758 8.79459 7.30402C8.66053 7.29748 8.5262 7.29892 8.39232 7.30833L8.59339 7.30019Z">
</path>
</svg> WhatsApp
</a>
<br>
<a href="mailto:lucianotreachi@outlook.com" aria-label="Email de Luciano Treachi"
title="Se abre en una nueva pestaña">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z">
</path>
</svg> Email
</a>
<br>
<a href="https://www.linkedin.com/in/luciano-treachi/" target="_blank"
aria-label="LinkedIn de Luciano Treachi" title="Se abre en una nueva pestaña" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z">
</path>
</svg> LinkedIn
</a>
<br>
<a href="https://github.com/LucianoTreachi" target="_blank" aria-label="GitHub de Luciano Treachi"
title="Se abre en una nueva pestaña" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z">
</path>
</svg> GitHub
</a>
<br>
<a href="https://lucianotreachi.website/" target="_blank" aria-label="sitio web de Luciano Treachi"
title="Se abre en una nueva pestaña" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M2.04932 12.9999H7.52725C7.70624 16.2688 8.7574 19.3053 10.452 21.8809C5.98761 21.1871 2.5001 17.5402 2.04932 12.9999ZM2.04932 10.9999C2.5001 6.45968 5.98761 2.81276 10.452 2.11902C8.7574 4.69456 7.70624 7.73111 7.52725 10.9999H2.04932ZM21.9506 10.9999H16.4726C16.2936 7.73111 15.2425 4.69456 13.5479 2.11902C18.0123 2.81276 21.4998 6.45968 21.9506 10.9999ZM21.9506 12.9999C21.4998 17.5402 18.0123 21.1871 13.5479 21.8809C15.2425 19.3053 16.2936 16.2688 16.4726 12.9999H21.9506ZM9.53068 12.9999H14.4692C14.2976 15.7828 13.4146 18.3732 11.9999 20.5915C10.5852 18.3732 9.70229 15.7828 9.53068 12.9999ZM9.53068 10.9999C9.70229 8.21709 10.5852 5.62672 11.9999 3.40841C13.4146 5.62672 14.2976 8.21709 14.4692 10.9999H9.53068Z">
</path>
</svg> Sitio web
</a>
</div>
</section>
<!--===== SOBRE MI =====-->
<section class="section2" id="about" aria-label="Sobre mí">
<div class="container">
<h2 class="title-section">Sobre Mí</h2>
<p>
Desarrollo sitios y aplicaciones web. Busco crear soluciones web eficientes, intuitivas y fáciles de usar.
Estoy en constante formación, aprendiendo y adaptándome a las nuevas tecnologías y tendencias del
mercado.
</p>
</div>
</section>
<!--===== HABILIDADES =====-->
<section class="section3" id="skills" aria-label="Habilidades">
<div class="container">
<h2 class="title-section">Habilidades</h2>
<p>HTML | CSS | JavaScript | React | Next.js | W3C | WCAG | Adobe Photoshop | Adobe Premier Pro</p>
<div class="logos">
<img src="/assets/icons/html.svg" alt="Logo de HTML" width="35" height="35" loading="lazy">
<img src="/assets/icons/css.svg" alt="Logo de CSS" width="35" height="35" loading="lazy">
<img src="/assets/icons/js.svg" alt="Logo de JavaScript" width="35" height="35" loading="lazy">
<img src="/assets/icons/react.svg" alt="Logo de React" width="35" height="35" loading="lazy">
<img src="/assets/icons/next.svg" alt="Logo de Next.js" width="35" height="35" loading="lazy">
</div>
</div>
</section>
<!--===== EXPERIENCIA =====-->
<section class="section4" id="experience" aria-label="Experiencia">
<div class="container">
<h2 class="title-section">Experiencia Laboral</h2>
<div class="box border1">
<div class="info">
<h3>Desarrollador Frontend</h3>
<h4>Autónomo</h4>
<p>Junio de 2022 hasta la actualidad <br> Córdoba, Argentina · En remoto</p>
<br>
<h4>Descripción</h4>
<p>Actualmente diseño y desarrollo sitios webs dinámicos y responsivos, intentando siempre ofrecer las
mejores experiencias para el usuario.
</p>
<br>
<h4>Aptitudes</h4>
<p>HTML5 | CSS3 | Sass | Bootstrap | JavaScript | NPM | Git y GitHub | Diseño UI | Responsive Design |
Semántica Web | Buenas Prácticas y Código limpio
</p>
</div>
</div>
<div class="box border3">
<div class="info">
<h3>Creador de Contenido en Redes Sociales</h3>
<h4>Autónomo</h4>
<p>Enero de 2013 hasta Mayo de 2022 <br> Córdoba, Argentina · En remoto</p>
<br>
<h4>Descripción</h4>
<p>Realicé edición de imágenes | diseño gráfico de portadas y banners | videos para Instagram, YouTube y
Facebook | campañas con Facebook e Instagram Ads | análisis de datos.</p>
<br>
<h4>Aptitudes</h4>
<p>Diseño gráfico | Edición de vídeo | Producción de contenido creativo</p>
</div>
</div>
<div class="box border4">
<div class="info">
<h3>Reporter - Operaciones - Atención al cliente</h3>
<h4>Task Solutions S. A. · Jornada parcial</h4>
<p>Junio de 2010 hasta Marzo de 2017 <br> Córdoba, Argentina · Presencial</p>
<br>
<h4>Descripción</h4>
<p>Realicé reportes e informes de incidencias | análisis de llamadas | coaching grupales sobre producto |
propuestas de mejoras en procesos de atención | atención al cliente.</p>
<br>
<h4>Aptitudes</h4>
<p>Trabajo en equipo</p>
</div>
</div>
<div class="box border5">
<div class="info">
<h3>Co-Creador de Proyecto</h3>
<h4>Vinculo Comercial · Autónomo</h4>
<p>Enero de 2009 hasta Junio de 2010 <br> Córdoba, Argentina · Híbrido</p>
<br>
<h4>Descripción:</h4>
<p>Junto a 2 colegas diseñamos e implementamos un sitio web llamado VINCULO COMERCIAL para que distintos
negocios tengan un espacio publicitario digital. Tenían la posibilidad de mostrar fotos del negocio,
información importante, servicios, cupones de descuento, y más.</p>
<br>
<h4>Aptitudes:</h4>
<p>Desarrollo de Marca | Ventas | Marketing</p>
</div>
</div>
</div>
</section>
<!--===== EDUCACIÓN =====-->
<section class="section4" id="education" aria-label="Educación">
<div class="container">
<h2 class="title-section">Educación</h2>
<div class="box">
<div class="info">
<h3>Coderhouse</h3>
<h4>React</h4>
<p>2023</p>
<p>Estudio finalizado</p>
</div>
</div>
<div class="box">
<div class="info">
<h3>Alura Latam</h3>
<h4>Programa de Desarrollo Frontend</h4>
<p>2023</p>
<p>Estudio finalizado</p>
</div>
</div>
<div class="box">
<div class="info">
<h3>Coderhouse</h3>
<h4>Desarrollo Web</h4>
<p>2022</p>
<p>Estudio finalizado</p>
</div>
</div>
<div class="box">
<div class="info">
<h3>Universidad Siglo 21</h3>
<h4>Diplomatura en Social Media y Comunicaciones Digitales</h4>
<p>2016</p>
<p>Estudio finalizado</p>
</div>
</div>
<div class="box">
<div class="info">
<h3>Universidad Nacional de Córdoba</h3>
<h4>Licenciatura en Comunicación Social. Orientación en Comunicación Institucional</h4>
<p>feb. 2000 - dic. 2008</p>
<p>Estudio finalizado</p>
</div>
</div>
</div>
</section>
</main>
<footer aria-hidden="false">
<p>CV desarrollado por Luciano Treachi</p>
</footer>
<!-- Scroll to Top Link -->
<a href="#header" class="scroll-to-top-link" aria-label="Volver arriba">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z">
</path>
</svg>
</a>
</div>
</body>
</html>