CARGA
VISUAL
PERFIL EN LÍNEA · CARACAS, VE

ERICK
TORRES

> GESTOR DE OPERACIONES TECH & ESPECIALISTA VISUAL

Especialista profesional en el diseño y despliegue de sistemas administrativos convencionales hacia ecosistemas de datos 100% interactivos y de alto impacto visual.

[20:25:01] Iniciando protocolo de renderizado táctico...
[20:25:02] Accediendo a base de datos de Caracas, VE.
[20:25:03] Perfil de Usuario: 33 Años // Talento Venezolano ✓
Erick Torres
ERICK TORRES
COMPETENCIAS
DISEÑO VISUAL 95%
OPERACIONES 90%
INTEGRACIÓN IA 85%
HABILIDADES
Antigravity AI
Supabase
Diseño UI/UX
Automatización
Innovación IA
Prod. Audiovisual
PROYECTOS

App Veterinaria

Bulldog Francés Tracker

Sis. Administrativos

Gestión & Operaciones
TRAYECTORIA
ACTUAL

Especialista Visual Senior

Implementando sistemas y visuales estéticos. Integración de inteligencia artificial vía API y asistentes con inteligencia artificial.

FREELANCER

Líder Op. Digitales

Gestión operativa e innovación estructurada.

DISEÑO & TI

Diseñador Gráfico & Técnico

Soporte computacional, branding corporativo audiovisual.

AUTOMATION
H

Experto en AutoHotkey

Creación de macros complejos, desarrollo de scripts para automatización de flujos administrativos y optimización extrema de tiempos en Windows.

HERRAMIENTAS & SOFTWARE

Estructuración de interfaces web adaptables, bases de datos en la nube en tiempo real, control de versiones colaborativo y despliegue continuo de aplicaciones.

React 1 + año
TS
TypeScript 1 + año
Node 1 + año
PostgreSQL 1 + año
REST API 1 + año
Supabase 1 + año
Firebase 1 + año
Vercel 1 + año
GitHub 1 + año
CAPACIDADES
AUTODIDACTA
RESOLUCIÓN DE PROBLEMAS
LIDERAZGO
HERRAMIENTAS DE DISEÑO

Herramientas de creación gráfica, edición audiovisual y soporte técnico de hardware.

Ps
Photoshop 10 años
Ai
Illustrator 10 años
Cc
CapCut 4 años de exp
Cv
Canva 3 años
Soporte TI & PC 2 años
FMX MANAGER - PÁGINA ACTIVA

Reseña Técnica Profesional FMX con Gravity

Esta reseña está diseñada con un enfoque orientado a resultados, destacando las decisiones de ingeniería de software, la arquitectura y las buenas prácticas implementadas durante el desarrollo de la plataforma.

Rol: Creador, Arquitecto de Software y Desarrollador Principal (Full-Stack Developer)

Descripción General del Proyecto

FMX con Gravity es un ecosistema digital e industrial de nivel empresarial diseñado para centralizar, auditar y automatizar la gestión diaria de operaciones transaccionales, control de personal y seguridad de clientes. El sistema resuelve el problema del registro manual fragmentado, la falta de visibilidad financiera consolidada y la latencia en la toma de decisiones al unificar en un solo entorno:

  • Portal móvil de captura ágil para operarios en el campo.
  • Módulo de administración y análisis financiero para mandos medios y alta dirección.
  • Sistema de nómina automatizado con liquidaciones por periodos y soporte documental.
  • Módulo de seguridad y lista negra (Blacklist) en tiempo real con flujos de aprobación jerárquicos.

Stack Tecnológico y Rol de Componentes

React con TypeScript Desarrollo de una interfaz de usuario declarativa, estructurada con tipado estricto para mitigar errores en tiempo de ejecución y asegurar la mantenibilidad del código base.
Vite Entorno de desarrollo rápido y empaquetador optimizado que garantiza Hot Module Replacement (HMR) y construcciones eficientes en producción.
Supabase (PostgreSQL con RLS con Realtime) Motor de base de datos relacional. Implementa políticas de Row Level Security (RLS) para proteger los registros de transacciones e inicio de sesión, y canales de PostgreSQL Realtime para la propagación instantánea de eventos críticos.
Supabase Edge Functions (Deno) Backend serverless utilizado para el pipeline de backup (ETL) automatizado, aislando credenciales del lado del cliente y realizando tareas en segundo plano.
Google Sheets API y OAuth2 Destino secundario de almacenamiento seguro y generación automática de reportes ejecutivos en la nube directamente mediante llamadas API cifradas.
Recharts Biblioteca de visualización de datos utilizada en el módulo publicitario para generar gráficos dinámicos (Area y Bar Charts) del flujo de gastos e indicadores mensuales.
otpauth y qrcode Implementación nativa de autenticación multifactor (doble factor) para roles administrativos, permitiendo sincronización con aplicaciones de autenticación estándar (como Google Authenticator).
Tailwind CSS y Lucide Icons Framework de diseño para una interfaz moderna, limpia, responsiva y adaptada a la estética actual, con soporte para interfaces oscuras (glassmorphism/aurora void).

