Alexander Hz.

Ing. en Sistemas Informaticos

¡Hola! Soy Alexander Hernandez

Ingeniero en Sistemas Informaticos
Desarrollador Web Full Stack Jr.

Enfocado en la construcción de aplicaicones web con buen rendimiento. Mi objetivo es transformar diseños complejos en experiencias digitales rápidas, accesibles y optimizadas para el usuario final.

Ver Proyectos Contáctame
  • 8+ Meses
    aprendiendo
  • 6+ Proyectos
    completados
  • 4+ Tecnologías

Sobre mí

Fotografía de medio cuerpo de Alexander Hernandez vistiendo formal.
Alexander Hernandez - Desarrollador Web

Graduado de la Universidad de El Salvador, con enfoque en la solución de problemas mediante el uso de herramientas digitales como la inteligencia artificial para optimizar y apoyar tareas técnicas y operativas.

Poseo conocimientos en el Ciclo de Vida del Desarrollo de Software (SDLC) como análisis, diseño, gestión, desarrollo, despliegue, pruebas y documentación de sistemas informáticos. Mis principales intereses son: Análisis de sistemas, Desarrollo Web, DevOps, Cloud Computing.

Para conocer mi trayectoria completa:

📄 Ver Currículum (PDF) 📥 Descargar currículum (PDF)

"Estamos entrando en la Era de la Inteligencia... donde la infraestructura del conocimiento humano se vuelve exponencialmente más poderosa."

— Sam Altman, CEO de OpenAI

Valores

  • 🚀
    Adaptabilidad Capacidad autodidacta para integrar tecnologías emergentes
  • 🎯
    Ética Profesional Compromiso integral con la calidad y responsabilidad técnica en cada proyecto
  • 🤝
    Sinergia Liderazgo colaborativo y comunicación efectiva para el éxito del equipo
  • 📈
    Optimización Perseverancia en la mejora constante de procesos

Proyectos

A continuación se presentan algunos proyectos desarrollados como parte de mi aprendizaje en desarrollo web, enfocados en la aplicación de buenas prácticas, optimización y estructura semántica.

Captura de pantalla de la landing page de Contabilidad Florez Ver proyecto ↗
Servicios de contabilidad
Destacado

Landing Page de Contabilidad

Proyecto real para un despacho contable: le di presencia digital completa a un cliente, desde el sitio web hasta el dominio propio y el correo corporativo, dejándolo listo en producción y visible en Google.

  • Cloudflare_DNS
  • SEO_Técnico
  • HTML5
  • CSS3
  • JS

Más que una landing page: fue un proyecto integral de presencia digital para un cliente real, donde asumí tanto el desarrollo del sitio como todo lo que hay alrededor. Configuré el dominio propio, la infraestructura DNS, el despliegue con HTTPS, el correo corporativo del negocio y el SEO técnico necesario para que apareciera en Google, cubriendo el mismo ciclo que normalmente resolvería una agencia.

Lo que aprendí:

  • A llevar un sitio de principio a fin como lo haría una agencia: branding, desarrollo, infraestructura y servicios empresariales, no solo el código.
  • A entender y configurar la relación entre dominio, DNS y hosting: compra del dominio, delegación a Cloudflare y publicación con dominio propio en GitHub Pages.
  • A administrar registros DNS (A, CNAME, MX, TXT) y a habilitar HTTPS mediante el proxy/CDN de Cloudflare.
  • A montar correo corporativo sin servidor propio usando Cloudflare Email Routing, y a configurar SPF y DMARC para reducir el riesgo de suplantación.
  • A aplicar SEO técnico real (metaetiquetas, Open Graph, datos estructurados Schema.org) y a indexar el sitio en Google Search Console.
  • A integrar servicios de terceros como Formspree y WhatsApp para resolver funcionalidad de backend sin salir de un sitio estático.
Captura de pantalla de la documentación interactiva de la API de citas médicas en Swagger UI Ver proyecto ↗
Documentación interactiva de la API con Swagger UI

API REST de Citas Médicas

