CODEFEM

Liga Femenina Mexicana de Programación Competitiva

CODEFEM is the official web platform and informational hub for the competitive-programming league created exclusively for women in Mexico and Latin America. I designed and built the entire platform solo in ~11 days, taking full ownership of design, frontend architecture, testing, and CI/CD deployment.

Personal Meaning & Design

Since I developed this site for the ICPC Mexico organization, I wanted to give it a feminine and diverse touch. I included meaningful details like a pinky-promise icon on the registration button and interactive effects like a rainbow in the background aurora.

I recently participated in the Maratona Feminina de Programação at UNICAMP Brasil 2026, where I built strong bonds. This personal experience was my direct motivation to integrate Portuguese into the i18n system, allowing me to share this important competition (which empowers both current ICPC participants and newcomers) with my colleagues from Brazil.

Frontend Architecture & “Clamp-first” Philosophy

For responsiveness, I strictly followed a “clamp-first” philosophy: the CSS clamp() function dictates every font size, padding, margin, and container width. Media queries are reserved exclusively for macro-level visual composition (e.g., flex-direction shifts, grid column counts, or visibility toggles). This approach guarantees buttery-smooth, fluid scaling across all devices without abrupt breakpoint jumps.

The styling follows an ITCSS architecture backed by a comprehensive token system. By defining ~88 color tokens and semantic variables, I ensured there are zero hardcoded values in the codebase.

Animation & Performance

• The “Aurora” Engine: I built a custom scroll-driven background using Motion. After iterating from Canvas to SVG, the breakthrough for mobile performance was moving the expensive rendering work (masks and blurs) to GPU-accelerated CSS filters, applying only lightweight transforms to the SVGs.
• Accessibility (WCAG 2.1 AA): To respect users with vestibular disorders, all decorative animation is gated behind a prefers-reduced-motion check, strictly validated by automated axe-core audits.

The Cartesian “Grid Hack”

To handle seemingly complex and asymmetric compositions (specifically the stepped photo ribbon gallery and editorial spec sheet in the About / Event Details section, as well as Social Media nodes), I employed one of my favorite advanced layout hacks. Instead of relying on position: absolute (which is famously fragile and easily breaks on viewport resize), I wrap the entire section in an invisible 12x12 CSS grid (display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, minmax(0, 1fr));).

This grid functions perfectly as a Cartesian plane: the 4 photo ribbons cascade down with increasing heights (1/4, 4/7, 7/10, 10/13 spanning 4, 6, 8, and 12 rows) while the headers, narrative copy, and specs anchor cleanly underneath. The beauty of this technique is that it is natively responsive. As the viewport shrinks, the grid cells automatically scale down proportionally, and the layout effortlessly maintains its exact relative positioning without requiring messy percentage calculations or painful resizing patches.

Git Hooks & Automation

I set up rigorous pre-commit git hooks using Husky and lint-staged. A standout piece of tooling I wrote is the check-i18n.ts script, which instantly fails the build if any translation key or image alt-text is missing across the three locales (ES, EN, PT). This enforces 100% language parity dynamically, ensuring the site never drifts out of sync.