Abre um documento PDF em uma nova guia. Documentos PDF podem ter limitações de acessibilidade; uma versão em HTML é recomendada quando disponível.
Estudos de Caso Arquitetônicos

Engenharia de Componentes Hero

Arquiteturas de produção detalhadas com tokens fluidos clamp, projeção 3D acelerada por hardware e conformidade WCAG 2.2 Nivel AAA.

Campeonato Nacional de Programação CompetitivaAno: 2026 | Commit: fe28bef

Final Regional do México ICPC 2026

Arquitetei e construí a plataforma principal bilíngue para a Final Regional México ICPC 2026 sediada na ESCOM IPN, apresentando uma janela hero chanfrada em perspectiva 3D, botões magnéticos com física de molas e arquitetura de tokens fluidos com zero CLS.

Astro 5React 19TypeScriptMotionWCAG 2.2 AAA
ICPC México

Final Regional México ICPC 2026

Os melhores programadores universitários do México disputam o título, troféus e uma vaga na Final Latino-Americana.

Estudantes competindo na Final Mexicana ICPC 2026
Final Mexicana 2026

Telemetria de Engenharia Verificada e Métricas de Impacto

Contraste WCAG AAA
14.2:1
Relação de contraste verificada entre primeiro plano e superfície na tipografia principal.
Profundidade de Nós DOM
< 420 nós
Mantido bem abaixo do orçamento de desempenho de 800 nós no Lighthouse.
Deslocamento Cumulativo (CLS)
0.000
Zero deslocamento de layout com reserva de aspect-ratio e fallbacks tipográficos calibrados.

Arquiteto Frontend Líder

Arquitetura Ponta a Ponta de Plataforma, Engenharia de UI e Auditoria de A11Y

  • Projetei e implementei a janela Hero com polígono chanfrado, inclinação 3D acelerada por hardware via ponteiro e seleção ponderada de fotos.
  • Desenvolvi primitivas de botões magnéticos amortecidos com desativação automática sob prefers-reduced-motion.
  • Estabeleci tokens fluidos rigorosos baseados em clamp() para tipografia e espaçamento nas versões em inglês e espanhol.
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 };
}
Plataforma de Treinamento Algorítmico IntensivoAno: 2026 | Commit: a49c21d

Training Camp México (TCMX) 2026

Arquitetei a plataforma web neo-brutalista de alto contraste para o Training Camp México 2026 no ITESO, introduzindo um emblema com fragmentação de viewBox SVG em quadrantes 2x2 e desdobramento 3D em perspectiva escalonada.

AstroTailwind CSS v4SVG GeometryIntersectionObserverWCAG AAA
Sequência: T para M para X para CSobreposição Escalonada de 350ms

Fragmentação SVG em Quadrantes e Desdobramento 3D

Recorta um espaço vetorial unificado em quatro células de perspectiva independentes (T, M, X, C) que se desdobram sequencialmente ao entrar na viewport.

Telemetria de Engenharia Verificada e Métricas de Impacto

Competidores Inscritos
180+
Participantes da divisão nacional ICPC nas categorias Iniciante e Avançada.
Cadência de Desdobramento
350 ms
Sobreposição calculada (500ms de duração menos 150ms de sobreposição) para rotação 3D contínua.
Violações Pa11y e Axe
0
Zero violações de acessibilidade em superfícies claras e de alto contraste.

Engenheiro Principal de Sistemas de UI

Tokenização de Design System, Engenharia de Movimento SVG, Matriz de Cronograma

  • Criei a coreografia de desdobramento do emblema SVG em quatro quadrantes (T para M para X para C) com overshoot elástico cubic-bezier.
  • Implementei gatilhos de viewport com IntersectionObserver combinados com resolução instantânea de estado de repouso para usuários com redução de movimento.
  • Construí blocos semânticos de estatísticas com listas de definição e matrizes responsivas de horários com bordas de deslocamento sólido.
src/components/LogoTCMX.astro
.logo-tcmx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  perspective: 800px;
  --anim-duration: 0.5s;
  --overlap: 0.15s;
  --stagger: calc(var(--anim-duration) - var(--overlap));
  --anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}
Mulheres Latino-Americanas em Programação CompetitivaAno: 2026 | Commit: 8c71e4a

Liga Competitiva CODEFEM 2026

Engenharia individual completa da plataforma trilíngue (ES, EN, PT) para a Liga Feminina Mexicana de Programação Competitiva, com motor fluido Aurora Bézier quadrático em SVG e sistema de layout em grade cartesiana 12x12.

AstroReactTypeScriptSVG Bezier MathTrilingual i18n

Motor Aurora Bézier Quadrático Acoplado ao Scroll

Gera fitas poligonais com deslocamento de vetor normal de 120 vértices por filamento, delegando desfoque gaussiano e máscaras a camadas CSS aceleradas por GPU.

Telemetria de Engenharia Verificada e Métricas de Impacto

Entrega Individual em Produção
11 dias
Arquitetura completa de tokens de design, implementação frontend e pipeline de CI/CD.
Paridade Trilíngue de Chaves
100%
Validação automatizada em tempo de build para ES, EN e PT, incluindo textos alternativos de imagens.
Vértices de Fitas Bézier
120 pts/fita
Fitas poligonais com deslocamento de vetor normal calculadas dinamicamente sem sobrecarga de canvas.

Engenheiro Staff Frontend & Designer Individual

Arquitetura de Ciclo Completo, CI/CD Trilíngue i18n, Shaders SVG em GPU

  • Desenvolvi o gerador procedural de fitas Bézier quadráticas de 150 pontos para o fundo AuroraFusion acoplado ao scroll.
  • Transferi os filtros pesados de desfoque SVG para camadas CSS blur nativas aceleradas por GPU e máscaras de gradiente linear para telemetria a 60fps em dispositivos móveis.
  • Elaborei scripts automatizados de pre-commit para validar a paridade estrutural AST e i18n entre espanhol, inglês e português.
src/components/ui/AuroraFusion.astro
const u = 1 - progress;
const strandY = u * u * startY + 2 * u * progress * cpY + progress * progress * targetY;
const meanderAmplitude = 280 * Math.pow(progress, 1.2);
const meanderOffset = Math.sin(progress * Math.PI * 4) * meanderAmplitude;
const strandX = stageWidth / 2 + meanderOffset + (pillarIndex - 1.5) * currentSpacing;