API REST para gestionar citas médicas: pacientes, bloques horarios, citas y auditoría, con roles, autenticación segura y documentación interactiva. Desplegada en producción con base de datos en la nube y migraciones automatizadas desde GitHub Actions.

  • Node_JS
  • Express
  • PostgreSQL
  • Prisma
  • GitHub_Actions
  • OpenAPI

Backend completo pensado como el sistema de una clínica real: los pacientes se registran y agendan o cancelan sus citas, y el personal administra pacientes, horarios y auditoría. Incluye reglas de negocio como ventanas de reserva, estados de cita con transiciones válidas y un cierre automático diario, además de un registro que guarda quién cambió y quién consultó cada dato. Lo llevé hasta producción en Render con Prisma Postgres, y la documentación se sirve desde la propia API. La demo corre en un plan gratuito, por lo que la primera carga puede tardar hasta un minuto.

Lo que aprendí:

  • A estructurar una API en Express 5 por capas (rutas, controladores, servicios, validadores y middlewares), con autorización por rol en cada ruta y errores con un formato único y códigos estables.
  • A reforzar la autenticación: contraseñas con bcrypt, JWT que se invalidan al cambiar la contraseña, rate limiting por IP, cuenta y usuario, y respuestas que no revelan si un usuario existe, ni en el login ni en el registro.
  • A modelar la base de datos con Prisma y PostgreSQL: migraciones, triggers que auditan cada cambio, restricciones de exclusión que impiden citas solapadas incluso con peticiones simultáneas y borrado lógico.
  • A automatizar el despliegue con GitHub Actions: un workflow aplica las migraciones y dispara el deploy en Render, y otro carga los datos iniciales, con los secretos en un environment protegido porque el plan gratuito no ofrece SSH.
  • A diagnosticar un problema real de producción: timeouts de conexión tras un rato de inactividad. Lo aislé con scripts de prueba independientes, comparé el motor de Prisma con el driver pg y lo resolví con su adaptador, una conexión directa y un pool propio, con logs que avisan de consultas lentas.
  • A documentar una API de forma profesional: especificación OpenAPI 3 con Swagger UI servido por la propia API, errores y ejemplos por endpoint, y una colección de Postman lista para importar.
Aplicación de notas en Markdown con editor y vista previa en tiempo real Ver proyecto ↗
Editor de Markdown con vista previa en tiempo real

Sistema de notas Markdown

Aplicación de notas en Markdown pensada para organizar contenido personal sin depender de un servidor: crear, editar, buscar y respaldar notas con una experiencia completa que funciona enteramente en el navegador.

  • HTML5
  • CSS3
  • JS

Sistema de notas con editor y vista previa lado a lado, pensado para uso diario sin depender de un servidor. Permite crear, editar, eliminar y restaurar notas, marcarlas como favoritas, filtrarlas por fecha y ordenarlas a conveniencia, además de seleccionar varias a la vez para gestionarlas en lote. Toda la información persiste en el navegador y puede respaldarse o migrarse mediante exportación e importación. La interfaz está pensada para funcionar igual de bien en mobile que en escritorio.

Lo que aprendí:

  • A implementar un CRUD completo en JavaScript vanilla , manejando el estado de la lista de notas en memoria y sincronizándolo con localStorage en cada cambio.
  • A serializar y recuperar datos estructurados con JSON.stringify y JSON.parse, incluyendo la exportación e importación de notas desde y hacia archivos .json.
  • A integrar markdown-it y markdown-it-task-lists vía CDN para convertir Markdown a HTML de forma confiable, incluyendo soporte para listas de tareas interactivas.
  • A diseñar un sistema de papelera (borrado suave) que permite restaurar o eliminar definitivamente las notas borradas.
  • A construir filtros combinados (favoritos, rango de fechas, orden) y una selección múltiple con acciones en lote sobre el mismo conjunto de datos.
  • A maquetar una interfaz completamente responsive, adaptando la navegación entre la lista y el editor para pantallas pequeñas.