Arquitectura y Decisiones de Diseño

Modelo de Persistencia Híbrido (Local-First Sync) Para garantizar la disponibilidad en escenarios de red inestable o transitoria, se diseñó un flujo donde las entradas manuales de operarios se guardan en el cliente (LocalStorage) bajo una bandera de invalidación rápida (isManual: true) y se fusionan óptimamente con los datos consolidados en la base de datos de Supabase, evitando parpadeos visuales (flickering) y pérdida de datos.
Segmentación Jerárquica por Roles (RBAC) La plataforma implementa un control de acceso basado en roles que redirige de forma segura a los usuarios al iniciar sesión. Los operarios acceden únicamente al módulo de registro simplificado en sus móviles; el equipo de publicidad (shaipubli) opera sobre una consola de gastos dedicada; mientras que los administradores controlan el espectro total de nóminas, auditorías y usuarios aprobados.
Transiciones Horarias Operativas Resilientes El negocio opera con un horario nocturno continuo. Se implementó una lógica de transformación de fechas donde los registros realizados antes de las tres AM se consolidan fiscalmente en el día de operación anterior, alineando la analítica técnica con la realidad financiera del negocio.
Flujo de Control de Seguridad Descentralizado En lugar de permitir la alteración directa de registros de seguridad y suspensiones, las solicitudes críticas (como eliminar clientes de la lista negra o reducir advertencias) realizadas por operarios entran en una tabla intermedia de solicitudes pendientes (restricciones_solicitudes). El Administrador evalúa y aprueba/rechaza cada evento, preservando la integridad del historial.

Retos y Logros Técnicos

Sistema de Gestión de Sesiones Activas y Cierre Remoto

El Reto: Evitar el uso compartido no autorizado de cuentas administrativas e invitadas y permitir que un Administrador invalide instantáneamente el acceso a cualquier terminal.

La Solución: Creación de un controlador de dispositivos basado en un identificador único persistente por navegador (fmx_device_id) y una tabla activa de sesiones (gestor_sesiones). Se configuró un heartbeat en el cliente que cada ciento veinte segundos verifica el pulso con la base de datos. Si el administrador elimina el registro de sesión remotamente, la aplicación gatilla de inmediato el cierre de sesión (handleLogout) y redirige al login de manera segura.

Pipeline ETL a Hojas de Cálculo de Google

El Reto: Automatizar la creación de copias de seguridad de datos consolidados de uso directivo sin sobrecargar el rendimiento de la aplicación web ni exponer claves privadas de la suite de Google.

La Solución: Se programó una Supabase Edge Function en Deno/TypeScript que se conecta mediante credenciales OAuth2 (Service Account) a la API de Google Sheets. Al ser invocada, la función crea dinámicamente pestañas fechadas (Backup AAAA-MM-DD), formatea los encabezados y escribe las filas consolidadas.

Motor de Advertencias Automatizado y Estados de Suspensión

El Reto: Gestionar el comportamiento de clientes mediante un sistema de alertas acumulativas que reaccione de inmediato ante faltas.

La Solución: Desarrollo de un autómata de estados finitos que traduce las advertencias en medidas de control: Primera Advertencia: Clasificación en estado de observacion. Segunda Advertencia: Estado de suspendido con una ventana de bloqueo temporal calculada dinámicamente de mas tres horas en la base de datos. Tercera Advertencia: Estado definitivo de baneado. La Sincronización en tiempo real mediante PostgreSQL WebSockets asegura que si un operario aplica una advertencia a un cliente, todas las terminales activas conozcan el estado del cliente instantáneamente.

Gestión de Horas Complejas y Cierre de Nómina Consolidado

El Reto: Procesar registros de asistencia en formato de texto libre (como ocho y media o nueve con cinco horas) y calcular la remuneración exacta basada en un valor fijo por hora (nueve dólares con sesenta centavos por hora) o con compensaciones manuales personalizadas, previniendo incoherencias visuales al procesar pagos.

La Solución: Implementación de un parser numérico robusto que normaliza strings y calcula montos a pagar sobre el total acumulado por quincena. Adicionalmente, se construyó un flujo de Pago de Nómina por quincenas que congela visualmente el balance a cero una vez saldado, archivando el registro histórico y autogestionando el cambio de fechas para el periodo subsecuente de forma inteligente.

