Esta página documenta las decisiones técnicas detrás del sitio: qué herramientas se usaron, qué funcionalidades se investigaron, cómo se probaron y por qué. El portafolio está construido sobre WordPress con código propio en cada página (HTML y CSS, sin plantillas prediseñadas) y esta bitácora está armada con Elementor.
Cada página del libro es un estado de un grupo de botones de opción ocultos (input type="radio"). Las flechas son etiquetas (label) que activan el estado siguiente o el anterior, y el CSS muestra solo la página activa con :checked. Se usa en el proceso de Paranoia (38 fotos en pliegos, con portada y contraportada) y en las fichas técnicas de Índigo y Entre capas.
La portada del flipbook de Paranoia tiene 35 zonas invisibles sobre el ojo. Con el selector :has(), la zona sobre la que está el cursor mueve la pupila a una posición distinta; cuando el cursor sale, el ojo vuelve a mirar de lado a lado con una animación.
“Proyectos +” se abre con :hover y :focus-within (también con el teclado). Un puente invisible de 18 px evita que el menú se cierre al bajar el cursor, y se alinea a la derecha para no salirse de la pantalla.
Todas con @keyframes de CSS: el efecto glitch y de máquina de escribir del nombre, la cinta de texto debajo de cada portada, la tira de fotos de las galerías, la galería animada de Índigo, el parpadeo de las ilustraciones de Paranoia y la animación de carga “Imprimiendo”. Respetan la opción del sistema de reducir el movimiento (prefers-reduced-motion).
El aspecto de fotocopia de Paranoia se logra con modos de fusión (mix-blend-mode); las máscaras (mask) recortan formas como la pupila del ojo, y clip-path recorta piezas del collage y de los afiches de Cotidianidades.
Las imágenes se convirtieron a WebP y se cargan a medida que se baja por la página (loading="lazy"). Los videos de portada se recodificaron sin audio y con menos peso: por ejemplo, el de Entre capas pasó de 4.2 MB a 1.9 MB sin diferencia visible.
Favicon propio (una A con un hilo que la cruza) y etiquetas Open Graph para que cada enlace muestre título, descripción e imagen al compartirse en WhatsApp, Instagram o LinkedIn.
Cada proyecto tiene su propio lenguaje visual —la fotocopia de Paranoia, la porcelana de Índigo, los afiches de Cotidianidades, las capas de Entre capas— y una plantilla no permitía construir algo así. Lo que no cambia es el marco: el mismo menú, el mismo cierre de contacto, la misma paleta y las mismas tipografías en todas las páginas.
Todas las interacciones se resolvieron solo con HTML y CSS. Así los bloques de WordPress no pierden funcionalidades al guardarse, las páginas cargan más rápido y todo sigue funcionando aunque el navegador bloquee scripts.
Elementor se usó para esta página porque sus widgets (contadores, acordeón, listas, animaciones de entrada) sirven bien para presentar información, sin rehacer las páginas de proyecto que ya estaban construidas.
MDN Web Docs — selectores :checked y :has(), @keyframes, mask, mix-blend-mode, clip-path.
Manual de la API REST de WordPress — publicar y comparar páginas desde scripts.
Centro de ayuda de Elementor — contenedores, widgets y animaciones de entrada.
Google Fonts — DM Mono, Instrument Serif y Anton.
Pantone Color Finder — códigos de las paletas de Paranoia e Índigo.
Protocolo Open Graph — vista previa al compartir enlaces.
web.dev — carga diferida de imágenes y optimización de video.
El portafolio se construyó por etapas. WordPress guarda una versión con fecha y hora cada vez que se publica una página, y esos registros están en el servidor, así que incluyen lo trabajado desde cualquier equipo. El primer registro es del 21 de agosto de 2026; estos datos tienen corte al 9 de noviembre de 2026.
Cómo leer estos datos. Una versión es un guardado, no una hora de trabajo, y una misma publicación puede guardar varias páginas a la vez.
Horas de trabajo. Sumando los dos equipos con registro de sesiones constan unas 62 horas activas: unas 49 horas en un equipo (del 7 de septiembre al 9 de noviembre de 2026, repartidas en 22 días y con unas 560 instrucciones) y cerca de 13 horas en el otro (del 25 de octubre al 9 de noviembre, con más de 200 instrucciones). Son horas activas estimadas a partir de los registros de las sesiones de trabajo con la inteligencia artificial —el tiempo entre mensajes, sin contar pausas de más de 15 minutos—, y no incluyen bocetos, confección, sesiones de fotos ni el trabajo que no dejó registro.
Parte del desarrollo se hizo con asistencia de inteligencia artificial (Claude Code), a partir de las instrucciones, correcciones, textos, fotografías e ilustraciones de Alejandra Arango. Cada cambio queda anotado en un historial técnico con 62 entradas.
Hablemos
© 2026 Alejandra Arango. Todos los derechos reservados. Los textos, imágenes y diseños de este portafolio no pueden copiarse ni usarse sin autorización.