Plataforma Personal & Portafolio Técnico

Caso de Estudio Aplicado:

Diseño, arquitectura e implementación de una plataforma web de alto rendimiento orientada a infraestructura cloud y DevOps, construida sobre un tema hijo ligero y automatizada mediante CI/CD.

Ficha Técnica

Categoría	Detalle
Rol	Systems Administrator & Frontend Developer
Entorno / Stack	WordPress, GeneratePress Child Theme (v1.1.5), PHP 8.x, CSS Variables, GitHub Actions, SFTP
Estado	En producción (ricardoleal.cloud / ricardoleal.cloud)
Repositorio	GitHub – Personal Portfolio Child Theme

1. Contexto y Desafío Técnico

El objetivo principal era construir una plataforma de marca personal inspirada en el diseño «GitHub Console» y paneles de administración Cloud. Quise evitar maquetadores pesados (Elementor/Divi) para maximizar la velocidad de carga (Core Web Vitals), garantizando al mismo tiempo un modo oscuro nativo sin parpadeos (FOUC), integración dinámica con la API de GitHub y un pipeline de despliegue automatizado.

2. Arquitectura e Implementación

• Frontend y Sistema de Diseño: Desarrollado con GenerateBlocks y CSS3 nativo (:root y html.light-mode). Se implementó una escala tipográfica dinámica basada en clamp() y micro-interacciones hover (elevación vertical y resplandor box-shadow) sin degradación de opacidad.
• Integración Backend (GitHub REST API): Shortcode personalizado en PHP (1 ★) para consultar métricas de repositorios. El volumen de peticiones se optimizó mediante almacenamiento en caché con transients de WordPress (12 horas TTL) con purga automática vía el hook save_post.
• CI/CD Pipeline: Automatización de despliegues mediante un workflow de GitHub Actions que sincroniza cambios por SFTP hacia los entornos de Staging y Producción en Hostinger tras cada git push.

3. Desafíos Resueltos (Troubleshooting)

• Pérdida de contexto en Query Loops de Gutenberg:
  • Problema: El shortcode 1 ★ leía el ID de la página contenedora en lugar del ID de la entrada individual dentro del bucle de tarjetas.
  • Solución: Intercepción del bloque a través del filtro render_block_core/shortcode en PHP para inyectar explícitamente el postId correcto antes del renderizado.
• Incompatibilidad de layout Flexbox en WebKit (Safari):
  • Problema: Los botones de llamada a la acción y pildoras dinámicas se estiraban al 100% del ancho del contenedor en navegadores Safari para la versión de escritorio.
  • Solución: Implementación de reglas CSS avanzadas con width: fit-content !important; y align-self: center !important;.
• Indexación y SEO de Taxonomías:
  • Problema: Riesgo de contenido duplicado generado por las páginas de archivo de etiquetas.
  • Solución: Desactivación de clics mediante CSS (pointer-events: none) y aplicación de directivas noindex en los metadatos de taxonomías.

4. Resultados y Métricas

• Rendimiento: 100% de puntuación en Core Web Vitals (CLS = 0, LCP < 1.2s) debido a la ausencia de scripts redundantes.
• Automatización: Reducción del tiempo de despliegue de código de 15 minutos (manual) a menos de 45 segundos mediante GitHub Actions.
• Mantenibilidad: Arquitectura modular centralizada en style.css y functions.php, permitiendo escalabilidad limpia para futuras secciones de blog y proyectos.