Simulador web de arreglos RAID con chasis virtual de discos y comparador de niveles Ver proyecto ↗
Simulador de arreglos RAID con fallas en tiempo real

Simulador RAID

Simulador web interactivo de arreglos RAID: arma un NAS virtual, compara niveles RAID en paralelo y simula fallas de disco en tiempo real para ver si el arreglo pierde datos o los reconstruye gracias a la redundancia.

  • HTML5
  • CSS3
  • JS

Simulador pensado para entender de forma visual cómo funcionan los distintos niveles RAID. Permite armar un arreglo insertando discos de distintas capacidades en un chasis virtual, apagarlos para simular una falla física, y escribir datos para ver disco por disco dónde queda cada bloque, dónde se duplica y dónde vive la paridad. Incluye un comparador que muestra dos arreglos en paralelo bajo distintos niveles RAID (0, 1, 3, 5, 01 y 10), con capacidad útil, espacio de redundancia y estado de tolerancia a fallos actualizándose en vivo, además de una guía educativa con diagramas de cada nivel.

Lo que aprendí:

  • A modelar en JavaScript puro la lógica de un sistema complejo (tolerancia a fallos, mirroring y paridad), traduciendo conceptos reales de infraestructura en reglas de negocio dentro del código.
  • A construir una interfaz totalmente reactiva sin frameworks, sincronizando varios paneles (chasis, escritura de datos, comparador) ante cualquier cambio de estado.
  • A integrar Chart.js para convertir datos en tiempo real en gráficas y dashboards claros, una habilidad aplicable a cualquier panel administrativo.
  • A diseñar validaciones de reglas de negocio (mínimos de discos, paridad requerida) que evitan estados inválidos antes de que el usuario los provoque.
  • A maquetar una interfaz compleja y completamente responsive, manteniendo la usabilidad incluso con muchas columnas de datos en pantallas pequeñas.
Captura de pantalla de la aplicación To-Do App mostrando la lista de tareas y la barra de búsqueda Ver proyecto ↗
Lista de tareas con búsqueda, persistencia y confirmación de borrado

To-Do App con React

Aplicación de tareas construida con React y Vite: permite crear, completar, buscar y eliminar tareas con persistencia en el navegador, feedback visual según el estado y un modal de confirmación antes de borrar.

  • React_JS
  • Vite
  • HTML
  • CSS

Aplicación de tareas pensada como ejercicio para aplicar patrones típicos de una aplicación real: separar la interfaz en componentes pequeños, centralizar el estado en un único punto de la aplicación y persistir la información sin depender de un backend.

Lo que aprendí:

  • A estructurar una app en React usando Context API para compartir estado y lógica de negocio entre componentes sin prop drilling.
  • A crear hooks personalizados como useLocalStorage y useDebounce para encapsular lógica reutilizable y sincronizar el estado con el navegador.
  • A implementar búsqueda en tiempo real optimizada con debounce, normalizando el texto (tildes, mayúsculas) para comparaciones más precisas.
  • A diseñar un sistema de feedback contextual que informa al usuario sobre errores, resultados vacíos o el estado de carga inicial.
  • A construir un modal de confirmación reutilizable y desacoplado, evitando que se eliminen tareas por accidente.
  • A configurar el despliegue automático del proyecto a GitHub Pages con Vite y gh-pages.
Formulario web con múltiples campos y validaciones Ver proyecto ↗
Formulario con distintos tipos de entrada y validaciones

Formulario HTML con Validaciones

Formulario de registro que reúne prácticamente todos los tipos de input de HTML5, usado como ejercicio para dominar las validaciones nativas del navegador y construir formularios accesibles sin depender de JavaScript ni librerías externas.

  • HTML5
  • CSS3

Ejercicio pensado para llevar al límite las capacidades nativas de los formularios en HTML5: reúne más de 20 tipos de campo distintos (texto, email, rango, color, fecha, semana, mes, archivos, entre otros) en un único formulario de registro, con un diseño accesible, etiquetas flotantes y sin una sola línea de JavaScript.

