Axel Escutia - Frontend Engineer specialized in Interactive Systems and Multimedia Applications

AXEL_OS_KERNEL_v2.5.0 (tty1)
> STANDBY | 48kHz | 24bit | OK

AXEL ESCUTIA

FULL STACK ENGINEER || MULTIMEDIA PRODUCER

Axel Escutia Zubieta

Integrating high-performance backend systems with production-quality visuals.

contact@axelescutia.com • LinkedIn
Download Resume

FIRA Institutional Portal

Lead UI/UX & Frontend

Complete Ecosystem Modernization

SVG animation Producción
SVG animation AgroEmpresas
SVG animation Intermediación
📐 12 Responsive Breakpoints
👁️ WAI-AAA Accessible
🌓 Dark Mode / Reduce-Motion
3 Target Audiences
70th Anniversary Brand

Cinematic & Brand Storytelling

Directing, producing, and editing narrative-driven content.

⚡ GitHub Activity

↗
Loading status...
Less
More

El Podcast de FIRA

Producer / Editor

The Lab

Game Dev

Viveros Smart Access PWA

IoT Integration
Main Gate Access
Scan the QR code

Connection: Secure

🧾 Descargar Recibo

Generative AI Multimedia

Next-Gen Visual Storytelling

Promotor's Toolkit

Offline by Design
Search Normativa...
Créditos
Garantías
Tasas
Zonas

Motion Graphics Showcase

A reel of animated explainers and VFX.

IEM Vote Tracking

PROTOCOL: SILVME_ANONYMITY_V1
PHP / MySQL Hardware Integ.
ID: 492-MX-EXT-VOTE
> Packet Scanned: 492-MX
> Lookup: Valid Voter Reg.
> Action: Update `status` = RECEIVED
> PRIVACY CHECK: VOTE SEPARATED
_

Visual Assets & Photography

RAW / 4K

Architecture / Field Documentation / Post-Processing

Featured Photography
ISO 100 f/2.8 1/200s 35mm
Photo 1
Photo 2
Photo 3
Photo 4
RGB Color Spectrum

Filenamephoto_01.cr2

AuthorAxel Escutia

Rating⭐️⭐️⭐️⭐️⭐️

FIRA Cifras API

Saldo Flujo
Connecting to CORS Proxy...

Live Broadcast Ops

LIVE

Multi-Cam / Nationwide Logistics / RTMP

CAM 01 - AUDITORIUM
SIGNAL CHECK
PREVIEW
FIRA LIVE
● REC
PROGRAM (YouTube Live)
JS | PHP| SQL | GIT
Photoshop | After Effects | Premiere | DaVinci Resolve | Adobe Audition | Adobe Illustrator

Frontend Engineer specializing in interactive systems, multimedia applications, and high-performance platforms for institutional and financial environments. Available for roles focused on scalable UI architecture and accessibility compliance.

Skill Sandbox

Love2D

Grab and toss skills

Return to Workplace

City Micro

Unity WebGL

Mini driving game

About

Interactive experiments

PROJECT_ID: FIRA_RENEWAL_v70

FIRA Institutional Ecosystem

Lead Frontend Architect & UX Designer

01 // The Challenge

Update a massive legacy government platform to align with FIRA's 70th Anniversary. The goal was to transform a static repository into a dynamic promotional tool while strictly adhering to WAI-AAA accessibility standards and integrating with complex legacy Java/Oracle backends.

02 // The Engineering

  • 📱
    Extreme Responsiveness

    Designed layouts for 12 different viewports (Mobile to 4K), plus print styles. Included native support for Dark Mode and Reduce-Motion preferences.

  • 🧩
    Modular Architecture

    Built a "Widget-first" homepage where content modules (News, Metrics, User Profile) load independently, reducing initial paint time.

  • 👁️
    WAI-AAA Accessibility

    Achieved the highest standard of web accessibility, ensuring usability for visually impaired stakeholders (Screen readers, contrast ratios).

  • 🔒
    Security Integration

    Redesigned the frontend to interface securely with internal custom apps, delivering personalized content based on user profile.

03 // The Impact

3 Distinct User Profiles
(Producers, Agribusiness, Financial Intermediaries)
WAI Accessibility
Compliance
UX Unified Experience
Across Mobile & Desktop
PROJECT_ID: FIN_DATA_ENGINE_v1

FIRA Financial Dashboard

