Neon Blockfall
Un juego de bloques con identidad neón propia, en prueba cerrada en Google Play.
Rogério Gomes
Developer y Graphic Designer
Diseño identidades visuales y construyo aplicaciones, juegos y sitios web, del primer trazo a la última línea de código.
Proyectos
01 · Juego para Android
Neon Blockfall
- Tipo: Juego para Android
- Año: 2026
- Estado: Prueba cerrada en Google Play
El juego de bloques al que jugaba sin parar de niño se convirtió en el punto de partida de uno que creé.
Capturas reales del juego, con la interfaz en español.
- Fondo, #050914
- Cian, #65efff
- Magenta, #ff2ea6
- Dorado, #ffd45a
- Texto, #eaf7ff
Lo que se ve
Sistema neón
Fondo azul marino casi negro, con cian, magenta y dorado como acentos. Marco con esquinas, etiquetas monoespaciadas en mayúsculas y números en Space Grotesk.
Fases y escenarios
Cuatro escenarios visuales y una nueva fase cada 8 líneas. Los modificadores (sobrecarga, pulso, blackout) se alternan con fases tranquilas.
Controles táctiles
Deslizar mueve, tocar gira, deslizar hacia abajo encaja y hacia arriba guarda la pieza en reserva. Seis botones grandes ocupan la base de la pantalla.
Cómo está construido, detrás de la pantalla
Núcleo en TypeScript puro
Las reglas del juego viven en un módulo sin React, DOM ni audio, que se puede probar de forma aislada con Vitest.
Estado serializable
El estado del juego es serializable: la partida se puede retomar al reabrir la app, y el Desafío del Día usa una secuencia determinista por fecha.
Entrega a Android
Un juego web empaquetado con Capacitor. La carpeta android/ es desechable: el CI la recrea en cada build y reaplica por script los ajustes que exige la tienda.
Una lectura propia del género
Piezas, modos, escenarios y modificadores de fase propios, sin reivindicar la invención del género.
Intentado, no completado
Ranking en línea, sin cuentas propias
Quise un ranking en línea sin crear un sistema de cuentas. Probé Google Play Games y me atasqué en la implementación. Hoy el juego solo tiene un marcador local.
AquaControl
Aplicación interna para el trabajo de campo, la supervisión y la administración de una empresa de mantenimiento de piscinas.
02 · Software operativo
AquaControl
- Tipo: Aplicación interna
- Año: 2026
- Estado: En uso operativo desde el 10 jun. 2026
Hacía mantenimiento de piscinas para Aguas y Oleocontrol, en España, y vi el trabajo de muchos técnicos concentrado en grupos de WhatsApp. Diseñé y construí una aplicación propia para reemplazarlos.
Una visita, nueve pasos
El técnico sigue el mismo camino en cada visita, y el borrador queda guardado en el dispositivo hasta el final.
Paso 1Elige la piscina de la ruta. Las ya visitadas quedan bloqueadas hasta las 6:00.
Tres perfiles, el mismo producto
Técnico
La ruta del día, las piscinas, las visitas y las incidencias.
Supervisión
Alertas, incidencias críticas, gestión de recursos e informes.
Administración
Todo eso, más usuarios, ausencias y modo de mantenimiento.
En uso desde el 10 de junio de 2026, 7 días a la semana, unas 12 horas operativas al día, con 27 técnicos. Cifras informadas por mí, no medidas por analítica.
De la ruta a la coordinación
Asignación de piscinas, ausencias, stock e informes en PDF por técnico, piscinas y período. La empresa usó los informes en el control operativo mensual, en el informe de fin de temporada y para presentar información a clientes.
Decisiones
Sin señal, la visita continúa
Los técnicos trabajaban con señal débil o sin señal. La visita queda en el dispositivo y, al concluir, entra en una cola que reintenta hasta 3 veces sin duplicarla, sin pantalla propia. Si los reintentos se agotan, el elemento queda marcado como fallido.
Permisos en la base de datos, no solo en la pantalla
Quién puede ver y modificar qué se impone en la base de datos, por rol, y el acceso queda bloqueado hasta el cambio de contraseña obligatorio.
Una aplicación en lugar de los grupos
Cada técnico entra con su propia cuenta y la caché sin conexión es independiente por usuario. Rutas, días libres, piscinas, materiales, visitas, informes, fotos y vídeos pasan a estar en un solo lugar.
Sin tarjeta de crédito en el camino
No cobraba por los costos de infraestructura y quería evitar un servicio que pudiera cobrar al superar el plan gratuito. Por eso pasé de Firebase a Supabase.
Cómo está construido
- En el dispositivo
- React Native con Expo y TypeScript, para Android.
- En el servidor
- Supabase: cuentas, Postgres con reglas por rol, almacenamiento de medios y funciones de servidor.
- Entrega
- Compilaciones de Android con EAS, distribuidas como APK, con actualizaciones OTA. No está en Google Play.
Contexto: el almacenamiento del plan gratuito de Supabase se superó por la acumulación de fotos y vídeos, y el servicio está restringido por ahora. La operación de verano está prevista hasta el 30 de septiembre de 2026.
Este es un estudio de mi trabajo y del producto; no representa a la empresa.
Feito Pela Bya
Nombre, logo y dirección creativa de un negocio real de trufas artesanales, con sitio propio.
03 · Identidad de marca
Feito Pela Bya
- Tipo: Identidad de marca y sitio web
- Año: 2026
- Estado: Marca y sitio en uso
Creé el nombre, el concepto del logo y la dirección creativa de Feito Pela Bya, el negocio de trufas artesanales de mi hija, Marya Bheatrys, y desarrollé el sitio.
La B es una cinta
La cinta de chocolate se curva y forma la B de Bya. El lazo cierra la caja, las trufas muestran lo que hay dentro y el lettering en script firma.
Lenguaje visual
Ciruela profundo, frambuesa y crema, con filetes dorados finos. Playfair Display en los títulos, DM Sans en el texto.
Ciruela#1e0918Playfair Display
Ciruela suave#4f3345
Frambuesa#c26c96
Crema#ffede4
Rosa claro#f6d6c9
Cuatro sabores, una marca
El delantal, la cinta en B, la placa del sabor y la tarjeta de la marca se repiten en todas las escenas.
Misma encimera, misma cinta, mismo delantal.
Visualizaciones de producto creadas con asistencia de IA, bajo dirección creativa. No son fotografías.
La marca en uso
En las visualizaciones de producto, el logo aparece en el delantal y en la tarjeta, y la cinta se vuelve la B.
Placas de sabor
En el sitio
El sitio aplica la misma paleta y la misma tipografía serif y lleva el pedido hasta WhatsApp.
Feito Pela Bya es la marca y el negocio de Marya Bheatrys, que también aportó ideas durante el desarrollo.
Adriano Reformas Vigo
Página de aterrizaje para el negocio de reformas de Adriano, en Vigo, España.
04 · Sitio para un negocio local
Adriano Reformas Vigo
Un sitio real para un negocio de reformas en Vigo: pensado para llevar a quien llega hasta el pedido de presupuesto por WhatsApp o teléfono, con las obras a la vista.
- Tipo
- Sitio web para negocio local
- Año
- 2026
- Estado
- En línea, sitio real de cliente
El cliente y el objetivo
Adriano es un profesional del alicatado y las reformas en Vigo, España. El sitio es la presencia digital del negocio y la puerta de entrada de los pedidos de presupuesto.
- Cliente
- Un negocio local de reformas: alicatados, albañilería, pintura y reformas integrales, en la zona de Vigo.
- Objetivo
- Convertir cada visita en una conversación: WhatsApp y teléfono quedan a un toque en todo el recorrido, sin registro y sin intermediarios.
- Idioma
- Español, el del público local. Los textos de este caso están traducidos; la interfaz capturada, no.
La experiencia del sitio
Una sola página, organizada como una conversación de presupuesto: qué hace, cómo trabaja, qué ha hecho y cómo hablar con él.
Apertura, servicios, cómo funciona, proyectos, presentación del profesional, compromiso, zona de trabajo, opiniones y contacto.
Las obras a la vista
La galería muestra 24 fotos reales de obras, organizadas por tipo, en una cuadrícula de columnas. Cada foto se abre ampliada, con leyenda.
Seis filtros: todos, cocinas, baños, reformas, exterior y “antes de empezar”.
Aquí solo aparecen fotos de interiores. Las pocas fotos de fachada y de calle del sitio no se usaron en este caso, por privacidad de los clientes.
Conversión: WhatsApp y teléfono
El camino hasta el contacto es el mismo en toda la página: un botón de WhatsApp, casi siempre con el mensaje ya escrito, y un enlace para llamar.
- En todo el recorrido
- El botón Presupuesto gratis está en la cabecera; la apertura tiene WhatsApp y Llámame ahora; cada servicio, los pasos, la presentación y la zona de trabajo llevan a WhatsApp.
- Mensaje listo
- Cada enlace abre la conversación con un texto propio, según el contexto: presupuesto general, cocina o baño, alicatados, pintura, zona de trabajo.
- En el ordenador
- Un botón flotante de WhatsApp acompaña el desplazamiento.
- En el móvil
- Por debajo de 640 px el botón flotante desaparece y entra una barra fija abajo con dos botones: Presupuesto gratis, que lleva al formulario, y WhatsApp.
Lo que monta el formulario
- Hola Adriano, soy {nombre}.
- Me interesa: {tipo de trabajo}.
- Detalles: {descripción}.
- Mi teléfono: {teléfono}.
El formulario no envía nada a un servidor: al enviar, el navegador abre WhatsApp con el mensaje listo y quien decide enviarlo es el visitante. No se almacena ningún dato.
SEO local y presencia en buscadores
Lo que el sitio declara para que buscadores y redes lo entiendan como un negocio local de reformas en Vigo.
- Datos estructurados
- JSON-LD de tipo GeneralContractor, con nombre, contacto, rango de precio y los nueve municipios atendidos.
- Metadatos
- Título, descripción, URL canónica, Open Graph y tarjeta de Twitter para la vista previa en WhatsApp y redes, y el idioma de la página (es) declarado.
- Rastreo
- sitemap.xml con la página de inicio y las dos páginas legales; robots.txt que permite todo y apunta al sitemap.
- Zona de trabajo
- Un mapa interactivo con nueve municipios y un radio de 25 km alrededor de Vigo, que también está en los datos estructurados.
- Textos alternativos
- Cada foto de la galería tiene una descripción escrita, que también sirve de leyenda.
- Páginas legales
- Aviso legal y política de privacidad, enlazados en el pie.
Este caso describe la estructura. No hay mediciones de posicionamiento, tráfico ni conversión, así que no se afirma ningún resultado.
Implementación
- Una fuente, dos builds
- El sitio es una única plantilla de HTML, CSS y JavaScript puros, sin npm ni framework. Dos scripts de Python, solo con la biblioteca estándar, sustituyen los marcadores de imagen: uno genera un archivo autocontenido con las fotos incrustadas en base64; el otro genera el index.html con las fotos como archivos separados, el que se usa en línea.
- Marca en variables
- La paleta de la guía de marca del cliente, azul obra, naranja y crema, vive en variables CSS al principio: cambiarla ahí cambia todo el sitio.
- Interacciones
- Cada comportamiento es una función aislada: botones con revelado radial desde el punto de entrada del puntero, revelado al desplazarse, filtros y lightbox de la galería, menú lateral y mapa.
- Mapa bajo demanda
- Leaflet 1.9.4, de cdnjs, y su CSS solo se descargan cuando el mapa llega a 400 px de la pantalla.
HTML, CSS y JavaScript; Python para los builds; Leaflet con OpenStreetMap; fuentes Poppins, Inter y Caveat por Google Fonts; alojado en Vercel y servido en los dominios propios del cliente, adrianoreformas.com y adrianoreformas.es.
En el móvil
El mismo sitio se reorganiza por debajo de 640 px: menú lateral, galería en dos columnas y la barra de contacto fija.
Capturas reales del sitio publicado, con una pantalla de móvil emulada. La barra fija está en una captura aparte, hecha en una ventana de 390 px.
Imágenes y rendimiento
Las fotos de obra hechas con el móvil pesan mucho; aquí llegan ligeras y solo cuando hacen falta.
- 24
- fotos en la galería
- 1100 px
- en el lado mayor
- 13 a 200 KB
- cada foto, 1,4 MB en total
Las fotos del sitio están redimensionadas y son ligeras (el repositorio no incluye el paso que las redujo). En línea, las 24 de la galería usan carga diferida (loading="lazy"), el mapa espera a estar cerca de la pantalla y la versión de despliegue referencia las fotos como archivos, en lugar de incrustarlas en el HTML.
Lo que este caso no afirma
No hay cifras de negocio, opiniones de clientes ni resultados de búsqueda o de conversión en este caso: el sitio no los mide y nada aquí los inventa. El caso tampoco muestra datos de contacto del cliente.
Luciane Correa Servicios
Sitio de servicios de limpieza y cuidado del hogar en Linares, España, con opiniones moderadas y backend propio en Cloudflare.
05 · Sitio para un negocio local
Luciane Correa Servicios
Un sitio real para un negocio de limpieza y cuidado del hogar en Linares, España: servicios, paquetes y opiniones, con un backend propio en Cloudflare para moderación y visitas.
- Tipo
- Sitio para un negocio local
- Año
- 2026
- Estado
- En línea, sitio real de cliente
El contexto y el objetivo
Luciane ofrece servicios de limpieza y cuidado del hogar en Linares. El sitio es la presencia digital del negocio: presenta los servicios con claridad y da a los visitantes un camino directo hasta el contacto por WhatsApp.
Dirección visual
La identidad documentada en el propio proyecto (ideas.md, escrito antes de la implementación): editorial, discreta, con el azul marino como firma.
- Paleta
- Azul marino profundo, marfil y un dorado suave como acento — los mismos colores usados en este caso.
- Tipografía
- Una serifada de énfasis para los títulos, con una sans-serif funcional para el texto y los botones.
- Composición
- Etiquetas numeradas por sección, una línea dorada fina como marcador editorial y bastante espacio en blanco.
Servicios y paquetes
La oferta se divide en dos niveles: cinco servicios individuales (limpieza de casas y portales, planchado, cuidado de mascotas y de niños) y tres paquetes de recurrencia (semanal, quincenal o una limpieza profunda).
Conversión: todo lleva al WhatsApp
No existe un único botón de contacto: cada sección tiene el suyo, con un mensaje pre-escrito específico para ese contexto.
- Mensajes contextuales
- Cada servicio, cada paquete y el formulario de presupuesto abren el WhatsApp con un texto propio, ya escrito.
- Botón flotante
- Un botón de WhatsApp acompaña el desplazamiento de toda la página, ajustando su posición para no cubrir nunca el pie de página.
- Formulario de presupuesto
- Nombre, teléfono, servicio y mensaje: al enviarlo, el navegador abre el WhatsApp con todo organizado. Nada se envía a un servidor.
Cómo trabajo
Una sección corta y transparente sobre qué esperar en cada visita, con una invitación honesta: mostrar el antes y después de tu propia casa por WhatsApp, no con fotos genéricas.
Opiniones y moderación
El sitio tiene un sistema real de opiniones públicas, con un panel de moderación detrás.
En el momento de esta captura, la producción todavía no tenía ninguna opinión pública — el formulario existe y funciona, pero ninguna valoración había sido enviada y aprobada todavía. Cada envío llega como pendiente; solo se publica después de que Luciane lo aprueba desde el panel de administración.
Ingeniería y Cloudflare
- Frontend
- React 19, TypeScript y Vite, con Tailwind CSS 4 para el sistema visual.
- Opiniones
- Una función de Cloudflare guarda cada envío en Cloudflare KV como pendiente; un panel propio, protegido por contraseña (token Bearer), aprueba, oculta o elimina.
- Antispam
- Un campo invisible (honeypot) en el formulario público: solo los bots lo rellenan, y el envío se descarta cuando eso ocurre.
- Visitas por país
- Otra función cuenta las visitas usando el país que la propia red de borde de Cloudflare informa, sin guardar IP ni ningún dato personal — solo el total por país.
React 19 · TypeScript · Vite 7 · Tailwind CSS 4 · Cloudflare Pages · Cloudflare Pages Functions · Cloudflare KV.
En el móvil
La misma página se reorganiza en una sola columna, con el menú principal convirtiéndose en un panel deslizante.
Capturas reales de la producción publicada, a 390 px de ancho.
Lo que este caso no afirma
El sitio está en línea y la implementación es real, pero este caso no afirma impacto de negocio: no hay métricas documentadas de leads, ventas, aumento de conversión o crecimiento en búsquedas. La sección de opiniones describe el sistema tal como es, sin inventar valoraciones que todavía no existen.
Matteo
Una invitación de cumpleaños que evolucionó hacia una experiencia digital de varias páginas: una escena que cambia con la hora local de quien visita, una cuenta regresiva, confirmación de asistencia y sugerencias de regalo.
06 · Experiencia digital interactiva
Matteo
Una invitación de cumpleaños que evolucionó hacia una experiencia digital interactiva de varias páginas, combinando narrativa visual, una atmósfera dinámica, interacción y una experiencia responsiva.
- Tipo
- Experiencia digital interactiva
- Año
- 2026
- Estado
- En línea, proyecto de autor
De una invitación compartible a una experiencia
El punto de partida era una invitación de cumpleaños pensada para compartir por mensaje. La propuesta evolucionó hacia una experiencia digital completa: un enlace que abre un pequeño recorrido interactivo, no una imagen única.
Un escenario que cambia con el día
La atmósfera de la página cambia según la hora local de quien visita: día, atardecer y noche tienen su propia paleta, luz e ilustraciones — no es un efecto decorativo fijo, se calcula en cada visita.
Más que una atmósfera
La página tiene capas de narrativa: una cuenta regresiva real, una cita de apertura y una invitación a tocar pequeños detalles de la historia.
Un universo visual consistente
Las mismas ilustraciones acompañan el cambio de atmósfera, en versiones propias para el día y la noche, reforzando la identidad visual de la experiencia.
El universo visual está inspirado en 'El Principito', de Antoine de Saint-Exupéry: sus personajes y motivos aparecen como referencia temática, sin implicar afiliación, licencia o propiedad por parte de x7rG.
La invitación continúa más allá de la página principal
Tres rutas propias extienden la experiencia: confirmación de asistencia, cómo llegar y sugerencias de regalo — funcionalidad real, no capturas decorativas.
Ingeniería
- Frontend
- React 19, TypeScript y Vite, con Tailwind CSS 4 y CSS propio para el sistema de atmósfera.
- Atmósfera
- El estado día/atardecer/noche se calcula a partir de la hora local del navegador de quien visita, reevaluado cada pocos minutos.
- Regalo a distancia
- Generación del código Pix (estándar BR Code/EMV del Banco Central de Brasil), incluido el cálculo del CRC16, enteramente en el navegador.
- Accesibilidad
- La preferencia del sistema por reducir el movimiento desactiva la interacción de paralaje y las transiciones más elaboradas.
React 19 · TypeScript · Vite 7 · Tailwind CSS 4 · Google Forms · Google Maps · YouTube (música incorporada).
En el móvil
La navegación principal se convierte en un panel deslizante y las cuatro rutas quedan fijas en una barra inferior — una reorganización deliberada, no un escritorio reducido de escala.
La misma función, reorganizada para el tacto — no solo reducida de escala.
Lo que este caso no muestra
Por privacidad, este caso no reproduce el formulario de confirmación de asistencia en vivo, el mapa exacto del evento, ni ningún dato del sistema de regalo a distancia vía Pix (clave, nombre del destinatario o código QR). Estas funciones se describen, no se muestran en su estado real.
Login The Moon
Una pantalla de acceso convertida en una pequeña historia espacial: escenario lunar, alunizaje animado y una tarjeta que reacciona al puntero.
07 · Experiencia de acceso
Login The Moon
Una pantalla de login que escenifica una llegada: un módulo lunar desciende, el polvo se levanta y el botón de entrar pasa a ser parte de la escena.
- Tipo: Experimento de login cinematográfico
- Año: 2026
- Estado: Publicado como demostración
Captura del proyecto publicado. La interfaz de la app está en inglés.
El login se vuelve una secuencia
Dos gestos, dos respuestas. El primer toque en cualquier lugar de la página hace descender la nave; el envío del formulario dura 3,6 s y termina en “Access granted”.
6,4 s de descenso
Primer toque
Cualquier clic o toque en la página libera el audio e inicia el aterrizaje: la nave empieza a descender 0,6 s después y tarda 6,4 s. Ocurre una vez por visita.
3,6 s
Enviar
Con correo y contraseña rellenados, el botón entra en carga durante 3,6 s, suena la secuencia de activación y una bicicleta cruza el botón.
estado final
Llegada
El botón se pone verde, el texto cambia a “Welcome aboard.” y la nave completa el aterrizaje a su propio ritmo. No hay redirección: la llegada es el final.
El descenso
No es un vídeo: la nave es una imagen colocada sobre la escena y movida con CSS, con propulsores, polvo y sombra en el mismo reloj.
+1,2 s
+2,1 s
+3,0 s
+4,6 s
Cuatro fotogramas de la misma grabación, recortados alrededor de la nave. Los tiempos cuentan desde el primer toque.
Catorce capas
La nave, dos propulsores, el brillo del motor, dos polvos, cinco humos, dos ondas de polvo y la sombra andan en un solo reloj de 6,4 s y se activan con una única clase, is-activated.
El botón forma parte de la escena
El botón de entrar no solo confirma. En los 3,6 s de espera una bicicleta lo cruza hacia un brillo lunar, y el resultado llega como estado del propio botón.
Reposo
Enviando
Acceso
La silueta de la bicicleta es una imagen generada con IA y aparece en el botón a tamaño natural. La silueta anterior, obtenida de internet, se eliminó del proyecto.
Movimiento y sonido en el mismo reloj
El audio no es un archivo: se sintetiza en el navegador con la Web Audio API, en dos secuencias, una para cada gesto. Las barras muestran, en segundos, lo que programa el código.
Primer toque
Imagen
- Descenso 0.6–7 s
Sonido
- Motor grave 0.62–6.82 s
- Ruido de presión 0.62–6.72 s
- Toque 5.96–6.54 s
- Asentamiento 6.2–6.73 s
Envío
Imagen
- Carga 0–3.6 s
Sonido
- Access granted
- Activación 0.02–0.62 s
- Movimiento 0.12–2.67 s
- Onda lunar 1.17–2.97 s
- Acorde 3.04–3.93 s
Escucha las dos secuencias
Muestras renderizadas con el propio código de audio de la app, con el volumen normalizado. Nada suena solo.
Por dentro
- Estado
- Un estado de React con tres valores, idle, loading y success, gobierna el botón, la tarjeta y el mensaje. El envío solo sale de idle con correo y contraseña rellenados; un temporizador de 3,6 s lleva a success y se cancela al salir de la página.
- Aterrizaje
- Un segundo interruptor, separado del login: sceneActivated. Un clic o toque en cualquier lugar lo activa una vez por visita y el CSS asume las capas de la nave.
- Puntero
- La tarjeta lee la posición del ratón y escribe dos variables de CSS, --shine-x y --shine-y, que mueven el brillo de la superficie. El toque no mueve el brillo.
- Sonido
- El AudioContext solo nace tras un gesto del visitante. Osciladores, ruido filtrado y envolventes de ganancia forman las dos secuencias, sin ningún archivo de audio.
- Adaptación
- La escena es aria-hidden y el estado usa aria-live="polite". Con prefers-reduced-motion las animaciones caen a casi cero y la nave aparece quieta, sin propulsores ni polvo. Una señal de WebView mantiene las animaciones dentro de apps. Hay ajustes para pantallas de hasta 560 px, vertical y alturas de hasta 740 px.
Next.js 16 y React 19, TypeScript 5, exportados como sitio estático; CSS propio (Tailwind está importado, pero no dibuja la interfaz) y Web Audio. Publicado en GitHub Pages y Cloudflare Workers.
En el móvil
La tarjeta ocupa el ancho de la pantalla y la escena retrocede al fondo. Las dos capturas son del estado real en 390 × 844, el diseño del propio proyecto.
Capturas reales del proyecto publicado.
Lo que esto no es
Es un experimento de interfaz, no un sistema de autenticación. Cualquier correo con una contraseña rellenada dispara la demostración: no hay cuentas, servidor, sesión ni validación. Google, Apple, recuperación de contraseña y creación de cuenta son elementos visuales que solo muestran un mensaje (“ready to connect”); no existe ninguna integración.
Light Login
Una pantalla de acceso donde la luz controla la interfaz: una lámpara interactiva, el movimiento del cordón y audio generado en el navegador.
08 · Experiencia de acceso
Light Login
Cuando la lámpara se enciende, aparece el formulario. Cuando se apaga, el formulario sale de la pantalla y de la navegación por teclado: la luz es el estado de la interfaz.
- Tipo: Experimento de login controlado por la luz
- Año: 2026
- Estado: Publicado como demostración
Un cordón, dos respuestas
El mismo cordón responde de dos formas, y 4 píxeles de movimiento deciden cuál.
- Arrastrar
- El cordón reacciona al desplazamiento del puntero: gira hasta 38° y se alarga del 68 % al 84 %. Al soltar, vuelve con un rebote elástico. La luz sigue como estaba.
- Tocar, clic, Enter o Espacio
- Un tirón corto: 190 ms después la luz alterna, la escena tarda 0,7 s en cambiar y el formulario entra o sale.
Puntero o toque
Solo importan el desplazamiento horizontal y el vertical respecto al pivote, el punto del que cuelga el cordón.
Geometría
ángulo = asin(desplazamiento ÷ longitud de reposo), con el ángulo limitado a 38°. El desplazamiento vertical suma hasta un 16 % a la longitud.
Ángulo y longitud
Se convierten en dos variables CSS, --chain-angle y --chain-length, que giran y estiran el mismo elemento sin recrearlo.
Soltar
Con más de 4 px de movimiento fue un arrastre: el cordón vuelve y la luz se queda. Con 4 px o menos fue un clic: la luz alterna.
Apagar la luz saca la interfaz del teclado
Con la luz apagada, el formulario no solo se oscurece: sale del orden de Tab, sale del árbol de accesibilidad y deja de recibir toques. Encender lo devuelve todo.
Luz encendida
- Apagar o abajur
- @_7Ragnar
- Senha
- Entrar
Luz apagada
- Acender o abajur
- el formulario sale del orden
Paradas del Tab en el proyecto, con los nombres que usa la propia app, en portugués.
aria-pressed- El botón del cordón dice si la luz está encendida, y su nombre cambia entre “Apagar o abajur” y “Acender o abajur”.
aria-hidden- El formulario también queda invisible y sin clics: sale del árbol de accesibilidad y del alcance del puntero.
tabIndex = -1- Los campos y el botón Entrar salen del orden de Tab: el teclado solo alcanza el cordón.
role="status"- El mensaje “Acesso realizado.” se anuncia sin quitar el foco de donde está.
Por dentro
- Sonido
- Cuatro respuestas sintetizadas en el navegador con la Web Audio API, sin archivos de sonido: el cordón traquetea mientras se balancea, el interruptor hace un clic (y una breve energía al encender), entrar da tres notas y un error da un tono descendente. El audio solo empieza tras el primer toque.
- Movimiento
- La escena, el cordón y el formulario son transiciones de CSS. Con prefers-reduced-motion caen a casi cero y el estado sigue siendo el mismo.
- Hecho con
- Next.js 16, React 19 y TypeScript 5, exportados como sitio estático; CSS propio y la fuente Manrope. Publicado en GitHub Pages y Cloudflare Workers.
Lo que esto no es
Es un experimento de interfaz. No se envía ni se guarda ninguna credencial y no hay autenticación: el formulario solo usa la validación del navegador (correo válido, contraseña de al menos 6 caracteres) y muestra “Acesso realizado.” para cualquier par válido.
Checkout
Prototipo educativo de un checkout, responsivo e interactivo, para estudiar React, TypeScript, CSS 3D y animaciones. No procesa pagos.
09 · Prototipo de interfaz
Checkout
- Tipo: Prototipo de checkout interactivo
- Año: 2026
- Estado: Publicado como demostración
Un checkout en el que la tarjeta es la interfaz: lee el formulario mientras escribes, gira para mostrar el CVV y acompaña el pedido hasta el comprobante. Un prototipo de estudio, no un sistema de pago.
Capturas reales del prototipo publicado, con la interfaz en portugués. La tarjeta y los datos son de demostración.
La tarjeta es el formulario
Cada campo tiene su lugar en la tarjeta, y la tarjeta solo muestra lo que tiene el formulario: nada en ella es decorativo.
- Número
- Aparece con formato en el frente. El primer dígito elige el color, la marca y el formato.
- Nombre
- Pasa a ser el titular, con hasta 28 caracteres.
- Validez
- Pasa a ser la validez, con formato MM / AA.
- CVV
- La tarjeta gira y muestra el reverso, con el código enmascarado.
La marca sigue una regla didáctica simplificada, según el primer dígito, del 1 al 8. No es detección real de marca ni validación del emisor.
El pedido lee el mismo estado
Cantidad (de 1 a 5), cupón y total salen del mismo estado de React. El cupón de prueba X7RG007 da un 10 % de descuento de demostración, y el total recalculado vuelve en el botón Pagar y en el comprobante.
- 2 × € 189,00
- € 378,00
- Cupón X7RG007 · 10 %
- − € 37,80
- Total
- € 340,20
Del clic al comprobante
Pagar lleva la superposición por tres estados. El comprobante es el final del flujo, no el tema del proyecto.
idleLa página normal, con el formulario y el resumen.
processingDurante 2,7 s, la tarjeta flota sobre un fondo desenfocado.
approvedEl terminal muestra el importe e imprime un comprobante sin valor fiscal.
Por dentro
focused- Qué campo tiene el foco. Define la cara de la tarjeta: enfocar el CVV la gira.
number- Marca, color, formato del número y longitud del CVV.
quantity, discount- Subtotal, descuento y total, repetidos en el botón y en el comprobante.
paymentState- idle, processing y approved: la superposición y el temporizador de 2,7 s.
El giro es solo CSS: una escena con perspectiva de 1100 px, dos caras en preserve-3d y una transición de 0,72 s a rotateY(180deg), activada por una clase.
React 19.2.6 y TypeScript 5.9, Vite 8 y CSS (3D y keyframes). Publicado como archivos estáticos en GitHub Pages y Cloudflare Workers.
Lo que esto no es
Es un prototipo de estudio. No procesa pagos, no envía ni guarda datos de tarjeta y no valida tarjetas: solo comprueba que los campos estén rellenos y su longitud. PayPal y Apple Pay son pestañas visuales, sin integración. Las marcas son ilustrativas y no indican vínculo con ninguna. Los textos de ambientación de la interfaz, como “Checkout protegido”, no significan seguridad de pago. El comprobante no tiene valor fiscal.
Recibo Digital
Una impresora térmica que imprime un recibo de demostración, en el navegador y sin back end de datos.
10 · Experiencia interactiva
Recibo Digital
- Tipo: Experiencia interactiva de front-end
- Año: 2026
- Estado: Publicado como demostración
Un pago aprobado suele acabar en una línea de texto. Este proyecto se pregunta si una confirmación digital puede conservar parte del ritual de recibir un recibo impreso: la máquina se enciende, el papel sale, una señal avisa de que ha terminado.
Un recibo, cuatro estados
El visitante nunca cambia de pantalla: la impresora pasa por cuatro estados y todo lo que se ve o se oye depende de cuál esté activo.
En espera
idlepunto de partida
- Papel
- Recogido
- LED
- Encendido
- Neón
- Reposo
- Sonido
- Silencio
- Acciones
- Imprimir
Imprimiendo
printingclic en Imprimir
- Papel
- Sale en 1,9 s
- LED
- Parpadea
- Neón
- Intenso
- Sonido
- Impresora
- Acciones
- Bloqueadas
Listo
ready1,9 s después- Papel
- Todo fuera
- LED
- Verde intenso
- Neón
- Reposo
- Sonido
- Blim
- Acciones
- Cortar o repetir
Cortado
tornclic en Cortar
- Papel
- Cae y se va
- LED
- Atenuado
- Neón
- Reposo
- Sonido
- Silencio
- Acciones
- Repetir
Desde “listo” y desde “cortado” se puede imprimir de nuevo y el ciclo vuelve a empezar.
Ninguna de estas salidas se anima por su cuenta: todas leen el mismo estado, así que nada se desincroniza.
El momento de la impresión
Es la interacción que da sentido al resto y una imagen fija no la muestra. La grabación es de la experiencia real, sin sonido.
- 0 s
Imprimir recibo: el clic activa el sonido de la impresora y el estado pasa a imprimiendo.
- 0 a 1,9 s
El papel baja por la ranura mientras el LED parpadea y el neón se intensifica.
- 1,9 s
El estado pasa a listo y el blim suena en el mismo instante. Los botones pasan a ser Cortar e Imprimir de nuevo.
- Después
Cortar lleva al estado cortado: el papel cae y desaparece.
El sonido
La impresora es una grabación hecha por Rogério, de 1,9 s, la misma duración que la animación del papel. El blim se sintetiza en el navegador con Web Audio, con dos tonos (880 Hz y 1318,5 Hz).
El sonido solo suena cuando pulsas un botón.
Por dentro
Un estado, varias salidas
Un único valor de estado en React se convierte en una clase de la máquina. El CSS lee esa clase para el papel, los LED, el neón, los botones y el texto de apoyo. Nada se anima por su cuenta, así que nada se desincroniza.
El sonido ya está listo al hacer clic
La grabación de la impresora se carga en cuanto se abre la página. El contexto de audio se crea con el clic, porque los navegadores solo permiten sonido tras un gesto del visitante. El blim sale de la misma transición que lleva al estado listo.
El papel solo existe dentro de la ranura
El recibo se recorta con la ventana de la máquina y se mueve solo con translate3d, una transformación acelerada por GPU, elegida para que el movimiento sea estable en navegadores WebKit, como el del iPhone.
Hecho con
- Interfaz
- React 19 y TypeScript.
- Movimiento
- CSS: keyframes, transiciones y translate3d.
- Sonido
- Web Audio API y una grabación en WAV.
- Ejecución
- vinext (la API de Next.js sobre Vite 8) en un Cloudflare Worker, que hace el SSR y la optimización de imágenes.
- Calidad
- ESLint con jsx-a11y y una prueba sobre el HTML renderizado.
No hay base de datos ni back end de datos. El único código de servidor es el Worker que entrega la página.
Lo que esto no es
Es una demostración de interfaz. Los importes, la fecha y la tarjeta del recibo son ficticios: no se cobra nada, no se envía por correo ni se guarda, y el recibo no tiene valor fiscal. La idea de partida, gastar menos papel cuando basta un comprobante digital, es solo motivación: el proyecto no mide ningún ahorro.
DiscordCameraLive
Adaptación de GoLiveBypass para restaurar Go Live y cámara en Discord.
11 · Utilidad de escritorio
DiscordCameraLive
DiscordCameraLive es un fork de GoLiveBypass. Este caso separa lo que vino del proyecto original de lo que x7rG modificó y mantiene.
- Tipo
- Aplicación de escritorio (fork)
- Año
- 2026
- Estado
- Fork mantenido, base v1.1.5
La base: GoLiveBypass
GoLiveBypass fue creado por bezumiya. DiscordCameraLive parte de su versión 1.1.5 y mantiene la licencia GPL-3.0-or-later.
- Qué hace
- Un plugin para Equicord/Vencord levanta un enrutador SOCKS local y envía solo el WebSocket de gateway de Discord por un proxy fuera de Brasil: el del usuario, un Tor local o un proxy gratuito validado. El resto del tráfico sale directo.
- Por qué existe
- Según el README, nació después de que la autoridad de protección de datos de Brasil (ANPD) ordenara a Discord suspender Go Live en el país. El programa esquiva esa restricción regional para Go Live y la cámara.
- Cómo se instala
- Una interfaz Electron de un clic, instaladores y un modo standalone en scripts, y una API en Go que recibe reportes de errores. Todo esto viene del proyecto original.
- Quién lo hizo
- Además de bezumiya, el README del fork acredita a mazxxy (la idea del diseño del proxy), Vithor (el primer instalador), cleo-dev (la interfaz gráfica) y otros colaboradores.
Lo que x7rG cambió
Establecido por diff contra la versión 1.1.5 del original. El plugin y la API en Go siguen como en el original; el trabajo está en la aplicación de escritorio, la entrega y la documentación.
Plugin Equicord/Vencord
Heredado
La lógica es la del original. En el fork cambiaron el nombre del plugin y el texto de acerca de.
API en Go (reportes de errores)
Heredado
Heredada. Solo se cambiaron nombres y el repositorio de destino.
Interfaz Electron
Heredado + x7rG
La interfaz viene del original. x7rG la endureció: nodeIntegration desactivado, aislamiento de contexto y sandbox activados, preload por contextBridge y una Content-Security-Policy en el HTML.
El cambio del app.asar
x7rG
El cambio dejó de borrar antes de escribir: el contenido nuevo se prepara en una carpeta temporal, el app.asar actual pasa a un nombre de rollback y solo después entra el nuevo, con vuelta atrás si algo falla.
Entradas del IPC
x7rG
La dirección de proxy que llega de la interfaz se valida (tipo y límite de 512 caracteres) y la petición de altura de la ventana tiene un tope de 1200.
Nombre, marca e instaladores
Heredado + x7rG
Los instaladores y el standalone son heredados. El proyecto se renombró en código, textos y scripts, y el icono y el logo pasaron a ser un emblema x7rG, con el banner x7rG Enterprise.
Integración continua
x7rG
CI en cada push y pull request: compila la interfaz, comprueba que la copia embebida del bypass no diverja, ejecuta vet y las pruebas de la API y las pruebas de shell; más un Dependabot semanal.
Documentación y entrega
x7rG
README dividido en cinco guías, SECURITY.md y un paso a paso para principiantes; release v1.1.5 con ejecutable de Windows, AppImage de Linux y dmg/zip de macOS.
Por dentro: el cambio del app.asar
El programa activa el bypass cambiando el app.asar de la instalación de Discord (el original pasa a _app.asar). El cambio fue en el orden de las operaciones.
Antes (original)
- Borra el app.asar actual
- Escribe el contenido nuevo en su lugar
- Un fallo a medias deja a Discord sin app.asar
Después (x7rG)
- Escribe el contenido nuevo en una carpeta temporal
- Mueve el app.asar actual a un nombre de rollback
- Mueve la carpeta nueva a app.asar y solo entonces borra el rollback
- Si falla el último paso, vuelve el app.asar anterior
- nodeIntegration: true,- contextIsolation: false,+ nodeIntegration: false,+ contextIsolation: true,+ sandbox: true,Líneas reales del diff de electron/main.ts contra la v1.1.5 del original. El diagrama es del portafolio.
Riesgos y límites
- Términos de Servicio
- Usar clientes modificados y proxies para esquivar la restricción regional puede violar los Términos de Servicio de Discord. El README y el SECURITY.md del proyecto lo advierten y piden uso bajo tu propio riesgo; el riesgo de sanción a la cuenta se describe como bajo, pero existente.
- Sin vínculo con Discord
- No es una función oficial y no tiene afiliación, apoyo ni aval de Discord. No hay garantía de que Go Live funcione en todas las sesiones ni de la seguridad de la cuenta.
- Toca la instalación de Discord
- La aplicación renombra el app.asar original a _app.asar y escribe un app.asar nuevo; desactivar restaura el original. La aplicación no está firmada y el sistema avisa la primera vez que se abre.
- Versión
- El fork se basa en la v1.1.5 y publicó la release v1.1.5 el 22 de agosto de 2026. El original siguió adelante (v2.0.9, del 20 de septiembre de 2026) y este fork no incorpora esos cambios.
- Privacidad
- Según SECURITY.md, ningún dato va a servidores del proyecto. El tráfico del gateway pasa por el proxy elegido y los proxies gratuitos son débiles para el anonimato.
Crédito
- Proyecto original
- DiscordCameraLive se basa en GoLiveBypass, creado por bezumiya (GPL-3.0-or-later). El plugin, la API en Go, los instaladores y la interfaz original son del proyecto original y de sus colaboradores.
- x7rG
- Rogério Gomes / x7rG adaptó y mantiene este fork: renombró el proyecto, endureció la interfaz Electron, hizo transaccional el cambio del app.asar, validó entradas del IPC, añadió CI, reorganizó la documentación y publicó la release, según el historial y el diff del repositorio. No es el creador de GoLiveBypass.
- IA y activos
- Las modificaciones se desarrollaron con asistencia de IA: el historial del repositorio registra un agradecimiento a Claude por el código, y el alcance no está documentado. El archivo del emblema x7rG usado como icono se generó con IA.
Sobre mí
Empiezo por lo que ya existe: un grupo de WhatsApp, un PDF, un recuerdo de infancia. Después diseño y construyo lo que falta.
Rogério GomesCreador de x7rG ENTERPRISE
Soy Rogério Gomes, creador de x7rG ENTERPRISE. Trabajo entre tecnología, diseño y producto, transformando problemas, necesidades e ideas en experiencias digitales.
No todo proyecto empieza con una especificación formal. Algunos empiezan con una necesidad operativa real, un proceso ineficiente, una interfaz que podría funcionar mejor, o una idea que vale la pena explorar. Mi papel es darle dirección a esa idea y convertirla en algo que se pueda ver, usar y probar.
De la idea a la ejecución
Participo en todo el proceso, no solo en una etapa de él:
- Idea
- Dirección
- Experiencia
- Interfaz
- Desarrollo
- Prueba
- Refinamiento
El código y el diseño no son etapas aisladas. Son partes del mismo proceso de construcción.
La inteligencia artificial también forma parte de ese proceso. Uso la IA como herramienta para desarrollar, explorar alternativas, crear ciertos activos y acelerar iteraciones, manteniendo la dirección del proyecto y dejando clara su participación cuando forma parte del resultado.
La base es cruzada: diseño visual, desarrollo de sistemas, gestión de tecnología y sistemas técnicos.
- Diseño GráficoUniversidade Salgado de Oliveira — UNIVERSO
- Análisis y Desarrollo de SistemasFaculdade de Americana — FAM
- Posgrados en Inteligencia Artificial, Business Intelligence, Pericia Forense y Gobernanza de TIFACUMINAS
- Formación técnica en Electrotecnia y Mecatrónica
Lainteligenciaartificialseconsolidócomounadelasprincipalesherramientastecnológicasdelaactualidadycomounafuerzatransformadoradelaeconomíaylasociedad.Suevoluciónyainfluyeenlaproductividad,elmercadolaboral,laformaenqueempresasyprofesionalescreansolucionesydistintosaspectosdelavidadelaspersonas.
Al final, cada proyecto de este portafolio es eso: una idea que encontró dirección, forma y uso real.
La identidad
De rG a x7rG.
Siempre me ha gustado que me llamen por mi nombre y apellido: Rogério Gomes. Para mí, el nombre siempre llevó identidad.
Muchas de las personas que admiré a lo largo de mi vida también fueron reconocidas por su propio nombre y por lo que lograron construir con él. Entre ellas, Steven Paul Jobs siempre fue una referencia por su trayectoria de superación, emprendimiento y resiliencia.
Mi primera identidad nació justamente de ahí.
rGRogério Gomes
Un símbolo creado a partir de mis propias iniciales. Fue el comienzo de una identidad que aún evolucionaría junto con mis ideas y proyectos.
Con el tiempo, rG se convirtió en x7rG.
- xMultiplicaciónIdeas, posibilidades y todo lo que puede nacer de una idea inicial.
- 7Número de la suerteEs personal. Mi número de la suerte.
- rGRogério GomesEl origen de todo. Eso no cambió.
Después llegó ENTERPRISE.
ENTERPRISE
Para mí, no representa solo una empresa. También representa iniciativa: la disposición de asumir desafíos y transformar ideas en proyectos reales.
La identidad ganó entonces un nuevo símbolo: el escudo.
Siempre me identifiqué con el imaginario de los vikingos y los espartanos. No por la figura del guerrero en sí, sino por lo que esa imagen representa para mí:
Lucha.Persistencia.Lealtad.
El escudo se convirtió en una representación visual de esos principios y pasó a formar parte de la identidad de x7rG ENTERPRISE.
La identidad evolucionó.El origen sigue siendo el mismo.
Rogério Gomes.
Trayectoria
Algunas empresas que formaron parte de mi trayectoria.
Experiencias, equipos y desafíos que también ayudaron a construir al profesional que soy hoy.
- 20º B Log Pqdt
- Altera & Ocyan FPSO
- Atento Brasil
- BFE
- Exército Brasileiro
- GAECO - PR
- Nexa
- Ministério Público do Paraná
- Odebrecht Engenharia & Construção
- Petrobras
- SONDA IT Services
- Spread Tecnologia
- Foresea
- EQS Engenharia
Formación & Credenciales
La formación es un proceso continuo. Aquí reúno los estudios, las especializaciones y las credenciales que sostienen el trabajo técnico y creativo de este portafolio — la documentación como evidencia, no como vitrina.
Archivo en actualización
Esta sección reúne una selección de mi formación y credenciales. Otros diplomas, certificaciones y cursos realizados se incorporarán progresivamente.
Universidade Salgado de Oliveira — UNIVERSO
Design Gráfico
Design
Algunos datos personales se han difuminado en esta copia pública para proteger la privacidad del titular.
Contacto
x7rG ENTERPRISE
Las buenas ideas merecen salir del papel.
Si hay un proyecto, un problema que resolver o una idea que merece construirse, podemos empezar por una conversación.
Rogério GomesCreador de x7rG ENTERPRISE