-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
341 lines (339 loc) · 26.6 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portafolio | Christian Duarte</title>
<meta name="description" content="Mi nombre es Christian Duarte y desarrollo en Java, javascrip, HTML5 y CSS3.">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<!-- Raleway Regular 400 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<!-- Cedarville Cursive Regular 400 -->
<link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/encabezado.css">
<link rel="stylesheet" href="./css/presentacion.css">
<link rel="stylesheet" href="./css/sobre-mi.css">
<link rel="stylesheet" href="./css/skills.css">
<link rel="stylesheet" href="./css/hobbies.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/formacion.css">
<link rel="stylesheet" href="./css/experiencia.css">
<link rel="stylesheet" href="./css/contacto.css">
<link rel="stylesheet" href="./css/icon.css">
<link rel="stylesheet" href="./css/img.css">
<script src="https://kit.fontawesome.com/070f11682f.js" crossorigin="anonymous"></script>
</head>
<body class="contenedor">
<header class="encabezado">
<div class="encabezado__titulo">
<h2 class="encabezado__nombre"><i class="fa-solid fa-wand-magic-sparkles"></i> Christian Duarte</h2>
</div>
<div class="contenedor__menu-contacto">
<nav class="encabezado__memu">
<ul class="encabezado__lista">
<li class="encabezado__item"><a href="#sobremi" class="encabezado__enlace enlace">Sobre mi</a></li>
<li class="encabezado__item"><a href="#skills" class="encabezado__enlace enlace">Skills</a></li>
<li class="encabezado__item"><a href="#hobbies" class="encabezado__enlace enlace">Hobbies</a></li>
<li class="encabezado__item"><a href="#formacion" class="encabezado__enlace enlace">Formación</a></li>
<li class="encabezado__item"><a href="#proyectos" class="encabezado__enlace enlace">Proyectos</a></li>
</ul>
</nav>
<a class="encabezado__contacto enlace" href="mailto:duarte.camd@gmail.com">duarte.camd@gmail.com</a>
</div>
</header>
<main>
<section class="presentacion">
<img class="presentacion__avatar" src="./img/profile-pic.png" alt="Foto de Christian Duarte.">
<div class="presentacion__contenedor--titulo-desc-enlaces">
<h1 class="presentacion__titulo">¡Hola! Mi nombre es Christian y soy Programador Web Full Stack</h1>
<p class="presentacion__descripcion">con amplia experiencia en diversos lenguajes y tecnologías, como Java, JavaScript, HTML5, CSS3 y ANSI SQL. Además, sigo en constante formación y actualización de mis habilidades mediante la cursada de la carrera Tecnicatura Superior en Programación.</p>
<ul class="presentacion__enlaces">
<li>
<a class="presentacion__enlace enlace" href="https://github.com/camduarte" target="_blank">
<span class="presentacion__texto">Github</span>
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</li>
<li>
<a class="presentacion__enlace enlace" href="https://www.linkedin.com/in/christian-ariel-modesto-duarte" target="_blank">
<span class="presentacion__texto">Linkedin</span>
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</li>
<li>
<a class="presentacion__enlace enlace" href="https://twitter.com/cduarte70" target="_blank">
<span class="presentacion__texto">Twitter</span>
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</li>
<li>
<a class="presentacion__enlace enlace" href="https://drive.google.com/file/d/1meIGhjicNHj10rtUttBvbXBKdeFehlsv/view?usp=sharing" target="_blank">
<span class="presentacion__texto">Currículo</span>
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</li>
</ul>
</div>
</section>
<section id="sobremi" class="sobreMi">
<div class="sobremi__contenedor">
<h2 class="seccion__titulo">Sobre mi</h2>
<p class="sobreMi__descripcion">Soy Christian Ariel Modesto Duarte, un apasionado programador Java de Argentina. Tengo sólidos conocimientos en desarrollo backend utilizando frameworks como JEE, Spring, Struts y Hibernate, así como en SQL para bases de datos. Además, estoy familiarizado con Ubuntu, que se ha convertido en mi S.O. favorito.</p>
<p class="sobreMi__descripcion">También tengo experiencia en el desarrollo frontend, utilizando HTML, CSS y JavaScript para crear aplicaciones web interactivas y atractivas.</p>
<p class="sobreMi__descripcion">Mi enfoque es desarrollar soluciones de software eficientes y de alta calidad, utilizando las mejores prácticas de programación y buscando siempre la mejora continua. Estoy entusiasmado por encontrar nuevas oportunidades laborales que me permitan aplicar y seguir ampliando mis habilidades en el campo del desarrollo de aplicaciones Java.</p>
<br>
<p class="sobreMi__firma">Christian Ariel Modesto Duarte</p>
</div>
</section>
</main>
<section id="skills" class="skills">
<h2 class="seccion__titulo centrar">Skills</h2>
<div class="skills__tecnologias">
<div class="skills__tecnologia skills__tecnologia--java">
<i class="fa-brands fa-java fa-2x"></i>
<h3 class="skills__tecnologia--titulo">Java</h3>
</div>
<div class="skills__tecnologia skills__tecnologia--javascript">
<i class="fa-brands fa-square-js fa-2x"></i>
<h3 class="skills__tecnologia--titulo">JavaScript</h3>
</div>
<div class="skills__tecnologia skills__tecnologia--html">
<i class="fa-brands fa-html5 fa-2x"></i>
<h3 class="skills__tecnologia--titulo">HTML5</h3>
</div>
<div class="skills__tecnologia skills__tecnologia--css">
<i class="fa-brands fa-css3-alt fa-2x"></i>
<h3 class="skills__tecnologia--titulo">CSS 3</h3>
</div>
<div class="skills__tecnologia skills__tecnologia--sql">
<i class="fa-solid fa-database fa-2x"></i>
<h3 class="skills__tecnologia--titulo">ANSI SQL</h3>
</div>
<div class="skills__tecnologia skills__tecnologia--linux">
<i class="fa-brands fa-linux fa-2x"></i>
<h3 class="skills__tecnologia--titulo">Bash scripting</h3>
</div>
</div>
</section>
<section id="hobbies" class="hobbies">
<h2 class="seccion__titulo centrar">Hobbies</h2>
<div class="hobbies__actividades">
<div class="hobbies__actividad hobbies__actividad--cubo">
<i class="fa-solid fa-cube fa-2x"></i>
<h3 class="hobbies__actividad--titulo">Cubo Rubik</h3>
</div>
<div class="hobbies__actividad hobbies__actividad--guitarra">
<i class="fa-solid fa-guitar fa-2x"></i>
<h3 class="hobbies__actividad--titulo">Guitarra</h3>
</div>
<div class="hobbies__actividad hobbies__actividad--musica">
<i class="fa-solid fa-headphones fa-2x"></i>
<h3 class="hobbies__actividad--titulo">Música</h3>
</div>
<div class="hobbies__actividad hobbies__actividad--series">
<i class="fa-solid fa-tv fa-2x"></i>
<h3 class="hobbies__actividad--titulo">Series</h3>
</div>
<div class="hobbies__actividad hobbies__actividad--juego">
<i class="fa-solid fa-gamepad fa-2x"></i>
<h3 class="hobbies__actividad--titulo">Video juegos</h3>
</div>
<div class="hobbies__actividad hobbies__actividad--fotos">
<i class="fa-solid fa-wifi fa-2x"></i>
<h3 class="skills__tecnologia--titulo">Internet</h3>
</div>
</div>
</section>
<section id="formacion" class="formacion">
<h2 class="seccion__titulo centrar">Formación académica</h2>
<div class="formacion__cursos">
<div class="formacion__curso formacion__curso-teclab">
<div class="caja-imagen">
<img src="./img/teclab-logo.png" alt="Logo Teclab" class="formacion__curso--img">
</div>
<h3 class="formacion__curso--titulo">Tecnicatura Superior en Programación, 1º año</h3>
<p class="formacion__curso--fecha">2023 - Teclab Instituto Técnico Superior</p>
</div>
<div class="formacion__curso formacion__curso-argentina-programa">
<div class="caja-imagen">
<img src="./img/argentina-programa-logo.png" alt="Logo Argentina Programa 4.0" class="formacion__curso--img-arg-utn">
<img src="./img/utn-logo.png" alt="Logo UTN" class="formacion__curso--img-arg-utn">
</div>
<h3 class="formacion__curso--titulo">Introducción a testing manual, ágil y con herramientas (64 horas)</h3>
<p class="formacion__curso--fecha">2023 - Argentina Programa 4.0 + Universidad Tecnológica Nacional (UTN)</p>
</div>
<div class="formacion__curso formacion__curso-aluraoracle">
<div class="caja-imagen">
<img src="./img/alura-logo.svg" alt="Logo Alura Latam" class="formacion__curso--img-alura-one">
<img src="./img/one-logo.png" alt="Logo Oracle Next Education" class="formacion__curso--img-alura-one">
</div>
<h3 class="formacion__curso--titulo">Lógica de programación<br>Front-end<br>Java (560 horas)</h3>
<p class="formacion__curso--fecha">2022 - Alura Latam + Oracle Next Education</p>
</div>
<div class="formacion__curso formacion__curso-utn">
<div class="caja-imagen">
<img src="./img/sceu-logo.jpg" alt="Logo UTN" class="formacion__curso--sceu">
<img src="./img/utn-sceu-logo.jpg" alt="Logo UTN" class="formacion__curso--utnsceu">
</div>
<h3 class="formacion__curso--titulo">Desarrollo de Aplicaciones Web Java JEE (80 horas)</h3>
<p class="formacion__curso--fecha">2011 - Secretaría de Cultura y Extensión Universitaria de la Universidad Tecnológica Nacional (UTN)</p>
</div>
<div class="formacion__curso formacion__curso-proyecto-programar">
<div class="caja-imagen">
<img src="./img/proyecto-programar/proyectoprogramar-logo.jpg" alt="Logo Proyecto Programar" class="formacion__curso--img">
</div>
<h3 class="formacion__curso--titulo">Curso Intensivo: “Programación JAVA” (520 horas)</h3>
<p class="formacion__curso--fecha">2010 - Proyecto Programar + Secretaría de Extensión Universitaria de la Universidad Nacional de La Matanza (UNLaM)</p>
</div>
</div>
</section>
<section id="proyectos" class="experiencia">
<h2 class="seccion__titulo centrar">Proyectos</h2>
<div class="experiencia__proyectos">
<div class="experiencia__proyecto experiencia__proyecto--bidfinder">
<img src="./img/bidfinder.png" alt="Proyecto Bidfinder" class="experiencia__proyecto--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">Bidfinder - Pedido y oferta de productos</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item"><span class="resaltar">Diseño Web Responsivo.</span></li>
<li class="experiencia__item"><span class="resaltar">Spring Boot</li>
<li class="experiencia__item"><span class="resaltar">Spring MVC</li>
<li class="experiencia__item"><span class="resaltar">Spring Data JPA</li>
<li class="experiencia__item"><span class="resaltar">Thymeleaf</li>
<li class="experiencia__item"><span class="resaltar">Bootstrap</li>
<li class="experiencia__item"><span class="resaltar">Maven</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/bid-finder" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a></div>
</div>
</div>
<div class="experiencia__proyecto experiencia__proyecto--camdgeek">
<img src="./img/camd-geek.png" alt="Proyecto e-commerce" class="experiencia__proyecto--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">CamdGeek e-commerce</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item"><span class="resaltar">Diseño Web Responsivo.</span></li>
<li class="experiencia__item"><span class="resaltar">HTML - </span>favicon, meta tags, tags header, main, footer, button, textarea, input, div, img, p.</li>
<li class="experiencia__item"><span class="resaltar">CSS - </span>Reset CSS, flexbox y CSS grid, Google Fonts, selectores, unidades relativas y absolutas, media queries.</li>
<li class="experiencia__item"><span class="resaltar">JavaScript - </span>IIFE, manipulación DOM, Promise, Fetch API, json-server, json, Rest, uuid, localStorage, Arrow functions, Events, Module, documentación de código.</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/camd-geek" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a><a href="https://camduarte.github.io/camd-geek/" class="boton-azul enlace" target="_blank"><span class="texto-boton texto-gris">Ver demo</span></a></div>
</div>
</div>
<div class="experiencia__proyecto experiencia__proyecto--encriptador">
<img src="./img/encriptador-de-texto.png" alt="Proyecto Encriptador de texto" class="experiencia__proyecto--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">Encriptador de texto</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item"><span class="resaltar">Diseño Web Responsivo.</span></li>
<li class="experiencia__item"><span class="resaltar">HTML - </span>favicon, meta tags, tags header, main, footer, button, textarea, input, div, img, p.</li>
<li class="experiencia__item"><span class="resaltar">CSS - </span>Reset CSS, flexbox y CSS grid, Google Fonts, selectores, unidades relativas y absolutas, media queries.</li>
<li class="experiencia__item"><span class="resaltar">JavaScript - </span>minificación, IIFE, funciones, manipulación DOM, Map, manipulación de strings, estructuras de selección, operadores de comparación y lógicos, regex, manejo de eventos, comentarios de línea, comentarios multilínea, documentación de código.</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/encriptador-de-texto" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a><a href="https://camduarte.github.io/encriptador-de-texto/" class="boton-azul enlace" target="_blank"><span class="texto-boton texto-gris">Ver demo</span></a></div>
</div>
</div>
<div class="experiencia__proyecto experiencia__proyecto--ahorcado">
<img src="./img/ahorcado.png" alt="Proyecto Juego del ahorcado" class="experiencia__proyecto--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">Juego del ahorcado</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item"><span class="resaltar">Diseño Web Responsivo.</span></li>
<li class="experiencia__item"><span class="resaltar">HTML - </span>favicon, meta tags, tags header, main, footer, canvas, anchor, button, img, p, span.</li>
<li class="experiencia__item"><span class="resaltar">CSS - </span>Reset CSS, flexbox, Google Fonts, Font Awesome, selectores, flexbox, pseudo clases, variables, unidades relativas y absolutas, media queries.</li>
<li class="experiencia__item"><span class="resaltar">JavaScript - </span>minificación, IIFE, funciones, manipulación DOM, dibujo canvas, variables con let y const, array, estructuras de selección y repetición, operadores de comparación y lógicos, operadores matemáticos, regex, manejo de eventos, comentarios de línea, comentarios multilínea, documentación de código.</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/juego-del-ahorcado" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a><a href="https://camduarte.github.io/juego-del-ahorcado/" class="boton-azul enlace" target="_blank"><span class="texto-boton texto-gris">Ver demo</span></a></div>
</div>
</div>
<div class="experiencia__proyecto experiencia__proyecto--tateti">
<img src="./img/tateti.png" alt="Proyecto tatetí" class="experiencia__proyecto--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">tatetí</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item"><span class="resaltar">Diseño Web Responsivo.</span></li>
<li class="experiencia__item"><span class="resaltar">HTML - </span>favicon, meta tags, tags header, main, footer, canvas, button, div, span, p.</li>
<li class="experiencia__item"><span class="resaltar">CSS - </span>Reset CSS, flexbox, Google Fonts, selectores, flexbox, pseudo clases, variables, unidades relativas y absolutas.</li>
<li class="experiencia__item"><span class="resaltar">JavaScript - </span>minificación, IIFE, funciones, manipulación DOM, dibujo canvas, variables con let y const, array, estructuras de selección y repetición, operadores de comparación y lógicos, operadores matemáticos, manejo de eventos, comentarios de línea, comentarios multilínea, documentación de código.</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/tateti" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a><a href="https://camduarte.github.io/tateti/" class="boton-azul enlace" target="_blank"><span class="texto-boton texto-gris">Ver demo</span></a></div>
</div>
</div>
<div class="experiencia__proyecto experiencia__proyecto--converter">
<img src="./img/conversor.png" alt="Proyecto converter" class="experiencia__proyecto--img experiencia__converter--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">Conversor de moneda y temperatura</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item resaltar">Java</li>
<li class="experiencia__item resaltar">JavaFX</li>
<li class="experiencia__item resaltar">Gson</li>
<li class="experiencia__item resaltar">Rest</li>
<li class="experiencia__item resaltar">MVC design pattern</li>
<li class="experiencia__item resaltar">SOA(Service-oriented architecture )</li>
<li class="experiencia__item resaltar">Maven</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/converter" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a></div>
</div>
</div>
<div class="experiencia__proyecto experiencia__proyecto--hotel">
<img src="./img/hotel.png" alt="Proyecto converter" class="experiencia__proyecto--img">
<div class="experiencia__contenedor">
<h3 class="experiencia__proyecto--titulo">Camd Hotel - Sistema de reserva</h3>
<p class="experiencia__proyecto--descripcion">
<ul class="experiencia__lista">
<li class="experiencia__item resaltar">Java</li>
<li class="experiencia__item resaltar">Swing</li>
<li class="experiencia__item resaltar">JDBC</li>
<li class="experiencia__item resaltar">C3P0</li>
<li class="experiencia__item resaltar">JCalendar</li>
<li class="experiencia__item resaltar">Patrones de diseño (MVC, DAO y Factory Method)</li>
<li class="experiencia__item resaltar">SOA</li>
<li class="experiencia__item resaltar">MySql</li>
</ul>
</p>
<div class="botonera"><a href="https://github.com/camduarte/hotel" class="experiencia__proyecto--repositorio enlace" target="_blank"><span class="texto-boton texto-azul">Repositorio</span></a></div>
</div>
</div>
</div>
</section>
<section class="contacto">
<div class="contacto__img"></div>
<form id="contacto" action="https://formsubmit.co/e46152ab7f1847f785aa4dbad76dc9d2" method="post">
<fieldset class="contacto__campos" form="contacto">
<legend>
<h2 class="seccion__titulo">Contacto</h2>
<p class="contacto__descripcion">¿Querés contactarme?<br>Completa el siguiente formulario y me pondré en contacto lo antes posible.</p>
</legend>
<input type="hidden" name="_next" value="https://camduarte.github.io/portafolio/">
<input type="hidden" name="_subject" value="Contacto desde el portafolio">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<input class="contacto__dato" type="text" name="nombre" form="contacto" placeholder="Nombre" required>
<input class="contacto__dato" type="email" name="email" form="contacto" placeholder="E-mail" required>
<input class="contacto__dato" type="text" name="asunto" form="contacto" placeholder="Asunto" required>
<textarea class="contacto__dato contacto__mensaje" name="mensaje" id="" cols="30" rows="10" minlength="12" maxlength="140" form="contacto" placeholder="Mensaje" required></textarea>
<button class="contacto__boton boton-azul texto-boton texto-gris" type="submit">Enviar mensaje</button>
</fieldset>
</form>
</section>
<footer class="footer">
<p class="footer__texto">Desarrollado por Christian Ariel Modesto Duarte 2022</p>
</footer>
</body>
</html>