Data Visualization & Algorithmic Logic

01 // The Challenge

FIRA required a way to visualize massive amounts of historical financial data (Balance Sheets vs. Cash Flow) that lived in disconnected CSV dumps. The challenge was to build a **lightweight, dependency-free engine** capable of parsing, merging, and visualizing 10+ years of monthly records instantly on the client side, without straining the legacy backend.

02 // The Engineering

  • 🔢
    Algorithmic Prototype

    Developed a custom Number.prototype.formatMoney extension to handle Mexican currency localization, large number suffixes (millions/mdp), and floating-point precision efficiently.

  • ⚡
    Client-Side ETL

    Built a Vanilla JS parser that fetches raw CSVs, cleans dirty data, and performs "Year-over-Year" aggregation in milliseconds within the browser thread.

  • 📊
    Combo-Chart Visualization

    Engineered a custom SVG rendering system that layers Bar Charts (Balance) and Line Graphs (Flow) on a shared coordinate system, handling dynamic scaling automatically.

  • 📉
    Legacy Compatibility

    Written in pure JavaScript to ensure compatibility with strict government browser requirements.

  • 🛠️
    Regulatory Compliance & UX

    Capitalized on "Datos Abiertos" transparency policies to drive engagement. Converted legal requirements for monthly data publication into a compelling visual experience.

03 // The Impact

0ms Backend Latency
(Pure Client-Side)
10yr Historical Data
Correlation
100% Audit Accuracy
vs Official Reports
PROJECT_ID: MICHOACAN_VOTE_2011

International Voting Logistics System

Web & Field Operations Specialist

01 // The Challenge

Orchestrate the logistics for Michoacán's migrant voting process (USA/Europe). The critical requirement was to create a Physical-to-Digital Bridge that could track the return of ballot packages via mail without compromising the constitutional right to a secret ballot.

02 // The Engineering

  • 📦
    Barcode Architecture

    Designed a custom barcode system printed on the outer return envelope. This allowed us to scan and log receipt in the database while the inner ballot envelope remained sealed and anonymous.

  • 🗄️
    MySQL Sync

    Built the PHP/MySQL registry SILVME (Solicitudes de Inscripción a la Lista de Votantes Michoacanos en el Extranjero) that reconciled physical scans with the digital voter roll, preventing double-voting and generating real-time participation stats.

  • 💿
    Multimedia Production

    Produced the instructional DVD media kit. Managed design, production, duplication and postal logistics.

03 // The Impact

100% Vote Anonymity
Maintained
Logistics Coordinated
Transnational Mail
Legacy Foundation for
Future E-Voting
PROJECT_ID: IOT_ACCESS_CONTROL

Condominio Viveros: Smart Access

Full Stack Architect (PWA + IoT)

01 // The Challenge

Managing operations for nearly 100 tenants required a unified digital ecosystem. Administratively, the community needed a transparent way to handle HOA fees, meeting agreements, and official notices.

Technically, the challenge was to modernize physical security by eliminating the need for hardware remotes. The goal was to engineer a secure IoT gateway that allows tenants to grant time-limited access to visitors via smartphone, ensuring convenience without compromising the perimeter. Keeping simplicity and ease of use was paramount.

02 // The Engineering

  • 🔓
    Web-to-Physical Bridge

    Built a secure handshake protocol where the PWA communicates with the Gate Controller via Webhooks/MQTT. Scanning the QR triggers a real-time signal to open the solenoid lock.

  • 📷
    Browser-Based Scanning

    Implemented a QR scanner directly in the browser using JS libraries, allowing visitors to authenticate and trigger the gate without installing native apps.

  • 🧾
    Fiscal Integration

    Tenants can view and download PDF digital receipts generated dynamically upon payment verification, creating an automated audit trail.

03 // The Impact

Hardware Eliminated cost
of physical remotes
Security Dynamic QRs
prevent cloning
IoT Seamless Web
to Real-World Action
PROJECT_ID: FIELD_TOOLKIT_PWA

Manual del Promotor PWA

Lead PWA Developer

01 // The Challenge

FIRA's 600+ credit promoters relied on a dense rules and regulations for credit assessment during client meetings. Access requieres vast experience and knowledge, making it time-consuming and error-prone. The goal was to empower this mobile workforce with a high-performance tool that delivered instant, accurate information, anywhere.

