Campeonato Nacional de Programación CompetitivaAño: 2026 | Commit: fe28bef
Final Regional México ICPC 2026
Diseñé y construí la plataforma insignia bilingüe para la Final Regional México ICPC 2026 con sede en ESCOM IPN, con una ventana hero poligonal en perspectiva 3D, botones magnéticos con física de resortes y arquitectura fluida con cero CLS.
Astro 5React 19TypeScriptMotionWCAG 2.2 AAA
Telemetría de Ingeniería Verificada y Métricas de Impacto
- Contraste WCAG AAA
- 14.2:1
- Relación de contraste verificada entre primer plano y superficie en tipografía principal.
- Profundidad de Nodos DOM
- < 420 nodos
- Mantenido muy por debajo del presupuesto de rendimiento de 800 nodos en Lighthouse.
- Desplazamiento Acumulado (CLS)
- 0.000
- Cero desplazamiento visual mediante reserva de aspecto y fuentes de respaldo ajustadas.
Arquitecto Frontend Principal
Arquitectura Integral de Plataforma, Ingeniería de UI y Auditoría de A11Y
- Diseñé e implementé la ventana Hero con un polígono biselado, inclinación 3D acelerada por hardware según el puntero y selección ponderada de fotos.
- Desarrollé primitivas de botones magnéticos amortiguados por resorte con desactivación automática ante prefers-reduced-motion.
- Establecí tokens fluidos estrictos basados en clamp() para tipografía y espaciado en inglés y español.
src/components/ui/magnet.ts
export function magnetVector(
rect: { left: number; top: number; width: number; height: number },
clientX: number,
clientY: number,
strength: number
): { x: number; y: number } {
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const dx = clientX - centerX;
const dy = clientY - centerY;
const distance = Math.hypot(dx, dy);
if (distance === 0 || strength === 0) return { x: 0, y: 0 };
const pull = strength / (distance + strength);
return { x: dx * pull, y: dy * pull };
}