-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (214 loc) · 13.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portafolio de Hernan Demorizi Ureña (Hernan.Reiq) Ingeniero de Sistemas y Computación, Desarrollador (Programador) y Diseñador Web. República Dominicana, Dominicano.">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, MySQL, SQL, MongoDB, Node.js, Express.js, Photoshop, Bootstrap, Programación, Desarrollador, Diseñador, Web">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital@1&family=Roboto:wght@100;500&display=swap&family=Open+Sans:ital,wght@1,300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2acc1475d8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<title>Portafolio - Hernan Demorizi Ureña</title>
</head>
<body id="body">
<header>
<div class="portada">
<div id="snow-flakes"></div>
<img src="img/portada.jpg" alt="portada del portafolio" class="portada animate__animated animate__heartBeat">
</div>
<nav id="navBar">
<a href="javascript:void(0)" id="menu-navegacion"><i class="fas fa-bars"></i></a>
<ul id="lista-menu" class="container-xl px-0">
<div class="opciones-menu">
<a class="text-decoration-none text-white" href="#proyectos">
<li class="menu">Portafolio</li>
</a>
<a class="text-decoration-none text-white" href="#habilidades">
<li class="menu">Habilidades</li>
</a>
<a class="text-decoration-none text-white" href="#informacion">
<li class="menu">Sobre mí...</li>
</a>
<a class="text-decoration-none text-white" href="#contacto">
<li class="menu">Contacto</li>
</a>
</div>
<div class="marca">
<a href="#presentacion" class="text-decoration-none text-white" id="marcaHR">
<li class="menu">Hernan.Reiq</li>
</a>
</div>
</ul>
<a href="#presentacion" id="hr-brand-mobile" class="text-decoration-none text-white">Hernan.Reiq</a>
</nav>
<a name="presentacion" class="ancla"></a>
<section class="presentacion">
<div class="presentacion">
<img src="img/hernan.jpg" alt="Hernan Demorizi Ureña - Hernan.Reiq" id="foto-presentacion" class="animate__animated animate__rotateInDownRight shadow">
<div class="presentacion-texto animate__animated animate__rotateInUpLeft">
<h1 class="nombre" id="nombre-apodo"></h1>
<h2 class="hobby" id="titulo-profesional"></h2>
</div>
</div>
</section>
</header>
<main>
<a name="proyectos" class="ancla"></a><!--PORTAFOLIO DE PROYECTOS-->
<section id="section-portafolio">
<div class="titulo titulo-gradiente-negro mis-proyectos">
<h2>Portafolio <span class="badge badge-pill ml-1 azul-fondo" id="cantidad-proyectos-contador"></span></h2>
</div>
<div class="azul"></div>
<div class="contenedor-portafolio">
<div class="contenido proyectos" id="contenido-proyectos">
<div class="d-flex justify-content-center" id="spinner">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<ul id="proyectos-portafolio">
<!--PROYECTOS INSERTADOS CON JAVASCRIPT-->
</ul>
<div class="clearfix"></div>
<div class="contenedor-boton-ver-mas">
<button id="boton-ver-mas" class="shadow">VER MAS</button>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
<a name="habilidades" class="ancla"></a><!--HABILIDADES DOMINADAS Y TRABAJADAS-->
<section id="section-habilidades">
<div class="titulo titulo-gradiente-azul mis-habilidades">
<h2>Habilidades <span class="badge badge-pill ml-1 negro-fondo" id="cantidad-habilidades-contador"></span></h2>
</div>
<div class="blanco"></div>
<div class="contenido habilidades">
<a name="skills" class="ancla"></a>
<div class="container-xl">
<div class="accordion" id="accordion-1">
<!--CONTENIDO DEL ACORDEON AGREGADO CON JAVASCRIPT-->
</div>
</div>
</div>
</section>
<a name="informacion" class="ancla"></a><!--INFORMACION SOBRE MI-->
<section id="section-informacion">
<div class="titulo titulo-gradiente-negro mi-informacion">
<h2>Sobre mí...</h2>
</div>
<div class="azul"></div>
<div class="contenido informacion">
<div class="contenedor-texto-informacion">
<p class="mb-0">
Soy un egresado de la Universidad Dominicana O&M, donde estudié la carrera de Ingeniería de Sistemas y Computación. A pesar de haber conocido muchas ramas interesantes de dicha carrera, siempre me interesó la programación, debido a que esta me da la oportunidad de crear soluciones y automatizar procesos de la vida cotidiana. <br><br>
<b>Mi personalidad: </b>me defino como una persona autodidacta, proactiva, persistente, amante de los retos y con un gran entusiasmo por aprender. Para mí es importante tener una personalidad que me permita pensar y actuar por mi propia cuenta, pero me gusta escuchar aquellas vivencias que puedan orientarme sobre cuales errores evitar en la vida. <br><br>
<b>Respecto a mis conocimientos: </b>estoy seguro de que con el conocimiento adquirido en los años en que me he estado preparando, puedo crear soluciones eficientes para resolver muchos problemas de mi área, pero también debo reconocer que este mundo está muy apegado a la informática, por lo que siempre tendré que mantenerme actualizado para poder ofrecer mejores resultados. <br><br>
<b>Mis metas: </b>
</p>
<ul class="metas mb-4 mt-1">
<li><p class="mb-0">Convertirme en un referente de calidad y disciplina.</p></li>
<li><p class="mb-0">Ofrecer soluciones y resultados que superen las expectativas esperadas.</p></li>
<li><p class="mb-0">Colaborar en equipos que me permitan mejorar mis habilidades blandas.</p></li>
<li><p class="mb-0">Aumentar la versatilidad con la que me adapto a los lenguajes y las nuevas tecnologías.</p></li>
</ul>
<p class="mb-0">
<b>Pasatiempos: </b>cuando no estoy programando me gusta jugar en la computadora, me encanta compartir con mis seres queridos y a veces veo alguna película de acción o suspenso. <br><br>
</p>
<blockquote class="frase">
<b>Mi frase: </b>“No puedes improvisar la calidad y tampoco la experiencia, pero si puedes hacer las cosas con el corazón para obtener buenos resultados.”
<cite>Hernan V. Demorizi Ureña.</cite>
</blockquote>
</div>
</div>
</section>
<a name="contacto" class="ancla"></a><!--FORMA DE CONTACTARME-->
<section id="section-contacto">
<div class="titulo titulo-gradiente-azul mi-contacto">
<h2>Contacto</h2>
</div>
<div class="blanco"></div>
<div class="contenido contacto">
<ul id="lista-contacto" class="animate__animated animate__lightSpeedInRight">
<li class="shadow">
<a href="https://www.linkedin.com/in/hernan-demorizi-ure%C3%B1a-4430031b1/" target="_blank"><i class="fab fa-linkedin icono"></i><br> LinkedIn</a>
</li>
<li class="shadow">
<a href="#contacto" id="boton-email"><i class="fas fa-envelope icono"></i><br> Email</a>
</li>
<li class="shadow">
<a href="https://www.instagram.com/hernan.reiq" target="_blank"><i class="fab fa-instagram icono"></i><br> Instagram</a>
</li>
<li class="shadow">
<a href="https://github.com/hernanreiq" target="_blank"><i class="fab fa-github icono"></i><br> GitHub</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</section>
</main>
<div class="blanco"></div>
<footer>
<div class="container py-4">
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<p class="text-center mb-0">Web diseñada y desarrollada en el año 2020 por: <a href="https://www.instagram.com/hernan.reiq" target="_blank">Hernan.Reiq</a> <br> Todos los derechos reservados ©. </p>
</div>
</div>
</div>
</footer>
<!-- VENTANA EMERGENTE PARA MOSTRAR LOS CONTENIDOS DEL PORTAFOLIO -->
<div class="overlay" id="ventana-emergente-fondo">
<div class="popup" id="popup">
<h2 id="nombre-proyecto-popup" class="h4"></h2>
<div class="popup-img">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carousel-inner">
<div class="carousel-item active">
<!-- CONTENIDO DEL CAORUSEL SE AGREGA CON JAVASCRIPT -->
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"><i class="fas fa-chevron-left"></i></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"><i class="fas fa-chevron-right"></i></span>
</a>
</div>
</div>
<h3 class="cantidad-fotos-popup">Imágenes: <span class="badge badge-pill ml-1 azul-fondo" id="cantidad-fotos-popup"></span></h3>
<p id="parrafo-popup">
<!-- CONTENIDO DEL PÁRRAFO SE AGREGA CON JAVASCRIPT -->
</p>
<a href="javascript:void(0)" id="cerrar-popup" class="cerrar-popup"><i class="fas fa-times"></i></a>
</div>
</div>
<!--BOOTSTRAP 4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<!--SCROLLREVEAL-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--AXIOS-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--SCRIPTS-->
<script src="js/scripts.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LT0T6F676S"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-LT0T6F676S');
</script>
</body>
</html>