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
  • 5+ 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.

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

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.
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.
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.

Actualmente aprendiendo:

  • React Fundamentos (JS)
  • NextJS Fundamentos (JS/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