-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
372 lines (352 loc) · 21.8 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
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Metadatos básicos -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Descripción y palabras clave para SEO -->
<meta name="description"
content="Ingeniero en Informática con Máster en Comercio Electrónico. Especialista en consultoría y desarrollo de soluciones tecnológicas, gestión de sistemas, seguridad informática y proyectos innovadores. Interesado en ciencia de datos, programación en Java y Python, y desarrollo backend.">
<meta name="keywords"
content="Ingeniero en Informática, Consultoría Tecnológica, Desarrollo Backend, Java, Python, Ciencia de Datos, Seguridad Informática, Gestión de Sistemas, Redes, Proyectos Innovadores, Comercio Electrónico">
<meta name="author" content="José Antonio Azócar Marcano">
<meta name="robots" content="index, follow">
<!-- Open Graph para redes sociales -->
<meta property="og:title"
content="José Antonio Azócar Marcano - Portafolio Profesional | Ingeniero en Informática & Especialista en Consultoría IT">
<meta property="og:description"
content="Ingeniero en Informática con Máster en Comercio Electrónico. Especializado en consultoría y desarrollo de soluciones tecnológicas, gestión de sistemas, redes, seguridad informática y proyectos innovadores.">
<meta property="og:image" content="https://azocar.one/assets/img/projects/portafolio.png">
<meta property="og:url" content="https://azocar.one">
<meta property="og:type" content="website">
<!-- Título optimizado -->
<title>José Antonio Azócar Marcano - Portafolio Profesional | Ingeniero en Informática & Especialista en Consultoría
IT</title>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="./assets/img/favicon/favicon.svg">
<link rel="icon" type="image/png" href="./assets/img/favicon/favicon.png">
<!-- "Google Fonts": Raleway -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700;900&display=swap">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/76f0e7f5f8.js" crossorigin="anonymous"></script>
<!-- Estilos de terceros (vendor) -->
<link rel="stylesheet" href="./css/vendor/normalize.css">
<link rel="stylesheet" href="./css/vendor/reset.css">
<link rel="stylesheet" href="./css/vendor/solid.min.css">
<link rel="stylesheet" href="./css/vendor/regular.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<!-- Estilos personalizados -->
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/profile.css">
<link rel="stylesheet" href="./css/about.css">
<link rel="stylesheet" href="./css/services.css">
<link rel="stylesheet" href="./css/education.css">
<link rel="stylesheet" href="./css/projects.css">
<link rel="stylesheet" href="./css/contact.css">
<link rel="stylesheet" href="./css/footer.css">
</head>
<body>
<!-- Header - Navbar -->
<header class="header" aria-labelledby="site-title">
<div class="header__container">
<h1 id="site-title" class="header__title">Portafolio</h1>
<nav class="header__nav" aria-label="Navegación principal">
<ul class="header__menu">
<li class="header__menu-item">
<a class="header__menu-link" href="#about">Sobre Mí</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="#services">Asesorías</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="#education">Formación</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="#projects">Challenges</a>
</li>
<li class="header__menu-item header__menu-item--contact">
<a class="header__menu-link" href="#contact">Contacto</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="main">
<!-- Perfil -->
<section class="main__section profile" data-aos="fade-down" aria-labelledby="profile-name">
<div class="profile__container">
<img class="profile__image" src="./assets/img/logos/azocarone.svg" alt="José Antonio Azócar Marcano"
aria-hidden="true">
<div class="profile__content">
<h2 id="profile-name" class="profile__name">José Antonio Azócar Marcano</h2>
<h3 class="profile__title">
Informática | Ciberseguridad | Datascience | Java/Python Dev | Backend | Troubleshooting
</h3>
<ul class="profile__links">
<li>
<a class="profile__link" href="https://azocarone.github.io/curriculum" target="_blank"
rel="noopener noreferrer" aria-label="Ver currículum de José Antonio Azócar Marcano">
Currículum
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- Sobre Mí -->
<section class="main__section about" id="about" data-aos="fade-up" aria-labelledby="about-title">
<h2 id="about-title" class="about__title">Sobre Mí ...</h2>
<p class="about__description">Ingeniero en Informática, con un Máster en Comercio Electrónico, cuento con
una extensa trayectoria en Tecnologías de la Información. Mi experiencia se enfoca en la consultoría y
el desarrollo de soluciones tecnológicas para empresas y particulares, destacando la gestión de
sistemas, redes, seguridad informática y proyectos innovadores.</p>
<p class="about__description">Mis áreas de interés abarcan la ciencia de datos, la programación en Java y
Python, y el desarrollo backend. Me distingo por mi notable capacidad de adaptación, mi destreza en la
resolución de problemas y mi firme compromiso con la mejora continua.</p>
</section>
<!-- Asesorías IT -->
<section class="main__section services" id="services" data-aos="fade-up" aria-labelledby="services-title">
<h2 id="services-title" class="services__title">Asesorías IT</h2>
<ul class="services__list">
<li class="services__item" data-aos="flip-left">
<i class="services__item-icon fas fa-lightbulb fa-2x" aria-hidden="true"></i>
<h3 class="services__item-title">Informática</h3>
<p class="services__item-description">Administración de servidores y estaciones de trabajo con
GNU/Linux, garantizando un rendimiento óptimo y alta disponibilidad. Además, se desarrollan
soluciones con Raspberry Pi y Arduino, permitiendo la creación de aplicaciones de Internet de
las Cosas (IoT).</p>
</li>
<li class="services__item" data-aos="flip-left">
<i class="services__item-icon fas fa-shield-alt fa-2x" aria-hidden="true"></i>
<h3 class="services__item-title">Ciberseguridad</h3>
<p class="services__item-description">Diseño e implementación de estrategias para mitigar riesgos y
asegurar la continuidad operativa de la infraestructura informática, abarcando el análisis
forense y la respuesta inmediata a incidentes. Con ello, se garantiza la integridad,
confidencialidad y disponibilidad de los datos del cliente.</p>
</li>
<li class="services__item" data-aos="flip-left">
<i class="services__item-icon fas fa-chart-line fa-2x" aria-hidden="true"></i>
<h3 class="services__item-title">Datascience</h3>
<p class="services__item-description">Desarrollo de soluciones basadas en el análisis de datos, con
el propósito de optimizar procesos y robustecer la toma de decisiones estratégicas. Para
lograrlo, se utiliza Python en la generación de modelos predictivos, análisis estadístico y
visualización de datos.
</p>
</li>
<li class="services__item" data-aos="flip-left">
<span class="services__item-icon">
<i class="services__item-icon fab fa-java fa-2x" aria-hidden="true"></i>
<i class="services__item-icon fab fa-python fa-2x" aria-hidden="true"></i>
</span>
<h3 class="services__item-title">Java/Python Developer</h3>
<p class="services__item-description">Programación de aplicaciones robustas y escalables,
personalizadas según las necesidades del cliente. Para su implementación, se utiliza Java en
sistemas de alto rendimiento y Python en la automatización de procesos y el análisis de datos,
asegurando en todo momento un código limpio y eficiente.</p>
</li>
<li class="services__item" data-aos="flip-left">
<i class="services__item-icon fas fa-server fa-2x" aria-hidden="true"></i>
<h3 class="services__item-title">Backend</h3>
<p class="services__item-description">Diseño y optimización de la lógica, las bases de datos y las
interfaces de comunicación entre sistemas y servicios, para asegurar un rendimiento eficiente,
una integración fluida y la escalabilidad en el uso de los datos del modelo de negocio.</p>
</li>
<li class="services__item" data-aos="flip-left">
<i class="services__item-icon fas fa-cogs fa-2x" aria-hidden="true"></i>
<h3 class="services__item-title">Troubleshooting</h3>
<p class="services__item-description">Resolución eficaz de incidentes informáticos, mediante un
análisis exhaustivo y un diagnóstico preciso de problemas de hardware, software y redes,
asegurando así la continuidad operativa y la satisfacción del cliente.</p>
</li>
</ul>
</section>
<!-- Educación -->
<section class="main__section education" id="education" data-aos="fade-up" aria-labelledby="education-title">
<h2 id="education-title" class="education__title">Formación Académica</h2>
<ul class="education__list">
<li class="education__item" data-item-id="uc3m">
<div class="education__logo" data-logo-id="uc3m">
<img class="education__logo-image" src="./assets/img/logos/uc3m.png"
alt="Logo Universidad Carlos III de Madrid">
</div>
<h3 class="education__institution">Univ. "Carlos III de Madrid"</h3>
<h4 class="education__degree">Mtr. en Comercio Electrónico</h4>
</li>
<li class="education__item" data-item-id="uah">
<div class="education__logo" data-logo-id="uah">
<img class="education__logo-image" src="./assets/img/logos/uah.png"
alt="Logo Universidad Alejandro de Humboldt">
</div>
<h3 class="education__institution">Univ. "Alejandro de Humboldt"</h3>
<h4 class="education__degree">Ing. en Informática</h4>
</li>
<li class="education__item" data-item-id="iunp">
<div class="education__logo" data-logo-id="iunp">
<img class="education__logo-image" src="./assets/img/logos/iunp.png"
alt="Logo Instituto Universitario de Nuevas Profesiones">
</div>
<h3 class="education__institution">Inst. Univ. de "Nuevas Profesiones"</h3>
<h4 class="education__degree">TSU. en Computación</h4>
</li>
</ul>
</section>
<!-- Proyectos -->
<section class="main__section projects" id="projects" data-aos="fade-up" aria-labelledby="projects-title">
<h2 id="projects-title" class="projects__title">Challenges</h2>
<ul class="projects__list">
<!-- Portafolio -->
<li class="projects__item">
<img class="projects__image" src="./assets/img/projects/portafolio.png"
alt="Portafolio - Vitrina online de un Profesional IT">
<div class="projects__info">
<h3 class="projects__name">Portafolio</h3>
<p class="projects__description">Vitrina online de un Profesional IT.</p>
<div class="projects__keypad">
<a class="projects__button" href="https://github.com/azocarone/portafolio" target="_blank"
rel="noopener noreferrer" aria-label="Ver código en GitHub">
<i class="fab fa-github"></i> GitHub
</a>
<a class="projects__button" href="https://azocar.one" target="_blank"
rel="noopener noreferrer" aria-label="Ver demo del proyecto">
<i class="fas fa-eye"></i> Demo
</a>
</div>
</div>
</li>
<!-- Currículum -->
<li class="projects__item">
<img class="projects__image" src="./assets/img/projects/curriculum.png"
alt="Currículum - CV digital: Estilo Harvard, multilingüe, JS">
<div class="projects__info">
<h3 class="projects__name">Currículum</h3>
<p class="projects__description">CV digital: Estilo Harvard, multilingüe, JS.</p>
<div class="projects__keypad">
<a class="projects__button" href="https://github.com/azocarone/curriculum" target="_blank"
rel="noopener noreferrer" aria-label="Ver código en GitHub">
<i class="fab fa-github"></i> GitHub
</a>
<a class="projects__button" href="https://azocarone.github.io/curriculum/" target="_blank"
rel="noopener noreferrer" aria-label="Ver demo del proyecto">
<i class="fas fa-eye"></i> Demo
</a>
</div>
</div>
</li>
<!-- Juego del Ahorcado -->
<li class="projects__item">
<img class="projects__image" src="./assets/img/projects/ahorcado.png"
alt="Juego del Ahorcado - Clásico del lápiz y papel, versión web">
<div class="projects__info">
<h3 class="projects__name">Juego del Ahorcado</h3>
<p class="projects__description">Clásico del lápiz y papel, versión web.</p>
<div class="projects__keypad">
<a class="projects__button" href="https://github.com/azocarone/ahorcado" target="_blank"
rel="noopener noreferrer" aria-label="Ver código en GitHub">
<i class="fab fa-github"></i> GitHub
</a>
<a class="projects__button" href="https://azocarone.github.io/ahorcado" target="_blank"
rel="noopener noreferrer" aria-label="Ver demo del proyecto">
<i class="fas fa-eye"></i> Demo
</a>
</div>
</div>
</li>
</ul>
</section>
<!-- Contacto -->
<section class="main__section contact" id="contact" data-aos="fade-up">
<div class="contact__header">
<h2 class="contact__title">Contacto</h2>
<p class="contact__description">¿Necesita un especialista en Tecnologías de la Información para su
próximo proyecto?</p>
<p class="contact__description">Le invito a completar el formulario. A la brevedad, me comunicaré con
usted para concertar una entrevista, en la cual analizaremos sus requerimientos y el valor que mi
experiencia puede aportar a su iniciativa.</p>
</div>
<div class="contact__content">
<img class="contact__image" src="./assets/img/contact/wfh_02.png"
alt="Imagen de contacto - Working from home">
<form class="contact__form" action="#" method="POST" name="form" aria-label="Formulario de contacto">
<fieldset class="contact__fieldset" aria-label="Formulario de Contacto">
<div class="contact__field">
<label class="contact__label" for="nombre">Nombre</label>
<input class="contact__input" type="text" id="nombre" name="nombre"
placeholder="Nombre completo." required pattern="^(?!\s*$).+" maxlength="50"
data-tipo="nombre">
<span class="contact__error" role="alert"></span>
</div>
<div class="contact__field">
<label class="contact__label" for="email">e-mail</label>
<input class="contact__input" type="email" id="email" name="email"
placeholder="Dirección de correo." required data-tipo="email">
<span class="contact__error" role="alert"></span>
</div>
<div class="contact__field">
<label class="contact__label" for="asunto">Asunto</label>
<input class="contact__input" type="text" id="asunto" name="asunto"
placeholder="Motivo de su contacto." required pattern="^(?!\s*$).+" maxlength="50"
data-tipo="asunto">
<span class="contact__error" role="alert"></span>
</div>
<div class="contact__field">
<label class="contact__label" for="mensaje">Mensaje</label>
<textarea class="contact__input contact__input--textarea" id="mensaje" name="mensaje"
placeholder="Escriba su mensaje." required rows="6" maxlength="300"
data-tipo="mensaje"></textarea>
<span class="contact__error" role="alert"></span>
</div>
</fieldset>
<button class="contact__button" type="submit" disabled>Enviar mensaje</button>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer" aria-label="Pie de página">
<h2 class="footer__title">Portafolio</h2>
<ul class="footer__social-list">
<li>
<a class="footer__social-link" href="https://www.linkedin.com/in/azocarone" target="_blank"
rel="noopener noreferrer" aria-label="LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
<a class="footer__social-link" href="https://github.com/azocarone" target="_blank"
rel="noopener noreferrer" aria-label="GitHub">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a class="footer__social-link" href="https://www.x.com/azocarone" target="_blank"
rel="noopener noreferrer" aria-label="x-twitter">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a class="footer__social-link" href="https://www.instagram.com/azocarone" target="_blank"
rel="noopener noreferrer" aria-label="Instagram">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
<div class="footer__copyright">
<p class="footer__copyright-text">
© 2022-2025 José Antonio Azócar Marcano. Todos los derechos reservados.
</p>
<img class="footer__copyright-logo" src="./assets/img/logos/azocarone.svg"
alt="Logo José AZÓCAR (azocarone)">
</div>
</footer>
<!-- Script JavaScript -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="./js/aos.js" type="module"></script>
<script src="./js/education.js" type="module"></script>
<script src="./js/contact.js" type="module"></script>
</body>
</html>