CODEFEM

Liga Femenina Mexicana de Programación Competitiva

CODEFEM es la plataforma web oficial e informacional para la comunidad y liga de programación competitiva exclusiva para mujeres en México y Latinoamérica. Diseñé y construí toda la plataforma en solitario en aproximadamente 11 días (frontend, diseño, pruebas y CI/CD).

Significado Personal y Diseño

Como desarrollé este sitio para la organización de ICPC México, quería darle un toque femenino y diverso, añadiendo detalles significativos como un ícono de pinky-promise en el botón de registrarse y efectos interactivos como el arcoíris en la aurora de fondo.

Recientemente participé en la Maratona Feminina de Programação na UNICAMP Brasil 2026, donde forjé lazos fuertes. Esta experiencia personal fue mi motivación directa para integrar portugués en el i18n, de forma que pudiera compartir esta importante competencia (que impulsa tanto a quienes ya participan en ICPC como a nuevas competidoras) con mis compañeras de Brasil.

Arquitectura Frontend y Filosofía "Clamp-first"

Para la responsividad, implementé una estricta filosofía "clamp-first": utilicé la función matemática clamp() en CSS para cada tamaño de fuente, padding, margen y anchos de contenedores. Las media queries están reservadas exclusivamente para la composición visual (cambios de flex-direction, reajustes en el número de columnas del grid o toggles para mostrar/ocultar elementos). Esto elimina los saltos abruptos de tamaño en diferentes pantallas.

El sistema de estilos sigue la arquitectura ITCSS y está totalmente basado en tokens. Definí ~88 tokens de colores agrupados bajo nombres semánticos. No existen colores ni tamaños harcodeados en el código; cada medida remite a su respectivo token.

Animación y Rendimiento

• El Motor "Aurora": Desarrollé un fondo animado en SVG ligado al scroll usando Motion. Tras iterar desde Canvas hasta SVG, la clave para un rendimiento óptimo en móviles fue descargar los efectos pesados (máscaras y filtros blur) hacia el CSS acelerado por GPU, aplicando al SVG únicamente transformaciones simples (GPU-friendly).
• Accesibilidad (WCAG 2.1 AA): Para no excluir a usuarias con trastornos vestibulares, todo el movimiento decorativo está protegido por un chequeo prefers-reduced-motion: reduce, validado de forma automatizada.

El "Grid Hack" Cartesiano

Para composiciones asimétricas aparentemente difíciles de maquetar (especialmente la galería en tiras escalonadas y ficha editorial de la sección About / Event Details, así como en Redes Sociales), implementé uno de mis "hacks" preferidos de maquetación avanzada. En lugar de usar position: absolute (lo cual es frágil y se rompe al hacer resize), envuelvo la sección completa en una cuadrícula CSS (display: grid) de 12x12 celdas invisibles sin ningún estilo base (repeat(12, 1fr) y repeat(12, minmax(0, 1fr))).

Esta cuadrícula funciona como un plano cartesiano: las 4 tiras de fotos caen en cascada progresiva (1/4, 4/7, 7/10, 10/13 abarcando 4, 6, 8 y 12 filas) mientras los bloques de texto y fichas técnicas se anclan con precisión debajo. La magia de esta técnica es que es nativamente adaptativa; al reducir el tamaño del viewport, las celdas de la cuadrícula disminuyen su tamaño proporcionalmente y el diseño mantiene su posición relativa perfecta sin necesidad de cálculos mágicos de porcentajes ni reposicionamientos dolorosos.

Automatización y "Hooks" de Git

Integré estrictos git hooks (usando Husky y lint-staged) en mi pipeline antes de cada commit. Uno de mis desarrollos más importantes aquí fue un script (check-i18n.ts) que hace fallar la integración si falta cualquier clave o texto alternativo (alt-text) en alguna de las tres lenguas (ES, EN, PT). Esto asegura una paridad del 100% y previene que el contenido se desfase.