02 // The Engineering

  • 📶
    Offline-First Architecture

    Implemented a robust Service Worker to pre-cache the entire application shell and all normative data, guaranteeing 100% functionality without a network connection.

  • 📚
    Content Indexing

    Transformed complicated technical documentation into a structured, searchable knowledge base. Information was "chunked", simplified, and indexed, making complex regulations accessible in seconds.

  • 🚀
    Performance Optimization

    Engineered for sub-second load times on low-end mobile devices. The app is lightweight, fast, and feels like a native application once added to the home screen.

03 // The Impact

600+ Promoters
Empowered
100% Offline
Availability
Instant Access to
Verified Information
PROJECT_TYPE: BRAND_NARRATIVE

Cinematic & Documentary Production

Director, Producer & Editor

01 // The Challenge

To capture the human impact of FIRA's financial programs and celebrate key institutional milestones. The goal was to move beyond corporate messaging and create emotionally resonant stories that connect with both stakeholders and the general public.

02 // My Role & Process

  • 🎬
    Directing & Cinematography

    Managed on-site filming, directed interview subjects to elicit authentic responses, and oversaw all camera and lighting setups to achieve a cinematic quality.

  • ✍️
    Storyboarding & Scriptwriting

    Developed narratives from initial concepts, scripting interviews and voiceovers to build a compelling story arc for each project.

  • 🎞️
    Post-Production

    Performed editing, color grading in Adobe Premiere, sound mixing, and final mastering to deliver a polished, broadcast-quality final product.
PROJECT_TYPE: DATA_VISUALIZATION

Motion Graphics & Technical Explainers

Motion Graphics Artist & Technical Designer

01 // The Challenge

To deconstruct dense, complex financial and agricultural topics into clear, concise, and visually engaging animated videos. The primary goal was to improve comprehension and retention for audiences unfamiliar with the technical jargon.

02 // My Role & Process

  • 📈
    Data Visualization

    Translated raw data, flowcharts, and financial models into clear kinetic typography and animated graphics that simplify the core message.

  • ✨
    2D/3D Animation in After Effects

    Designed and animated all visual assets, creating custom graphics, characters, and transitions from scratch to match FIRA's brand identity.

  • 🧩
    VFX & Compositing

    Integrated motion graphics with live-action footage, performing tasks like screen replacement, keying, and creating visual effects to enhance the final video.
PROJECT_ID: PODCAST_SYNDICATION_PIPELINE

Podcast Syndication & Growth Strategy

Lead Producer & Technical Architect

01 // The Challenge

FIRA's existing podcast had a limited reach due to an inconsistent, manual publishing workflow, was published only internaly with direct links to audio files. It lacked a scalable distribution strategy to reach a wider audience on major platforms. The goal was to re-architect the entire distribution pipeline to enable mass syndication and implement a consistent, high-frequency weekly release schedule.

02 // The Engineering & Process

  • ⚙️
    Custom RSS Feed Architecture

    Engineered the podcast's core XML (RSS) feed, defining a custom XSD to ensure universal compatibility. This technical foundation became the "single source of truth" for automated syndication across all platforms. The XML file also included meta data for audio transcripts

  • 🗓️
    Publishing Cadence

    Streamlined the end-to-end production workflow, which enabled the launch of a consistent weekly episode schedule for the first time. This significantly increased audience engagement and predictability.

  • 🌐
    Automated Multi-Platform Syndication

    The new RSS pipeline allowed a single file update to automatically propagate new episodes to all subscribed platforms, including Spotify, Apple Podcasts, and Google Podcasts, eliminating manual uploads.

  • 🎙️
    Production & Agency Management

    Managed all aspects of audio production, from content editing, musicalization to final mastering.

03 // The Impact

Weekly Cadence Implemented
for Peak Engagement
Auto Syndication to
All Major Platforms
XML Single Source
of Truth
WAI-AA Accessibility
PROJECT_ID: NEURAL_SYNTHESIS_v1

Generative AI Video Pipeline

AI Creative Technologist & Specialist

01 // The Challenge

Traditional institutional video production is often limited by physical constraints, budgets, and long turnaround times. The challenge was to integrate Generative AI into a professional workflow to create high-quality assets—including realistic human avatars, stylized caricatures, and neural voiceovers—while maintaining institutional standards and brand consistency.

