Architectural Case Studies

Production Hero Engineering

Deconstructed production architectures featuring continuous fluid clamp tokens, hardware-accelerated 3D projection, and WCAG 2.2 Level AAA compliance.

National Competitive Programming ChampionshipYear: 2026 | Commit: fe28bef

The 2026 ICPC Mexico Regional Finals

Engineered the bilingual flagship platform for the 2026 ICPC Mexico Regional Finals hosted at ESCOM IPN, featuring a 3D perspective chamfered hero window, spring-physics magnetic CTAs, and zero-CLS fluid token architecture.

Astro 5React 19TypeScriptMotionWCAG 2.2 AAA

Explore Live Regional Platform Inspect Venue Logistics Specification

The 2026 ICPC Mexico Regional

Mexico's top university programmers compete for the title, trophies, and a spot at the Latin American Finals.

View Results View Schedule

Students competing in the ICPC Mexico 2026 Finals — Mexican Finals 2026

Verified Engineering Telemetry & Impact Metrics

WCAG AAA Contrast: 14.2:1; Verified foreground-to-surface contrast ratio across core typography.
DOM Node Depth: < 420 nodes; Maintained well below the 800-node Lighthouse performance budget.
Cumulative Layout Shift: 0.000; Zero layout shift via aspect-ratio reservation and metric-adjusted font fallbacks.

Lead Frontend Architect

End-to-End Platform Architecture, UI Engineering, and A11Y Auditing

Designed and implemented the chamfered polygon Hero Window with hardware-accelerated 3D pointer tilt and weighted photo pool selection.
Engineered spring-dampened MagneticButton primitives with automatic prefers-reduced-motion zeroing.
Established strict clamp-first fluid typography and spacing tokens across English and Spanish locales.

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 };
}

Intensive Algorithmic Training PlatformYear: 2026 | Commit: a49c21d

Training Camp Mexico (TCMX) 2026

Architected the high-contrast neo-brutalist web platform for Training Camp Mexico 2026 at ITESO, introducing a 2x2 quadrant SVG viewBox fragmentation emblem with staggered 3D perspective unfolding.

AstroTailwind CSS v4SVG GeometryIntersectionObserverWCAG AAA

Launch TCMX Platform

Sequence: T to M to X to C350ms Stagger Overlap

Quadrant SVG Fragmentation & 3D Hinge Unfold

Crops a unified vector coordinate space into four independent perspective cells (T, M, X, C) that unfold sequentially on viewport intersection.

Verified Engineering Telemetry & Impact Metrics

Registered Competitors: 180+; National ICPC division participants across Novice and Advanced tracks.
Unfold Stagger Cadence: 350 ms; Calculated overlap (500ms duration minus 150ms overlap) for fluid 3D hinge motion.
Pa11y & Axe Violations: 0; Zero accessibility violations across light and high-contrast surfaces.

Principal UI Systems Engineer

Design System Tokenization, SVG Motion Engineering, Schedule Matrix

Created the four-quadrant SVG emblem unfolding choreography (T to M to X to C) with cubic-bezier spring overshoot.
Implemented IntersectionObserver viewport triggers paired with instant rest-state resolution for reduced-motion users.
Built semantic definition list stat blocks and responsive schedule matrices with hard-offset borders.

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);
}

Latin American Women in Competitive ProgrammingYear: 2026 | Commit: 8c71e4a

CODEFEM 2026 Competitive League

Solo-engineered the trilingual (ES, EN, PT) platform for the Liga Femenina Mexicana de Programacion Competitiva, featuring a quadratic Bezier SVG Aurora fluid background engine and a 12x12 Cartesian grid layout system.

AstroReactTypeScriptSVG Bezier MathTrilingual i18n

Visit CODEFEM 2026 Platform

Scroll-Driven Quadratic Bezier Aurora Engine

Generates 120-vertex normal-offset polygon ribbons per strand, delegating Gaussian blur and vertical fade masking to GPU-accelerated CSS layers.

Simulated Scroll Progress45%

Verified Engineering Telemetry & Impact Metrics

Solo Production Delivery: 11 days; Complete design token architecture, frontend implementation, and CI/CD pipeline.
Trilingual Key Parity: 100%; Automated build-time enforcement across ES, EN, and PT locales including image alt text.
Bezier Ribbon Vertices: 120 points/strand; Normal-vector offset polygon ribbons computed dynamically with zero canvas overhead.

Solo Staff Frontend Engineer & Designer

Full Lifecycle Architecture, Trilingual i18n CI/CD, GPU SVG Shaders

Engineered the procedural 150-point quadratic Bezier ribbon generator for the scroll-coupled AuroraFusion background.
Offloaded heavy SVG filter blurs to native GPU-composited CSS blur layers and linear-gradient masks for 60fps mobile telemetry.
Authored automated pre-commit AST/i18n parity verification scripts across Spanish, English, and Portuguese.

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;