-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
463 lines (431 loc) · 24.1 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
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html lang="es">
<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>Mi Portafolio</title>
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/top.css">
<link rel="stylesheet" href="CSS/banner.css">
<link rel="stylesheet" href="CSS/acerca-de-mi.css">
<link rel="stylesheet" href="CSS/habilidades.css">
<link rel="stylesheet" href="CSS/formaciones.css">
<link rel="stylesheet" href="CSS/experiencia.css">
<link rel="stylesheet" href="CSS/contacto.css">
<link rel="stylesheet" href="CSS/footer.css">
<link rel="stylesheet" href="CSS/responsive.css">
<script src="https://kit.fontawesome.com/a5713228d6.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<!-- SECCION TOP -->
<a name="home"></a>
<section class="top ancho-pagina">
<div class="top-logo">
<img src="img/CRIS.ORIH.png">
</div>
<nav class="top-menu">
<ul class="top-menu-lista">
<li class="top-menu-lista-item"><a href="#home" class="activo menu-lista-link">Home</a></li>
<li class="top-menu-lista-item"><a href="#acerca" class="menu-lista-link">Acerca de mi</a></li>
<li class="top-menu-lista-item"><a href="#hobbies" class="menu-lista-link">Hobbies y
Habilidades</a>
</li>
<li class="top-menu-lista-item"><a href="#formacion" class="menu-lista-link">Formación y
Experiencia</a>
</li>
<li class="top-menu-lista-item"><a href="#portafolio" class="menu-lista-link">Portafolio</a>
</li>
<li class="top-menu-lista-item"><a href="#contacto" class="menu-lista-link">Contacto</a></li>
</ul>
</nav>
</section>
<!-- SECCION BANNER -->
<section class="banner">
<div class="banner-img">
<div class="banner-texto">
<h5>Hola! mi nombre es</h5>
<h1>Cristian Orihuela</h1>
<p>Soy un Front-end Developer en formación a través de la plataforma <br> Alura Latam y el programa
Oracle Next Education.</p>
<a class="banner-links" href="https://www.oracle.com/ar/education/oracle-next-education/">Oracle ONE
❭❭</a>
<a class="banner-links" href="https://www.aluracursos.com/">Alura Latam ❭❭</a>
<a class="banner-links" href="https://www.facebook.com/cmorihuela/">Facebook ❭❭</a>
<a class="banner-links" href="https://github.com/corihuela75">Github ❭❭</a>
<a class="banner-links" href="https://www.linkedin.com/in/cristian-orihuela/">Linkedin
❭❭</a><br><br>
<a class="btn links" href="#portafolio">Mi trabajo</a>
</div>
</div>
</section>
</header>
<main>
<!-- SECCION ACERCA DE MI -->
<a name="acerca"></a>
<section class="acercaDeMi fondo-claro ancho-pagina">
<div class="txt-center">
<h2>ACERCA DE MI</h2>
</div>
<div class="subrayado">
<div class="subrayado-top"></div>
<div class="subrayado-bottom"></div>
</div>
<div class="acerca-biografia">
<div class="acerca-miTexto">
<h3 class="mayuscula">Hola!</h3>
<p>Me llamo Cristian Orihuela, tengo 46 años, vivo en la ciudad de Mar del Plata, Buenos Aires,
Argentina.
</p>
<p>Cuando tenía aproximadamente diez años de edad recibí mi primera computadora, una Timex Sinclair
CZ1000 con 2k
de memoria, que mi primo Daniel me trajo como regalo de un viaje. A partir de allí para poder
jugar empece a copiar
los códigos de los programas escritos en lenguaje Basic y a aprenderlo al mismo tiempo.</p>
<p>A los 18 años empecé la Universidad y a trabajar en un Estudio Contable. Estudié en la UNMDP, la
carrera de Contador Público Nacional, hasta el cuarto año.</p>
<p>Actualmente trabajo en un Hotel como jefe administrativo-contable desde hace 20 años.</p>
<p>Hoy pensando en extender mi horizonte laboral, en cultivar el espíritu emprendedor que nunca
termina de florecer, y en completar una asignatura pendiente, que es aprender a programar, es
que me ecuentro formando parte de la comunidad de Alura Latam y del programa Oracle Next
Education.
Y esto es solo el comienzo...
</p>
<a class="btn links" href="img/CV Cristian Orihuela.pdf">Descargar mi CV</a>
</div>
<div class="acerca-miFoto">
<img class="acerca-miFoto_img" src="img/yo_4.png">
</div>
</div>
</section>
<!-- SECCION HOBBIES -->
<a name="hobbies"></a>
<section class="habilidadesHobbies fondo-oscuro ancho-pagina">
<div class="txt-center">
<h2>HOBBIES Y HABILIDADES</h2>
</div>
<div class="subrayado">
<div class="subrayado-top"></div>
<div class="subrayado-bottom"></div>
</div>
<div class="habilidadesHobbies-softHard">
<div class="habilidadesHobbies-softskills">
<div>
<h3>SOFTSKILLS</h3>
<p><b>Trabajo en equipo:</b> dirijo el departamento administrativo-contable y coordino el
trabajo de cuatro personas,
con el objetivo de preparar mensualmente un Estado de
Resultados para la Gerencia y un Balance anual.</p>
<p><b>Versatilidad:</b> me adapto a las nuevas situaciones que suelen presentarse en el trabajo
sin previo aviso y que deben ser solucionadas.</p>
<p><b>Creatividad:</b> Permanentemente trato de hacer el trabajo y las tareas más dinámicas,
buscando la forma de automatizarlas. Mayormente se trata de información recopilada en
planillas de cálculo, que suelen facilitar mucho su uso, al mejorarse con el uso de
plantillas, proteccion y validación de datos, filtros y tablas dinamicas, fórmulas
avanzadas, etc.</p>
<p><b>Liderazgo:</b> Trato de generar una relación de pertenencia con mi equipo de trabajo, a
través de diálogo, fomentando la ayuda mutua, acompañando en el proceso de formación y
fijando objetivos conjuntos.</p>
</div>
<h3>SKILLS</h3>
<div class="habilidadesHobbies-grilla">
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-brands fa-html5"></i>
<span class="habilidadesHobbies-info">HTML5</span>
</div>
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-brands fa-css3-alt"></i>
<span class="habilidadesHobbies-info">CCS3</span>
</div>
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-brands fa-js"></i>
<span class="habilidadesHobbies-info">Javascript</span>
</div>
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-solid fa-file-excel"></i>
<span class="habilidadesHobbies-info">Excel</span>
</div>
</div>
<h3>HOBBIES</h3>
<div class="habilidadesHobbies-grilla">
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-solid fa-futbol"></i>
<span class="habilidadesHobbies-info">Fútbol</span>
</div>
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-solid fa-gamepad"></i>
<span class="habilidadesHobbies-info">Videojuegos</span>
</div>
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-solid fa-hammer"></i>
<span class="habilidadesHobbies-info">Carpinteria</span>
</div>
<div class="habilidadesHobbies-grilla_cuadro"><i class="fa-solid fa-tv"></i>
<span class="habilidadesHobbies-info">Series TV</span>
</div>
</div>
</div>
<div class="habilidadesHobbies-hardskills">
<h3>HARDSKILLS</h3>
<div class="habilidadesHobbies-skills_item">
<div class="linea60" id="barra60"></div>
</div>
<h4>PROGRAMACION</h4>
<div class="habilidadesHobbies-skills_item">
<div class="linea80" id="barra80"></div>
</div>
<h4>DISEÑO WEB</h4>
<div class="habilidadesHobbies-skills_item">
<div class="linea70" id="barra70"></div>
</div>
<h4>DISEÑO GRAFICO</h4>
</div>
</div>
</section>
<!-- SECCION FORMACION Y EXPERIENCIA -->
<a name="formacion"></a>
<section class="formaciones fondo-claro ancho-pagina">
<div class="txt-center">
<h2>FORMACION y EXPERIENCIA</h2>
</div>
<div class="subrayado">
<div class="subrayado-top"></div>
<div class="subrayado-bottom"></div>
</div>
<div>
<div class="formaciones-tabla">
<div class="formaciones-tabla-educacion">
<h3>Educacion</h3>
<div class="formacion-item">
<div class="formacion-item-year">2022 ( en curso )</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">ORACLE NEXT EDUCATION</div>
<div class="formacion-item-datos_subtitulo">Alura Latam</div>
<p>Lógica de programación - Front-end - Java - Emprendimiento</p>
</div>
</div>
<div class="formacion-item">
<div class="formacion-item-year">1994 - 1996</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">CONTADOR PUBLICO NACIONAL<BR>Y LIC.EN
ADMINISTRACION</div>
<div class="formacion-item-datos_subtitulo">Universidad Nacional de Mar del
Plata</div>
<p>Tercer año aprobado, 21 materias. Incompleto. </p>
</div>
</div>
<div class="formacion-item">
<div class="formacion-item-year">1989 - 1993</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">BACHILLER CONTABLE</div>
<div class="formacion-item-datos_subtitulo">Escuela de Educación Media N°2</div>
<p>Promedio general 8.63</p>
</div>
</div>
</div>
<div class="formaciones-tabla-experiencia">
<h3>Experiencia</h3>
<div class="formacion-item">
<div class="formacion-item-year">2002 ( actualidad )</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">HOTEL SPA REPUBLICA</div>
<div class="formacion-item-datos_subtitulo">Jefe de Administración</div>
<p>Jefe de Administración. Tesorero. Confección de Estados de Resultados
mensuales.
Administración de
personal. Informes financieros. Liquidación de sueldos. Control de stock y
costos de aaybb. Liquidación
mensual de impuestos y cierre de balance anual para Estudio.</p>
</div>
</div>
<div class="formacion-item">
<div class="formacion-item-year">1999 - 2002</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">PROVINTEL S.R.L.</div>
<div class="formacion-item-datos_subtitulo">Analista Contable</div>
<p>Contaduría. Conciliaciones bancarias. Liquidación de sueldos. Administración
de personal. Informes
gerenciales. Administración de Proveedores y Agencias Comerciales.</p>
</div>
</div>
<div class="formacion-item">
<div class="formacion-item-year">1997 - 1999</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">CULTIVOS S.R.L.</div>
<div class="formacion-item-datos_subtitulo">Administrativo - Contable</div>
<p>Facturación. Control y gestión de cuentas corrientes de clientes. Pagos a
Proveedores. Conciliaciones
bancarias. Control de stock. Despacho y seguimiento de mercaderías.
Liquidación de comisiones a
vendedores. Liquidación de sueldos e impuestos. Registraciones contables.
Preparación de balances.
Ajustes al cierre. Informes contables de uso interno.
</p>
</div>
</div>
<div class="formacion-item">
<div class="formacion-item-year">1995 - 1996</div>
<div class="formacion-item-datos">
<div class="formacion-item-datos_titulo">ESTUDIO CONTABLE DR. DANIEL ANGEL
FUMARONI</div>
<div class="formacion-item-datos_subtitulo">Cadete administrativo</div>
<p>Registraciones en libros de IVA. Imputaciones contables. DD.JJ. IVA y Cargas
Sociales. Liquidación de
sueldos. Trámites impositivos, bancarios, etc.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECCION PORTAFOLIO -->
<a name="portafolio"></a>
<section class="experiencia fondo-oscuro ancho-pagina">
<div class="txt-center">
<h2>PORTAFOLIO</h2>
</div>
<div class="subrayado">
<div class="subrayado-top"></div>
<div class="subrayado-bottom"></div>
</div>
<div class="portafolio">
<!-- TRABAJO N`1 -->
<div class="experiencia-portafolio-fila">
<img class="experiencia-portafolio-img" src="img/Portafolio/Guillotinado.png">
<div>
<div>
<div class="experiencia-portafolio-titulo">Mi version del juego del ahorcado</div>
<div class="experiencia-portafolio-subtitulo">Challenge #2 Oracle ONE Alura</div>
<div class="experiencia-portafolio-tags">❬ HTML ❭ ❬ CSS ❭ ❬ JS ❭</div>
<div>
<a class="experiencia-portafolio-btn links"
href="https://github.com/corihuela75/ONE-Guillotinado.git">Repositorio</a>
<a class="experiencia-portafolio-btn links"
href="https://corihuela75.github.io/ONE-Guillotinado/">ver
demo </a>
</div>
</div>
</div>
</div>
<!-- TRABAJO N`2 -->
<div class="experiencia-portafolio-fila ">
<img class="experiencia-portafolio-img" src="img/Portafolio/Encriptador.png">
<div>
<div>
<div class="experiencia-portafolio-titulo">Encriptador / desencriptador</div>
<div class="experiencia-portafolio-subtitulo">Challenge #1 Oracle ONE Alura</div>
<div class="experiencia-portafolio-tags">❬ HTML ❭ ❬ CSS ❭ ❬ JS ❭</div>
<div>
<a class="experiencia-portafolio-btn links"
href="https://github.com/corihuela75/ONE-Encriptador.git">Repositorio</a>
<a class="experiencia-portafolio-btn links"
href="https://corihuela75.github.io/ONE-Encriptador/encripta.html">ver demo </a>
</div>
</div>
</div>
</div>
<!-- TRABAJO N`3 -->
<div class="experiencia-portafolio-fila">
<img class="experiencia-portafolio-img" src="img/Portafolio/miPortafolio.png">
<div>
<div>
<div class="experiencia-portafolio-titulo">Mi Portafolio Personal</div>
<div class="experiencia-portafolio-subtitulo">Challenge #3 Oracle ONE Alura</div>
<div class="experiencia-portafolio-tags">❬ HTML ❭ ❬ CSS ❭ ❬ JS ❭</div>
<div>
<a class="experiencia-portafolio-btn links"
href="https://github.com/corihuela75/ONE-miPortafolio.git">Repositorio</a>
<a class="experiencia-portafolio-btn links"
href="https://corihuela75.github.io/ONE-miPortafolio/">ver
demo </a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECCION CONTACTO -->
<a name="contacto"></a>
<section class="contacto fondo-claro ancho-pagina">
<div class="contacto-izq">
<h2>CONTACTATE CONMIGO</h2>
<div>
<div class="subrayado-izqtop"></div>
<div class="subrayado-izqbot"></div>
</div>
<p>Hay varias maneras de contactarme: </p>
<table class="contacto-lista">
<tr>
<td><i class="fa-solid fa-phone contacto-icono"></i></td>
<td>
<div class="contacto-lista-titulo">Telefono</div>
<div class="contacto-lista-subtitulo">+54 223 590-3633</div>
</td>
</tr>
<tr>
<td><i class="fa-solid fa-at contacto-icono"></i></td>
<td>
<div class="contacto-lista-titulo">email</div>
<div class="contacto-lista-subtitulo">[email protected]</div>
</td>
</tr>
<tr>
<td><i class="fa-solid fa-location-crosshairs contacto-icono"></i></td>
<td>
<div class="contacto-lista-titulo">Ubicacion</div>
<div class="contacto-lista-subtitulo">Castex 2535 (7600) Mar del Plata, Argentina</div>
</td>
</tr>
</table>
</div>
<div class="contacto-der">
<form action="">
<input class="contacto-input" type="text" name="tu-nombre" placeholder="Tu Nombre">
<input class="contacto-input" type="text" name="tu-email" placeholder="Tu email">
<textarea class="contacto-textarea" name="tu-texto" id="" cols="30" rows="10"
placeholder="Texto"></textarea>
<input class="contacto-submit btn" type="submit" name="Cris" placeholder="Holi">
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-iconos fondo-oscuro">
<div>
<a href="https://www.facebook.com/cmorihuela/"><i id="social-fb"
class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://github.com/corihuela75"><i id="social-gh"
class="fa-brands fa-github-square fa-3x social"></i></a>
<a href="https://www.linkedin.com/in/cristian-orihuela/"><i id="social-li"
class="fa-brands fa-linkedin fa-3x social"></i></a>
<a href="mailto:#[email protected]"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
<div>
<p>2022 © Copyright <span>Cristian Orihuela. </span>All rights Reserved. Create by
<span>Cris.Orih.</span>
</p>
</div>
</div>
<a id="scrollUp" href="#top" style="position: fixed; z-index: 2147483647; display: block;">UP</a>
</footer>
</body>
<script>
// ** EL SIGUIENTE CODIGO COPIADO DE STACKOVERFLOW ** //
// Crear el observador (Intersection Observer API)
// En la función anónima se recibe una lista de entradas,
// no importa que solo se observe un elemento
observer = new IntersectionObserver(entries => {
// Recorrer las entradas recibidas
entries.forEach(entry => {
// Está visible en el viewport
if (entry.intersectionRatio > 0) {
// entry.target es el elemento que se está observando
// Agregar la clase para animar
let clase = entry.target.id;
//la clase asignada debe tener el mismo nombre que el id #barra70 = .barra70
entry.target.classList.add(clase);
// Dejar de observar
observer.unobserve(entry.target);
}
});
});
// Observar elemento a animar
observer.observe(document.querySelector('#barra60'));
observer.observe(document.querySelector('#barra70'));
observer.observe(document.querySelector('#barra80'));
</script>
</html>