02 // The Engineering & Workflow

  • 🚀
    Tool Adaptability & R&D

    Proved extreme agility by mastering a rapidly evolving ecosystem. I transitioned from simple prompts to complex local deployments, ensuring the best tool is used for each specific institutional need.

  • 🧠
    Advanced Node-Based Workflows

    Implemented ComfyUI and Google Colab environments to run state-of-the-art diffusion models. This allows for precise control over character consistency, movement, and temporal stability in AI-generated clips.

  • 🎭
    Multi-Format Synthesis

    Developed a versatile production pipeline capable of generating Neural Voices (TTS), photorealistic human characters for training videos, and 2D caricatures for engaging social media content.

03 // The Impact

Flex Agile adoption of
emerging AI tools
Zero Physical production
costs for avatars
Hybrid Perfect blend of
Code & Creativity
PROJECT_ID: LIVE_BROADCAST_ENGINEERING

Nationwide Live Event Streaming

Lead Broadcast Engineer & Field Producer

01 // The Challenge

Managing live institutional broadcasts across Mexico requires extreme tactical adaptability. From high-end auditoriums in Mexico City to remote field locations with limited connectivity, the goal was to deliver zero-failure, high-fidelity streams to multiple audiences across 100+ national offices.

02 // The Engineering & Operations

  • 📡
    Hybrid Production Management

    Capable of leading a full camera crew and technical staff or operating as a "One-Man Band." I handle everything from physical rigging and lighting to audio console integration and multi-cam switching.

  • 🔌
    Technical Liaison

    Acting as the bridge between the Creative Media department and specialized on-site technicians. I translate creative vision into technical requirements for audio providers, power specialists, and network engineers.

  • 💻
    Multi-Platform Syndication

    Engineered secure internal streams via MS Teams for institutional privacy, while simultaneously broadcasting to Facebook Live and YouTube for public outreach, ensuring synchronized delivery across all protocols.

03 // The Impact

Nationwide 100% Coverage of
FIRA Regional Offices
Zero Stream Failures over
10+ Annual High-Stakes Events
Quality Broadcast-Grade Audio &
Video Standards
PROJECT_ID: VISUAL_DOCUMENTATION_ARCHIVE

Institutional Photography & Visual Curation

Lead Photographer & Digital Asset Manager

01 // The Challenge

Creating a unified visual identity for FIRA through high-quality photography. The objective was to document agricultural success stories, industrial infrastructure, and corporate events across Mexico, producing a professional image bank for annual reports, social media, and national press.

02 // Expertise & Workflow

  • 📸
    On-Site Field Documentation

    Specialized in travel and field photography. Capturing the authentic essence of agricultural production while maintaining a polished, institutional aesthetic in diverse environmental conditions.

  • 🖥️
    Advanced Post-Processing

    Mastery of the RAW development pipeline. Expert in color correction, retouching, and compositing using Lightroom and Photoshop to ensure consistent color grading across all institutional channels.

  • 📂
    Asset Lifecycle Management

    Beyond capturing the image, I manage the metadata, categorization, and archiving of thousands of high-resolution assets, ensuring they are optimized for both print and digital syndication.

03 // The Impact

13yrs Historical Visual
Archive Documented
High-Res Asset Bank for
National Campaigns
100+ Field Locations
Photographed
PROJECT_ID: CREATIVE_SANDBOX_RND

The Lab: Curiosity-Driven Development

Interactive R&D & Systems Exploration

01 // The Philosophy

I believe that the best engineering solutions come from a place of genuine curiosity. "The Lab" is my space to build things simply for the sake of doing them. It’s a sandbox where I am free to fail, innovate, and master complex concepts that traditional enterprise development rarely explores.

02 // The Self-Taught Edge

  • 🧪
    Autonomous Research

    I use game development as a medium to study how things work, how to improve performance in C#, or how AI works on its core . This autodidactic approach ensures I stay ahead of the technical curve.

  • 🕹️
    Unconstrained Innovation

    Game loops allow me to experiment with real-time state management and physics simulations. By solving the extreme performance requirements of games, I bring a unique "optimization-first" mindset back to my professional web and backend projects.

  • 💡
    Creative Problem Solving

    In the Lab, I solve puzzles that don't have a manual. This strengthens my ability to architect solutions for undefined problems, giving me a decisive edge when tackling high-stakes institutional challenges.

03 // Professional Impact

Fast High-speed adoption
of new technologies
Edge Cross-disciplinary
technical intuition
Passion Constant iteration &
self-improvement