Resumen de Logros de Ingeniería

  • Cero Pérdida de Datos: El mecanismo híbrido de sincronización y mitigación de fallos de red reduce al mínimo el riesgo de pérdida de transacciones operativas diarias.
  • Seguridad Bancaria Integrada: Inclusión de autenticación de doble factor integrada con algoritmos TOTP estándar y un sistema de control de accesos auditado mediante logs persistentes.
  • Auditoría y Trazabilidad al cien por ciento: Implementación de un historial de cambios (publicidad_audit e historicos_seguridad) que registra cada inserción, modificación y eliminación, previniendo fraudes o inconsistencias internas.
  • Backend Desacoplado y Escalable: Uso de funciones serverless y APIs externas para delegar pesadas cargas de trabajo fuera del cliente React, logrando tiempos de renderizado y carga óptimos en dispositivos móviles de gama baja.
fmx_design_audit.sh
$ cat design_files_audit.log
tailwind.config.js (Líneas una a doce)
App.css (Líneas una a cuarenta y tres)
index.css (Líneas una a nueve)
> Registro de diseño cargado.

Detalles Técnicos del Frontend: Arquitectura, CSS y Experiencia de Usuario

Aquí tienes el desglose técnico y detallado enfocado exclusivamente en la arquitectura del Frontend, sistema de diseño, experiencia de usuario y optimización de interfaces.

Arquitectura y Descomposición Modular en React

La aplicación está diseñada bajo una estructura modular de componentes desacoplados, donde cada vista representa un sub-módulo funcional autónomo inyectado dinámicamente según el rol detectado en la sesión activa:

App.tsx (Core y Guardia de Sesión)
Roles: admin / vicepresident / guest
Dashboard.tsx (Panel de Escritorio)
NominaModule.tsx (Nómina)
RestriccionModule.tsx (Seguridad)
Roles: fijo_barco / fijo_cueva
MobileOperative.tsx (Interfaz Táctil)
RestriccionModule.tsx (Seguridad)
LocalSync.ts (Sincronización Local)
Role: shaipubli
PublicityDashboard.tsx (Gastos)
Recharts.ts (Métrica de Gastos)
GoogleSheets.ts (Respaldo en Nube)
  • Encapsulamiento de Lógica de Negocio: Módulos de gran complejidad operativa reciben estados y llamadas de retorno de sincronización de datos a través de propiedades tipadas, manteniendo el renderizado de la interfaz de usuario aislado de la API.
  • Gestión de Estados Locales Reactivos: Uso de estados para control de modales de edición contextual y efectos de actualización con dependencias limpias para reaccionar a cambios en filtros temporales, asegurando que las vistas se actualicen únicamente cuando cambia el contexto del filtro seleccionado.

Sistema de Diseño Visual y Estética Avanzada

La aplicación utiliza un diseño premium, inmersivo y de alto contraste denominado Aurora Void, implementado sobre Tailwind CSS:

Elementos de Glassmorphism (Vidrio Esmerilado) La tarjeta de autenticación y los paneles flotantes utilizan filtros de difracción y desenfoque para dar un aspecto tridimensional sobre fondos oscuros, simulando un panel físico de acrílico flotando sobre el espacio de trabajo.
Auroras Dinámicas Ambientales (Glow Blobs) El fondo del sitio cuenta con esferas radiales de color translúcido que cambian sutilmente de tamaño para dar dinamismo a la interfaz estática. Se definió una animación de pulso lento en index.css que suaviza la transición de escala de los globos mediante una función de aceleración cúbica.
Textura de Ruido y Rejilla de Perspectiva (Noise Overlay) Para romper la uniformidad digital de los degradados CSS puros, se inyectó una imagen de grano vectorial en modo de mezcla superpuesta con opacidad reducida al veinte por ciento, simulando una textura analógica premium.

Optimización para Dispositivos Móviles (Mobile-First)

  • Zonas de Pulsación Maximizadas: Los botones transaccionales y de selección de bando tienen alturas amplias de cuarenta y ocho a cincuenta seís píxeles, cumpliendo con los estándares de accesibilidad para móviles.
  • Interacciones Táctiles (Feedback Háptico Visual): Uso de modificadores activos en botones de inserción rápida de apuestas y cierres de modal. Esto simula una pulsación física al reducir ligeramente la escala del botón ante el evento táctil del usuario al noventa y cinco por ciento de su tamaño original.
  • Optimización del Espacio (Drawer Modals): Formularios de guardado masivo de registros u operaciones de nómina se despliegan en pantallas superpuestas a pantalla completa que se deslizan verticalmente, proporcionando la experiencia de una aplicación nativa.

