CODEFEM

Liga Femenina Mexicana de Programación Competitiva

CODEFEM é a plataforma web oficial e informacional para a comunidade e liga de programação competitiva exclusiva para mulheres no México e América Latina. Projetei e desenvolvi toda a plataforma solo em cerca de 11 dias (frontend, design, testes e CI/CD).

Significado Pessoal e Design

Como desenvolvi este site para a organização do ICPC México, queria dar um toque feminino e diverso, adicionando detalhes significativos como um ícone de pinky-promise no botão de registro e efeitos interativos como o arco-íris na aurora de fundo.

Recentemente participei da Maratona Feminina de Programação na UNICAMP Brasil 2026, onde criei laços fortes. Esta experiência pessoal foi minha motivação direta para integrar português no i18n, para poder compartilhar essa importante competição (que impulsiona tanto quem já participa do ICPC quanto novas competidoras) com minhas colegas do Brasil.

Arquitetura Frontend e Filosofia "Clamp-first"

Para a responsividade, implementei uma estrita filosofia "clamp-first": usei a função matemática clamp() em CSS para cada tamanho de fonte, preenchimento, margem e largura de contêiner. As media queries são reservadas exclusivamente para composição visual (mudanças de flex-direction, reajustes de grade ou toggles de visibilidade). Isso elimina saltos abruptos de dimensionamento em diferentes telas.

O sistema de estilo segue a arquitetura ITCSS e é inteiramente baseado em tokens. Defini ~88 tokens de cores organizados por nomes semânticos. Não há cores ou tamanhos hardcoded (embutidos diretamente) no código; toda medida remete ao seu respectivo token.

Animação e Desempenho

• O Motor "Aurora": Desenvolvi um fundo animado em SVG acoplado ao scroll usando Motion. Depois de iterar de Canvas para SVG, o segredo do desempenho fluido em dispositivos móveis foi delegar os efeitos pesados (máscaras e filtros de desfoque) para o CSS acelerado por hardware (GPU), aplicando ao SVG apenas transformações simples.
• Acessibilidade (WCAG 2.1 AA): Para não excluir usuárias com distúrbios vestibulares, todo movimento decorativo é protegido por uma verificação prefers-reduced-motion: reduce, validada automaticamente.

O "Grid Hack" Cartesiano

Para composições assimétricas aparentemente difíceis de estruturar (especialmente a galeria de tiras escalonadas e ficha editorial da seção About / Event Details, assim como nas Redes Sociais), implementei um dos meus "hacks" favoritos de front-end. Em vez de usar position: absolute (que é frágil e quebra ao redimensionar a janela), envolvo a seção inteira em uma grade CSS (display: grid) de 12x12 células invisíveis sem qualquer estilo de fundo (repeat(12, 1fr) e repeat(12, minmax(0, 1fr))).

Essa grade atua como um plano cartesiano: as 4 faixas de fotos caem em cascata progressiva (1/4, 4/7, 7/10, 10/13 ocupando 4, 6, 8 e 12 linhas) enquanto os blocos de texto e especificações se ancoram com exatidão abaixo. A mágica desta técnica é que ela é nativamente adaptável; à medida que a viewport diminui, as células da grade diminuem proporcionalmente e o layout mantém seu posicionamento relativo perfeito sem a necessidade de cálculos de porcentagem ou de reposicionamento doloroso.

Automação e "Hooks" do Git

Integrei git hooks estritos (usando Husky e lint-staged) no meu pipeline de pré-commit. Um dos meus scripts cruciais aqui (check-i18n.ts) faz a integração falhar se houver qualquer chave ou texto alternativo (alt-text) faltando em qualquer um dos três idiomas (ES, EN, PT). Isso garante 100% de paridade e evita dessincronizações de conteúdo.