AXEL_OS_KERNEL_v2.5.0 (tty1)

AXEL ESCUTIA

FULL STACK ENGINEER || MULTIMEDIA PRODUCER

Axel Escutia Zubieta

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

axeleszu@gmail.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
[ Live Production ]

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
_

CONAFE

Educational Spots (Retro)

FIRA Cifras API

Saldo Flujo
Connecting to CORS Proxy...

VFX Breakdown

Keying
JS | PHP| SQL | GIT
Photoshop | After Effects | Premiere | DaVinci Resolve | Adobe Audition | Adobe Illustrator

Work in Progress

WIP
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)
Sec+ Enhanced Data
Privacy Protocols
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