Visualización de Datos Avanzada con Recharts

  • Contenedores Flexibles: Uso de contenedores adaptables para asegurar que los gráficos se adapten al cien por ciento de la anchura de pantallas en ordenadores o dispositivos móviles sin romper la cuadrícula.
  • Degradados en Elementos SVG: Inyección de degradados lineales dentro del árbol de gráficos para pintar áreas de curvas con transiciones de color de cian a violeta semi-translúcidos, manteniendo la armonía con la paleta de colores oscuros del dashboard.
  • Diálogos Emergentes Personalizados de Moneda: Personalización de los tooltips emergentes al pasar el cursor sobre las curvas para mostrar los valores formateados regionalmente en pesos o dólares, calculando el valor convertido en tiempo real utilizando la cotización del dólar configurada.

Validación y Sanitización Activa del Lado del Cliente

Para mitigar llamadas erróneas al backend y proteger la consistencia de los datos, el frontend implementa validaciones estrictas y automáticas en tiempo de entrada:

  • Limpieza de Números de Teléfono (WhatsApp): En el formulario de restricciones, el campo de teléfono filtra caracteres no numéricos en cada pulsación de tecla, impidiendo el envío de guiones, espacios o letras.
  • Prevención de Valores Negativos: Todos los valores monetarios ingresados por los usuarios son filtrados mediante una función matemática para asegurar valores positivos antes de estructurar la consulta de inserción.
  • Conversión Inteligente de Formato de Tiempo: Analizador de texto capaz de interpretar horas en formatos decimales o sexagesimales para calcular la remuneración automáticamente.
PRUEBA LA INTERFAZ
ACCESOS DEMO
🔑

Credenciales de Acceso

Usa cualquiera de las siguientes cuentas de demostración:

OPCIÓN UNO DEMO
Usuario: prueba1
Contraseña: 123456
OPCIÓN DOS DEMO
Usuario: prueba2
Contraseña: 123456
AUTOHOTKEY — DEMO

Automatización con AutoHotkey

Macros complejos y scripts personalizados para automatizar flujos administrativos y reducir tiempos operativos en entornos Windows.

90% EFICIENCIA
WIN PLATAFORMA

ZPERANZA

Zperanza es una plataforma venezolana de apoyo y rescate animal sin fines de lucro, diseñada para coordinar la ayuda a mascotas e insumos en refugios, especialmente durante situaciones de emergencia o desastres naturales (como sismos).

🌐 INGRESAR A LA PÁGINA
zperanza_monitor.sys
ROTATING SCREEN
Zperanza Home Zperanza Adoptions Zperanza Testimonials
SHORTS & REELS

Proyectos

contacto.form

root@erick:~# Iniciando protocolo de contacto...

root@erick:~# Ingrese sus credenciales abajo para establecer comunicación segura.

> EMAIL:
> TELÉFONO:
> MOTIVO:
01000101 01010010 01001001 01000011 01001011 00100000 01010100 01001111 01010010 01010010 01000101 01010011
Full Screen Shot
INFORMACIÓN COMPLETA DEL PROYECTO

Proyecto Zperanza

Plataforma de Apoyo & Rescate Animal

Zperanza es una plataforma venezolana de apoyo y rescate animal sin fines de lucro, diseñada para coordinar la ayuda a mascotas e insumos en refugios, especialmente durante situaciones de emergencia o desastres naturales (como sismos).

🐾 ¿Cuál es su objetivo principal?

Servir de puente entre organizaciones o entes oficiales y personas solidarias para salvar, alimentar, medicar y dar en adopción a animales vulnerables o damnificados en Venezuela.

⚙️ Funciones y Secciones Principales
Telemetría y Monitoreo Sísmico en Tiempo Real Integra datos oficiales de FUNVISIS para geolocalizar réplicas y eventos sismicos recientes, priorizando automáticamente la ayuda hacia las fundaciones y zonas con mayor impacto estructural (como La Guaira, Distrito Capital y Miranda).
Coordinación de Insumos Críticos Presenta un catálogo de solicitudes activas clasificadas por categorías (Alimento, Medicamentos, Logística y Reconstrucción). Cada solicitud muestra su avance de recolección en tiempo real y permite colaborar directamente.
Red de Resiliencia y Adopciones Mantiene métricas públicas sobre donaciones, animales rescatados y alojados, y facilita procesos de adopción y reportes de alertas de animales en riesgo.
Reporte de Casos de la Comunidad Permite registrar solicitudes de ayuda urgentes tanto para desastres específicos como para casos generales de la comunidad.