Vekta Ventanas
Tema hijo a medida para WordPress y GeneratePress concebido para una marca conceptual de cerramientos arquitectónicos Passivhaus de alta gama. Combina una dirección de arte editorial suiza con tipografía colosal (Syne Display, Plus Jakarta Sans y JetBrains Mono), animaciones GSAP con ScrollTrigger y smooth scroll con Lenis, una cortina desplegable interactiva de laboratorio y simuladores en tiempo real (osciloscopio acústico y calculadora de transmitancia térmica con deducción en el IRPF).
El reto
El reto
El ecosistema de temas para WordPress y sitios web del sector de la construcción suele estar saturado de constructores visuales pesados (Elementor, Divi), tipografías genéricas de IA y plantillas prediseñadas que penalizan el rendimiento, la accesibilidad y la identidad de marca.
El reto consistió en concebir y programar un tema hijo modular y ultraligero para GeneratePress que demostrara que WordPress puede ser el motor de experiencias web contemporáneas de máximo nivel estético: dirección de arte editorial mineral inspirada en publicaciones de arquitectura internacional, microinteracciones fluidas a 60 FPS con GSAP y Lenis, y utilidades interactivas avanzadas de cálculo físico sin recurrir a plugins pesados de terceros.
Lo que hice
Lo que hice
Arquitectura de tema hijo en WordPress: Desarrollé el child theme con una plantilla modular para front-page.php, hooks limpios en functions.php para encolado condicional de estilos/scripts y compatibilidad total con WordPress Playground CLI para ejecutar el stack completo sin necesidad de Docker ni MySQL local.
Dirección de arte editorial y tokens de diseño: Establecí una paleta mineral austera (Caliza, Grafito, Plomo, Pino Passivhaus y Fósforo técnico) sobre una rejilla asimétrica de 12 columnas. Configuré un sistema tipográfico de tres niveles: Syne Display para titulares monumentales, Plus Jakarta Sans para lectura fluida y JetBrains Mono para acotaciones y fichas de ingeniería.
Ingeniería de interacción y motion: Integré GSAP 3 con ScrollTrigger y Lenis para scroll suave desacoplado. Diseñé una cortina deslizable de laboratorio a pantalla completa que desciende al posar el cursor en el margen superior (`Y ≤ 18px`), transiciones hover dinámicas de escala de grises a color real (+4% zoom) y seguimiento de cursor láser de alta precisión con quickTo.
Herramientas interactivas en JavaScript: Programé un osciloscopio acústico interactivo ("El Freno Acústico") que amortigua visualmente una onda sonora de 85 dB a 18 dB simulando el triple acristalamiento laminar, y un interpolador paramétrico que calcula en tiempo real la transmitancia térmica ($U_w$), el ahorro anual en climatización y las deducciones del IRPF (hasta el 60% bajo Real Decreto-ley 19/2021).
Resultado
Resultado
Vekta Ventanas demuestra cómo aunar la solidez del CMS más extendido del mundo con estándares contemporáneos de diseño editorial, ingeniería de interacción y optimización extrema de assets. El proyecto cuenta con un despliegue estático de alta velocidad en vekta-ventanas.vercel.app y repositorio con código abierto en GitHub (moisesvalero/vekta-ventanas).
La suite de pruebas automatizadas con Playwright certifica el funcionamiento del DOM, la reactividad de los simuladores matemáticos, la ausencia de enlaces rotos y una consola de JavaScript 100% limpia.
Stack tecnológico