Lo que aprendí:

  • A implementar validaciones nativas como required, pattern, min y max, aprovechando el comportamiento propio del navegador.
  • A estructurar formularios de forma semántica y accesible usando fieldset y legend.
  • A estilizar formularios manteniendo consistencia entre inputs, selects y botones, incluyendo estados como :focus y :valid/:invalid.
  • A usar datalist para ofrecer sugerencias de autocompletado sin necesidad de JavaScript.
Ejemplo de imágenes responsivas y contenido multimedia Ver proyecto ↗
Uso de imágenes adaptativas y elementos multimedia

Contenido Multimedia y Responsive

Página informativa sobre contenido multimedia responsive: imágenes adaptativas, video y audio en HTML5. Documenta con ejemplos funcionales las técnicas para optimizar el peso y la calidad visual del contenido según el dispositivo del usuario.

  • HTML5
  • CSS3

Proyecto pensado como una guía de referencia sobre multimedia responsive: reúne ejemplos funcionales de imágenes, video y audio que se adaptan al dispositivo del usuario, junto con tablas comparativas de formatos, pesos y resoluciones recomendadas, pensadas para consultarse en futuros proyectos.

Lo que aprendí:

  • A usar srcset y sizes para servir imágenes adaptadas según el dispositivo.
  • A implementar el elemento picture para controlar distintas versiones de una misma imagen (art direction).
  • A elegir el formato de audio/video adecuado según el caso de uso y a diferir su carga con preload para no afectar el rendimiento.
  • A investigar y documentar pesos y resoluciones recomendadas por tipo de contenido, como criterio objetivo para futuras optimizaciones.

Habilidades

Tecnologías aprendidas

  • HTML - Avanzado

    Maquetación semántica y accesible (A11y con ARIA), formularios con validación nativa, optimización de recursos multimedia (lazy loading, imágenes responsivas), datos estructurados para SEO (Schema.org) y fundamentos de PWA (manifest.json).

  • CSS - Avanzado

    Arquitectura modular BEM, metodología Mobile First, layouts fluidos con unidades relativas, maquetación con Flexbox y Grid, media queries para diseño responsivo, y animaciones y transiciones CSS.

  • JS - Avanzado

    Programación asíncrona con Promises y Async/Await, consumo de APIs REST con Fetch, manipulación dinámica del DOM, persistencia de datos en cliente con localStorage, y código modular con ES6 (import/export).

  • SEO técnico - Intermedio

    Optimización on-page (meta tags, jerarquía semántica, URLs amigables), datos estructurados (Schema.org/JSON-LD), sitemap y robots.txt, y fundamentos de Core Web Vitals para mejorar visibilidad en buscadores.

  • React JS - Intermedio

    Gestión de estado con Context API para evitar prop drilling, hooks personalizados para lógica reutilizable (persistencia en localStorage y debounce de inputs), formularios controlados con validación de campos, manejo de efectos secundarios con useEffect, y componentización con CSS modular (BEM).

  • Node.js y Express - Intermedio

    Desarrollo de APIs REST con Express 5 organizadas por capas (rutas, controladores, servicios y validadores), autenticación con JWT y bcrypt, autorización por roles, validación de entradas, manejo centralizado de errores, rate limiting y documentación con OpenAPI y Swagger UI.

  • PostgreSQL y Prisma - Intermedio

    Modelado relacional con Prisma ORM, migraciones versionadas, transacciones, paginación por cursor, borrado lógico, triggers de auditoría y restricciones de exclusión en PostgreSQL para garantizar la integridad de los datos, y despliegue con migraciones automatizadas desde GitHub Actions.

Actualmente aprendiendo:

  • NextJS Fundamentos (TS)

¿Te gustaría conectar?

Siempre estoy buscando aprender de otros desarrolladores, compartir experiencias y tal vez colaborar en proyectos interesantes.

Si deseas ponerte en contacto conmigo para oportunidades laborales, proyectos o consultas profesionales, puedes enviarme un mensaje mediante el siguiente formulario.

Formulario de contacto