Neon Blockfall
Um jogo de blocos com identidade neon própria, em teste fechado no Google Play.
Rogério Gomes
Developer e Graphic Designer
Desenho identidades visuais e construo aplicativos, jogos e sites, do primeiro traço à última linha de código.
Projetos
01 · Jogo para Android
Neon Blockfall
- Tipo: Jogo para Android
- Ano: 2026
- Estado: Teste fechado no Google Play
O jogo de blocos que eu jogava sem parar quando criança virou o ponto de partida de um que criei.
Capturas reais do jogo, com a interface em espanhol.
- Fundo, #050914
- Ciano, #65efff
- Magenta, #ff2ea6
- Ouro, #ffd45a
- Texto, #eaf7ff
O que se vê
Sistema neon
Fundo azul-marinho quase preto, com ciano, magenta e ouro como acentos. Moldura de cantos, rótulos monoespaçados em caixa alta e números em Space Grotesk.
Fases e cenários
Quatro cenários visuais e uma nova fase a cada 8 linhas. Os modificadores (sobrecarga, pulso, blackout) se alternam com fases calmas.
Controles por toque
Deslizar move, tocar gira, deslizar para baixo encaixa e para cima guarda a peça na reserva. Seis botões grandes ficam na base da tela.
Como é construído, por trás da tela
Núcleo em TypeScript puro
As regras do jogo vivem em um módulo sem React, DOM nem áudio, que pode ser testado em isolamento com Vitest.
Estado serializável
O estado do jogo é serializável: a partida pode ser retomada ao reabrir o app, e o Desafio do Dia usa uma sequência determinística por data.
Entrega para Android
Um jogo web empacotado com Capacitor. A pasta android/ é descartável: o CI a recria a cada build e reaplica por script os ajustes que a loja exige.
Uma leitura própria do gênero
Peças, modos, cenários e modificadores de fase próprios, sem reivindicar a invenção do gênero.
Tentado, não concluído
Ranking online, sem contas próprias
Quis um ranking online sem criar um sistema de contas. Tentei o Google Play Games e travei na implementação. Hoje o jogo só tem placar local.
AquaControl
Aplicativo interno de campo, supervisão e administração para uma empresa de manutenção de piscinas.
02 · Software operacional
AquaControl
- Tipo: Aplicativo interno
- Ano: 2026
- Estado: Em uso operacional desde 10 jun. 2026
Eu fazia manutenção de piscinas para a Aguas y Oleocontrol, na Espanha, e vi o trabalho de vários técnicos concentrado em grupos de WhatsApp. Desenhei e construí um aplicativo próprio para substituí-los.
Uma visita, nove passos
O técnico segue o mesmo caminho em toda visita, e o rascunho fica salvo no aparelho até o fim.
Passo 1Escolhe a piscina da rota. As já visitadas ficam bloqueadas até as 6h.
Três perfis, o mesmo produto
Técnico
A rota do dia, as piscinas, as visitas e as incidências.
Supervisão
Alertas, incidências críticas, gestão de recursos e relatórios.
Administração
Tudo isso, mais usuários, ausências e modo de manutenção.
Em uso desde 10 de junho de 2026, 7 dias por semana, cerca de 12 horas operacionais por dia, com 27 técnicos. Números informados por mim, não medidos por análises.
Da rota à coordenação
Atribuição de piscinas, ausências, estoque e relatórios em PDF por técnico, piscinas e período. A empresa usou os relatórios no controle operacional mensal, no relatório de fim de temporada e para apresentar informações a clientes.
Decisões
Sem sinal, a visita continua
Técnicos trabalhavam com sinal fraco ou nenhum. A visita fica no aparelho e, ao concluir, entra numa fila que tenta até 3 vezes sem duplicá-la, sem tela própria. Se as tentativas acabam, o item fica marcado como falha.
Permissões no banco, não só na tela
Quem pode ver e alterar o quê é imposto no banco de dados, por papel, e o acesso fica bloqueado até a troca da senha obrigatória.
Um aplicativo no lugar dos grupos
Cada técnico entra com a própria conta e o cache offline é separado por usuário. Rotas, folgas, piscinas, materiais, visitas, relatórios, fotos e vídeos ficam em um só lugar.
Sem cartão de crédito no caminho
Eu não recebia pelos custos de infraestrutura e quis evitar um serviço que pudesse cobrar ao passar do plano gratuito. Por isso saí do Firebase para o Supabase.
Como é construído
- No aparelho
- React Native com Expo e TypeScript, para Android.
- No servidor
- Supabase: contas, Postgres com regras por papel, armazenamento de mídia e funções de servidor.
- Entrega
- Builds Android pelo EAS, distribuídos como APK, com atualizações OTA. Fora da Google Play.
Contexto: o armazenamento do plano gratuito do Supabase foi excedido pelo acúmulo de fotos e vídeos, e o serviço está restrito por ora. A operação de verão está prevista até 30 de setembro de 2026.
Este é um estudo do meu trabalho e do produto; não representa a empresa.
Feito Pela Bya
Nome, logo e direção criativa de um negócio real de trufas artesanais, com site próprio.
03 · Identidade de marca
Feito Pela Bya
- Tipo: Identidade de marca e site
- Ano: 2026
- Estado: Marca e site em uso
Criei o nome, o conceito do logo e a direção criativa da Feito Pela Bya, o negócio de trufas artesanais da minha filha, Marya Bheatrys, e desenvolvi o site.
O B é uma fita
A fita de chocolate se curva e forma o B de Bya. O laço fecha a caixa, as trufas mostram o que há dentro e o lettering em script assina.
Linguagem visual
Ameixa profundo, framboesa e creme, com filetes dourados finos. Playfair Display nos títulos, DM Sans no texto.
Ameixa#1e0918Playfair Display
Ameixa suave#4f3345
Framboesa#c26c96
Creme#ffede4
Rosé claro#f6d6c9
Quatro sabores, uma marca
O avental, a fita em B, a placa do sabor e o cartão da marca se repetem em todas as cenas.
Mesma bancada, mesma fita, mesmo avental.
Visualizações de produto criadas com assistência de IA, sob direção criativa. Não são fotografias.
Aplicações da marca
Nas visualizações de produto, o logo aparece no avental e no cartão, e a fita vira o B.
Placas de sabor
No site
O site aplica a mesma paleta e o mesmo serifado e leva o pedido até o WhatsApp.
A Feito Pela Bya é a marca e o negócio de Marya Bheatrys, que também deu ideias durante o desenvolvimento.
Adriano Reformas Vigo
Landing page para o negócio de reformas do Adriano, em Vigo, na Espanha.
04 · Site para negócio local
Adriano Reformas Vigo
Um site real para um negócio de reformas em Vigo: pensado para levar quem chega ao pedido de orçamento por WhatsApp ou telefone, com as obras à vista.
- Tipo
- Site para negócio local
- Ano
- 2026
- Estado
- No ar, site real de cliente
O cliente e o objetivo
Adriano é um profissional de alicatado e reformas em Vigo, na Espanha. O site é a presença digital do negócio e a porta de entrada dos pedidos de orçamento.
- Cliente
- Um negócio local de reformas: alicatados, albañilería, pintura e reformas integrais, na região de Vigo.
- Objetivo
- Fazer de cada visita uma conversa: WhatsApp e telefone ficam a um toque em todo o percurso, sem cadastro e sem intermediários.
- Idioma
- Espanhol, o do público local. Os textos deste caso estão traduzidos; a interface capturada, não.
A experiência do site
Uma página só, organizada como uma conversa de orçamento: o que ele faz, como trabalha, o que já fez e como falar com ele.
Abertura, serviços, como funciona, projetos, apresentação do profissional, compromisso, zona de atuação, avaliações e contato.
As obras à vista
A galeria mostra 24 fotos reais de obras, organizadas por tipo, em uma grade de colunas. Cada foto abre ampliada, com legenda.
Seis filtros: todos, cozinhas, banhos, reformas, exterior e “antes de começar”.
Aqui aparecem só fotos de interiores. As poucas fotos de fachada e de rua do site não foram usadas neste caso, por privacidade dos clientes.
Conversão: WhatsApp e telefone
O caminho até o contato é o mesmo em toda a página: um botão de WhatsApp, quase sempre com a mensagem já escrita, e um link para ligar.
- Em todo o percurso
- O botão Presupuesto gratis fica no cabeçalho; a abertura tem WhatsApp e Llámame ahora; cada serviço, os passos, a apresentação e a zona de atuação levam ao WhatsApp.
- Mensagem pronta
- Cada link abre a conversa com um texto próprio, conforme o contexto: orçamento geral, cozinha ou banho, alicatados, pintura, zona de atuação.
- No computador
- Um botão flutuante de WhatsApp acompanha a rolagem.
- No celular
- Abaixo de 640 px o botão flutuante sai e entra uma barra fixa no rodapé com dois botões: Presupuesto gratis, que leva ao formulário, e WhatsApp.
O que o formulário monta
- Hola Adriano, soy {nombre}.
- Me interesa: {tipo de trabajo}.
- Detalles: {descripción}.
- Mi teléfono: {teléfono}.
O formulário não envia nada a um servidor: ao enviar, o navegador abre o WhatsApp com a mensagem pronta e quem decide enviá-la é o visitante. Nenhum dado é armazenado.
SEO local e presença na busca
O que o site declara para que a busca e as redes o entendam como um negócio local de reformas em Vigo.
- Dados estruturados
- JSON-LD do tipo GeneralContractor, com nome, contato, faixa de preço e os nove municípios atendidos.
- Metadados
- Título, descrição, URL canônica, Open Graph e cartão do Twitter para a prévia em WhatsApp e redes, e o idioma da página (es) declarado.
- Rastreamento
- sitemap.xml com a página inicial e as duas páginas legais; robots.txt liberando tudo e apontando para o sitemap.
- Zona de atuação
- Um mapa interativo com nove municípios e um raio de 25 km em torno de Vigo, que também está nos dados estruturados.
- Textos alternativos
- Cada foto da galeria tem uma descrição escrita, que também serve de legenda.
- Páginas legais
- Aviso legal e política de privacidade, ligados no rodapé.
Este caso descreve a estrutura. Não há medições de posicionamento, tráfego ou conversão, então nenhum resultado é afirmado.
Implementação
- Uma fonte, dois builds
- O site é um único template de HTML, CSS e JavaScript puros, sem npm nem framework. Dois scripts Python, só com a biblioteca padrão, trocam os marcadores de imagem: um gera um arquivo autocontido com as fotos embutidas em base64; o outro gera o index.html com as fotos como arquivos separados, o usado no ar.
- Marca em variáveis
- A paleta do guia de marca do cliente, azul-obra, laranja e creme, vive em variáveis de CSS no topo: mudar ali muda o site inteiro.
- Interações
- Cada comportamento é uma função isolada: botões com revelação radial a partir do ponto de entrada do ponteiro, revelação ao rolar, filtros e lightbox da galeria, menu lateral e mapa.
- Mapa sob demanda
- O Leaflet 1.9.4, da cdnjs, e o CSS dele só são baixados quando o mapa chega a 400 px da tela.
HTML, CSS e JavaScript; Python para os builds; Leaflet com OpenStreetMap; fontes Poppins, Inter e Caveat pelo Google Fonts; hospedado na Vercel e servido nos domínios próprios do cliente, adrianoreformas.com e adrianoreformas.es.
No celular
O mesmo site se reorganiza abaixo de 640 px: menu lateral, galeria em duas colunas e a barra de contato fixa.
Capturas reais do site publicado, com uma tela de celular emulada. A barra fixa está numa captura à parte, feita numa janela de 390 px.
Imagens e desempenho
Fotos de obra tiradas no celular pesam muito; aqui elas chegam leves e só quando fazem falta.
- 24
- fotos na galeria
- 1100 px
- no lado maior
- 13 a 200 KB
- cada foto, 1,4 MB no total
As fotos do site estão redimensionadas e leves (o repositório não traz o passo que as reduziu). No ar, as 24 da galeria usam carregamento sob demanda (loading="lazy"), o mapa espera chegar perto da tela e a versão de deploy referencia as fotos como arquivos, em vez de embuti-las no HTML.
O que este caso não afirma
Não há números de negócio, avaliações de clientes nem resultados de busca ou de conversão neste caso: o site não os mede e nada aqui os inventa. O caso também não mostra dados de contato do cliente.
Luciane Correa Servicios
Site de serviços de limpeza e cuidado do lar em Linares, na Espanha, com depoimentos moderados e backend próprio na Cloudflare.
05 · Site para negócio local
Luciane Correa Servicios
Um site real para um negócio de limpeza e cuidados do lar em Linares, na Espanha: apresentação de serviços, pacotes e depoimentos, com um backend próprio na Cloudflare para moderação e visitas.
- Tipo
- Site para negócio local
- Ano
- 2026
- Estado
- No ar, site real de cliente
O contexto e o objetivo
Luciane oferece serviços de limpeza e cuidado do lar em Linares. O site é a presença digital do negócio: apresenta os serviços com clareza e dá aos visitantes um caminho direto até o contato pelo WhatsApp.
Direção visual
A identidade documentada no próprio projeto (ideas.md, escrito antes da implementação): editorial, discreta, com o azul-marinho como assinatura.
- Paleta
- Azul-marinho profundo, marfim e um dourado suave como acento — as mesmas cores usadas neste caso.
- Tipografia
- Uma serifada de destaque para títulos, com uma sans-serif funcional para texto e botões.
- Composição
- Rótulos numerados por seção, uma régua dourada fina como marcador editorial e bastante espaço em branco.
Serviços e pacotes
A oferta se divide em dois níveis: cinco serviços individuais (limpeza de casas e portais, passar roupa, cuidado de animais e de crianças) e três pacotes de recorrência (semanal, quinzenal ou uma limpeza profunda).
Conversão: tudo leva ao WhatsApp
Não existe um único botão de contato: cada seção tem o seu, com uma mensagem pré-escrita específica para aquele contexto.
- Mensagens contextuais
- Cada serviço, cada pacote e o formulário de orçamento abrem o WhatsApp com um texto próprio, já preenchido.
- Botão flutuante
- Um botão de WhatsApp acompanha a rolagem da página inteira, ajustando a posição para nunca cobrir o rodapé.
- Formulário de orçamento
- Nome, telefone, serviço e mensagem: ao enviar, o navegador abre o WhatsApp com tudo organizado. Nada é enviado a um servidor.
Como funciona
Uma seção curta e transparente sobre o que esperar em cada visita, com um convite honesto: mostrar o antes e depois de cada casa pelo WhatsApp, não com fotos genéricas.
Depoimentos e moderação
O site tem um sistema real de depoimentos públicos, com um painel de moderação por trás.
No momento desta captura, a produção ainda não tinha nenhum depoimento público — o formulário existe e funciona, mas nenhuma avaliação foi enviada e aprovada ainda. Cada envio chega como pendente; só é publicado depois que Luciane aprova pelo painel de administração.
Engenharia e Cloudflare
- Frontend
- React 19, TypeScript e Vite, com Tailwind CSS 4 para o sistema visual.
- Depoimentos
- Uma função da Cloudflare guarda cada envio no Cloudflare KV como pendente; um painel próprio, protegido por senha (token Bearer), aprova, oculta ou exclui.
- Antispam
- Um campo invisível (honeypot) no formulário público: só bots o preenchem, e o envio é descartado quando isso acontece.
- Visitas por país
- Outra função conta visitas usando o país que a própria borda da Cloudflare informa, sem guardar IP nem qualquer dado pessoal — só o total por país.
React 19 · TypeScript · Vite 7 · Tailwind CSS 4 · Cloudflare Pages · Cloudflare Pages Functions · Cloudflare KV.
No celular
A mesma página se reorganiza em coluna única, com o menu principal virando um painel deslizante.
Capturas reais da produção publicada, em 390 px de largura.
O que este caso não afirma
O site está no ar e a implementação é real, mas este caso não afirma impacto de negócio: não há métricas documentadas de leads, vendas, aumento de conversão ou crescimento em buscas. A seção de depoimentos descreve o sistema como ele é, sem inventar avaliações que ainda não existem.
Matteo
Um convite de aniversário que evoluiu para uma experiência digital de múltiplas páginas: cenário que muda com o horário de quem visita, contagem regressiva, confirmação de presença e sugestões de presente.
06 · Experiência digital interativa
Matteo
Um convite de aniversário que evoluiu para uma experiência digital interativa de múltiplas páginas, combinando narrativa visual, atmosfera dinâmica, interação e uma experiência responsiva.
- Tipo
- Experiência digital interativa
- Ano
- 2026
- Estado
- No ar, projeto autoral
De um convite compartilhável a uma experiência
O ponto de partida era um convite de aniversário para compartilhar por mensagem. A proposta evoluiu para uma experiência digital completa: um link que abre em uma pequena jornada interativa, não em uma imagem única.
Um cenário que muda com o dia
A atmosfera da página muda conforme o horário local de quem visita: dia, entardecer e noite têm paletas, luz e ilustrações próprias — não é um efeito decorativo fixo, é calculado a cada visita.
Mais do que uma atmosfera
A página tem camadas de narrativa: uma contagem regressiva real, uma citação de abertura e um convite para tocar em pequenos detalhes da história.
Um universo visual consistente
As mesmas ilustrações acompanham a mudança de atmosfera, em versões próprias para o dia e para a noite, reforçando a identidade visual da experiência.
O universo visual é inspirado na obra 'O Pequeno Príncipe', de Antoine de Saint-Exupéry: seus personagens e motivos aparecem como referência temática, sem implicar afiliação, licenciamento ou propriedade por parte do x7rG.
O convite continua além da página principal
Três rotas próprias estendem a experiência: confirmação de presença, direções e sugestões de presente — funcionalidades reais, não capturas decorativas.
Engenharia
- Frontend
- React 19, TypeScript e Vite, com Tailwind CSS 4 e CSS próprio para o sistema de atmosfera.
- Atmosfera
- O estado dia/entardecer/noite é calculado a partir do horário local do navegador de quem visita, reavaliado a cada poucos minutos.
- Presente à distância
- Geração do código Pix (padrão BR Code/EMV do Banco Central), incluindo o cálculo do CRC16, inteiramente no navegador.
- Acessibilidade
- A preferência do sistema por reduzir movimento desativa a interação de paralaxe e as transições mais elaboradas.
React 19 · TypeScript · Vite 7 · Tailwind CSS 4 · Google Forms · Google Maps · YouTube (música incorporada).
No celular
A navegação principal vira um painel deslizante e as quatro rotas ficam fixas em uma barra inferior — uma reorganização deliberada, não uma redução de escala do desktop.
A mesma função, reorganizada para toque — não apenas encolhida.
O que este caso não mostra
Por privacidade, este caso não reproduz o formulário de confirmação de presença ao vivo, o mapa exato do evento, nem qualquer dado do sistema de presente via Pix (chave, nome do destinatário ou QR code). Essas funcionalidades são descritas, não exibidas em seu estado real.
Login The Moon
Uma tela de login transformada em pequena narrativa espacial: cenário lunar, pouso animado e um cartão que reage ao ponteiro.
07 · Experiência de login
Login The Moon
Uma tela de login que encena uma chegada: um módulo lunar desce, a poeira sobe e o botão de entrar vira parte da cena.
- Tipo: Experimento de login cinematográfico
- Ano: 2026
- Estado: Publicado como demonstração
Captura do projeto publicado. A interface do app está em inglês.
O login vira uma sequência
Dois gestos, duas respostas. O primeiro toque em qualquer lugar da página põe a nave a descer; o envio do formulário dura 3,6 s e termina em “Access granted”.
6,4 s de pouso
Primeiro toque
Qualquer clique ou toque na página libera o áudio e inicia o pouso: a nave começa a descer 0,6 s depois e leva 6,4 s. Acontece uma vez por visita.
3,6 s
Enviar
Com e-mail e senha preenchidos, o botão entra em carregamento por 3,6 s, toca a sequência de ativação e uma bicicleta cruza o botão.
estado final
Chegada
O botão fica verde, o texto muda para “Welcome aboard.” e a nave completa o pouso no próprio tempo. Não há redirecionamento: a chegada é o fim.
A descida
Não é um vídeo: a nave é uma imagem colocada sobre a cena e movida por CSS, com propulsores, poeira e sombra no mesmo relógio.
+1,2 s
+2,1 s
+3,0 s
+4,6 s
Quatro quadros da mesma gravação, recortados em volta da nave. Os tempos contam a partir do primeiro toque.
Catorze camadas
A nave, dois propulsores, o brilho do motor, duas poeiras, cinco fumaças, duas ondas de poeira e a sombra andam num só relógio de 6,4 s e ligam com uma única classe, is-activated.
O botão faz parte da cena
O botão de entrar não só confirma. Nos 3,6 s de espera uma bicicleta cruza o botão em direção a um brilho lunar, e o resultado chega como estado do próprio botão.
Parado
Enviando
Acesso
A silhueta da bicicleta é uma imagem gerada com IA e aparece no botão em tamanho natural. A silhueta anterior, obtida da internet, foi removida do projeto.
Movimento e som no mesmo relógio
O áudio não é arquivo: é sintetizado no navegador com a Web Audio API, em duas sequências, uma para cada gesto. As barras mostram, em segundos, o que o código agenda.
Primeiro toque
Imagem
- Descida 0.6–7 s
Som
- Motor grave 0.62–6.82 s
- Ruído de pressão 0.62–6.72 s
- Toque 5.96–6.54 s
- Assentamento 6.2–6.73 s
Envio
Imagem
- Carregamento 0–3.6 s
Som
- Access granted
- Ativação 0.02–0.62 s
- Movimento 0.12–2.67 s
- Onda lunar 1.17–2.97 s
- Acorde 3.04–3.93 s
Ouça as duas sequências
Amostras renderizadas com o próprio código de áudio do app, com o volume normalizado. Nada toca sozinho.
Por dentro
- Estado
- Um estado de React com três valores, idle, loading e success, governa o botão, o cartão e a mensagem. O envio só sai de idle com e-mail e senha preenchidos; um temporizador de 3,6 s leva a success e é cancelado ao sair da página.
- Pouso
- Uma segunda chave, separada do login: sceneActivated. Um clique ou toque em qualquer lugar a liga uma vez por visita e o CSS assume as camadas da nave.
- Ponteiro
- O cartão lê a posição do mouse e escreve duas variáveis de CSS, --shine-x e --shine-y, que movem o brilho da superfície. O toque não move o brilho.
- Som
- O AudioContext só nasce depois de um gesto do visitante. Osciladores, ruído filtrado e envelopes de ganho formam as duas sequências, sem nenhum arquivo de áudio.
- Adaptação
- A cena é aria-hidden e o status usa aria-live="polite". Com prefers-reduced-motion as animações caem para quase zero e a nave aparece parada, sem propulsores nem poeira. Um sinal de WebView mantém as animações ligadas dentro de apps. Há ajustes para telas de até 560 px, retrato e alturas de até 740 px.
Next.js 16 e React 19, TypeScript 5, exportados como site estático; CSS próprio (o Tailwind está importado, mas não desenha a interface) e Web Audio. Publicado no GitHub Pages e no Cloudflare Workers.
No celular
O cartão ocupa a largura da tela e a cena recua para o fundo. As duas capturas são do estado real em 390 × 844, o layout do próprio projeto.
Capturas reais do projeto publicado.
O que isto não é
É um experimento de interface, não um sistema de autenticação. Qualquer e-mail com senha preenchida dispara a demonstração: não há contas, servidor, sessão nem validação. Google, Apple, recuperação de senha e criação de conta são elementos visuais que só mostram uma mensagem (“ready to connect”); nenhuma integração existe.
Light Login
Uma tela de login em que a luz controla a interface: um abajur interativo, o movimento do cordão e áudio gerado no navegador.
08 · Experiência de login
Light Login
Quando o abajur acende, o formulário aparece. Quando apaga, ele sai da tela e da navegação por teclado: a luz é o estado da interface.
- Tipo: Experimento de login controlado pela luz
- Ano: 2026
- Estado: Publicado como demonstração
Um cordão, duas respostas
O mesmo cordão responde de duas formas, e 4 pixels de movimento decidem qual.
- Arrastar
- O cordão reage ao deslocamento do ponteiro: gira até 38° e se alonga de 68% a 84%. Ao soltar, volta com um retorno elástico. A luz continua como estava.
- Tocar, clicar, Enter ou Espaço
- Uma puxada curta: 190 ms depois a luz alterna, a cena leva 0,7 s para mudar e o formulário entra ou sai.
Ponteiro ou toque
Só importam o deslocamento horizontal e o vertical em relação ao pivô, o ponto de onde o cordão pende.
Geometria
ângulo = asin(deslocamento ÷ comprimento de repouso), com o ângulo limitado a 38°. O deslocamento vertical soma até 16% ao comprimento.
Ângulo e comprimento
Viram duas variáveis de CSS, --chain-angle e --chain-length, que giram e esticam o mesmo elemento, sem recriá-lo.
Soltar
Com mais de 4 px de movimento foi arrasto: o cordão volta e a luz fica. Com 4 px ou menos foi clique: a luz alterna.
Apagar a luz tira a interface do teclado
Com a luz apagada, o formulário não só escurece: sai da ordem de Tab, sai da árvore de acessibilidade e deixa de receber toques. Acender devolve tudo.
Luz acesa
- Apagar o abajur
- @_7Ragnar
- Senha
- Entrar
Luz apagada
- Acender o abajur
- o formulário sai da ordem
Paradas do Tab no projeto, com os nomes que o próprio app usa, em português.
aria-pressed- O botão do cordão diz se a luz está acesa, e o nome dele muda entre “Apagar o abajur” e “Acender o abajur”.
aria-hidden- O formulário também fica invisível e sem cliques: sai da árvore de acessibilidade e do alcance do ponteiro.
tabIndex = -1- Os campos e o botão Entrar saem da ordem de Tab: o teclado só alcança o cordão.
role="status"- A mensagem “Acesso realizado.” é anunciada sem tirar o foco de onde ele está.
Por dentro
- Som
- Quatro respostas sintetizadas no navegador com a Web Audio API, sem arquivo de som: o cordão chocalha enquanto balança, o interruptor faz um clique (e uma breve energia ao acender), entrar dá três notas e um erro dá um tom descendente. O áudio só começa depois do primeiro toque.
- Movimento
- A cena, o cordão e o formulário são transições de CSS. Com prefers-reduced-motion, elas caem para quase zero e o estado continua o mesmo.
- Feito com
- Next.js 16, React 19 e TypeScript 5, exportados como site estático; CSS próprio e a fonte Manrope. Publicado no GitHub Pages e no Cloudflare Workers.
O que isto não é
É um experimento de interface. Nenhuma credencial é enviada nem guardada e não há autenticação: o formulário só usa a validação do navegador (e-mail válido, senha com ao menos 6 caracteres) e mostra “Acesso realizado.” para qualquer par válido.
Checkout
Protótipo educativo de um checkout, responsivo e interativo, para estudar React, TypeScript, CSS 3D e animações. Não processa pagamentos.
09 · Protótipo de interface
Checkout
- Tipo: Protótipo de checkout interativo
- Ano: 2026
- Estado: Publicado como demonstração
Um checkout em que o cartão é a interface: lê o formulário enquanto você digita, vira para mostrar o CVV e acompanha o pedido até o comprovante. Protótipo de estudo, não um sistema de pagamento.
Capturas reais do protótipo publicado, com a interface em português. O cartão e os dados são de demonstração.
O cartão é o formulário
Cada campo tem um lugar no cartão, e o cartão só mostra o que o formulário tem: nada nele é decorativo.
- Número
- Aparece formatado na frente. O primeiro dígito escolhe a cor, a bandeira e o formato.
- Nome
- Vira o titular, com até 28 caracteres.
- Validade
- Vira a validade, no formato MM / AA.
- CVV
- O cartão gira e mostra o verso, com o código mascarado.
A bandeira segue uma regra didática simplificada, pelo primeiro dígito, de 1 a 8. Não é detecção real de bandeira nem validação de emissor.
O pedido lê o mesmo estado
Quantidade (de 1 a 5), cupom e total saem do mesmo estado do React. O cupom de teste X7RG007 dá 10% de desconto de demonstração, e o total recalculado volta no botão Pagar e no comprovante.
- 2 × € 189,00
- € 378,00
- Cupom X7RG007 · 10%
- − € 37,80
- Total
- € 340,20
Do clique ao comprovante
Pagar leva a sobreposição por três estados. O comprovante é o fim do fluxo, não o assunto do projeto.
idleA página comum, com o formulário e o resumo.
processingDurante 2,7 s, o cartão flutua sobre um fundo desfocado.
approvedA maquininha mostra o valor e imprime um comprovante sem valor fiscal.
Por dentro
focused- Qual campo tem o foco. Define a face do cartão: focar o CVV vira o cartão.
number- Bandeira, cor, formato do número e tamanho do CVV.
quantity, discount- Subtotal, desconto e total, repetidos no botão e no comprovante.
paymentState- idle, processing e approved: a sobreposição e o temporizador de 2,7 s.
O giro é só CSS: uma cena com perspectiva de 1100 px, duas faces em preserve-3d e uma transição de 0,72 s em rotateY(180deg), ligada por uma classe.
React 19.2.6 e TypeScript 5.9, Vite 8 e CSS (3D e keyframes). Publicado como arquivos estáticos no GitHub Pages e no Cloudflare Workers.
O que isto não é
É um protótipo de estudo. Não processa pagamentos, não envia nem guarda dados de cartão e não valida cartões: só confere o preenchimento e o tamanho dos campos. PayPal e Apple Pay são abas visuais, sem integração. As bandeiras são ilustrativas e não indicam vínculo com nenhuma marca. Textos de ambientação da interface, como “Checkout protegido”, não significam segurança de pagamento. O comprovante não tem valor fiscal.
Recibo Digital
Uma impressora térmica que imprime um recibo de demonstração, no navegador e sem back-end de dados.
10 · Experiência interativa
Recibo Digital
- Tipo: Experiência interativa de front-end
- Ano: 2026
- Estado: Publicado como demonstração
Um pagamento aprovado costuma terminar numa linha de texto. Este projeto pergunta se uma confirmação digital consegue guardar parte do ritual de receber um recibo impresso: a máquina liga, o papel sai, um sinal avisa que acabou.
Um recibo, quatro estados
O visitante nunca troca de tela: a impressora passa por quatro estados, e tudo o que se vê ou se ouve depende de qual deles está ativo.
Em espera
idleponto de partida
- Papel
- Recolhido
- LED
- Aceso
- Neon
- Repouso
- Som
- Silêncio
- Ações
- Imprimir
Imprimindo
printingclique em Imprimir
- Papel
- Sai em 1,9 s
- LED
- Pisca
- Neon
- Intenso
- Som
- Impressora
- Ações
- Bloqueadas
Pronto
ready1,9 s depois- Papel
- Todo fora
- LED
- Verde forte
- Neon
- Repouso
- Som
- Blim
- Ações
- Cortar ou repetir
Cortado
tornclique em Cortar
- Papel
- Cai e some
- LED
- Atenuado
- Neon
- Repouso
- Som
- Silêncio
- Ações
- Repetir
De “pronto” e de “cortado” dá para imprimir de novo, e o ciclo recomeça.
Nenhuma dessas saídas tem animação própria: todas leem o mesmo estado, então nada sai de sincronia.
O momento da impressão
É a interação que dá sentido ao resto, e uma imagem parada não a mostra. A gravação é da experiência real, sem som.
- 0 s
Imprimir recibo: o clique liga o som da impressora e o estado passa a imprimindo.
- 0 a 1,9 s
O papel desce pela abertura enquanto o LED pisca e o neon se intensifica.
- 1,9 s
O estado passa a pronto e o blim soa no mesmo instante. Os botões passam a ser Cortar e Imprimir de novo.
- Depois
Cortar leva ao estado cortado: o papel cai e some.
O som
A impressora é uma gravação feita por Rogério, com 1,9 s, a mesma duração da animação do papel. O blim é sintetizado no navegador com Web Audio, em dois tons (880 Hz e 1318,5 Hz).
O som só toca quando você aperta um botão.
Por dentro
Um estado, várias saídas
Um único valor de estado no React vira uma classe na máquina. O CSS lê essa classe para o papel, os LEDs, o neon, os botões e o texto de apoio. Nada anima por conta própria, então nada sai de sincronia.
O som já está pronto no clique
A gravação da impressora é carregada assim que a página abre. O contexto de áudio nasce no clique, porque os navegadores só liberam som depois de um gesto do visitante. O blim sai da mesma transição que leva ao estado pronto.
O papel só existe dentro da abertura
O recibo é recortado pela janela da máquina e se move só com translate3d, uma transformação acelerada por GPU, escolhida para o movimento ficar estável em navegadores WebKit, como o do iPhone.
Feito com
- Interface
- React 19 e TypeScript.
- Movimento
- CSS: keyframes, transições e translate3d.
- Som
- Web Audio API e uma gravação em WAV.
- Execução
- vinext (a API do Next.js sobre Vite 8) num Cloudflare Worker, que faz o SSR e a otimização de imagens.
- Qualidade
- ESLint com jsx-a11y e um teste sobre o HTML renderizado.
Não há banco de dados nem back-end de dados. O único código de servidor é o Worker que entrega a página.
O que isto não é
É uma demonstração de interface. Valores, data e cartão do recibo são fictícios: nada é cobrado, enviado por e-mail nem guardado, e o recibo não tem valor fiscal. A ideia de partida, gastar menos papel quando um comprovante digital basta, é só motivação: o projeto não mede economia nenhuma.
DiscordCameraLive
Adaptação do GoLiveBypass para restaurar Go Live e câmera no Discord.
11 · Utilitário de desktop
DiscordCameraLive
O DiscordCameraLive é um fork do GoLiveBypass. Este caso separa o que veio do projeto original do que x7rG modificou e mantém.
- Tipo
- Aplicativo desktop (fork)
- Ano
- 2026
- Estado
- Fork mantido, base v1.1.5
A base: GoLiveBypass
O GoLiveBypass foi criado por bezumiya. O DiscordCameraLive parte da versão 1.1.5 dele e mantém a licença GPL-3.0-or-later.
- O que faz
- Um plugin para Equicord/Vencord sobe um roteador SOCKS local e manda só o WebSocket de gateway do Discord por um proxy fora do Brasil: o do usuário, um Tor local ou um proxy grátis validado. O resto do tráfego segue direto.
- Por que existe
- Segundo o README, nasceu depois que a autoridade de proteção de dados do Brasil (ANPD) mandou o Discord suspender o Go Live no país. O programa contorna essa restrição regional para o Go Live e a câmera.
- Como se instala
- Uma interface Electron de um clique, instaladores e um modo standalone em scripts, e uma API em Go que recebe relatos de bug. Tudo isso vem do projeto original.
- Quem fez
- Além de bezumiya, o README do fork credita mazxxy (a ideia do desenho do proxy), Vithor (o primeiro instalador), cleo-dev (a interface gráfica) e outros colaboradores.
O que x7rG mudou
Levantado por diff contra a versão 1.1.5 do original. O plugin e a API em Go seguem como no original; o trabalho está no aplicativo desktop, na entrega e na documentação.
Plugin Equicord/Vencord
Herdado
A lógica é a do original. No fork mudaram o nome do plugin e o texto de sobre.
API em Go (relatos de bug)
Herdado
Herdada. Só foram trocados nomes e o repositório de destino.
Interface Electron
Herdado + x7rG
A interface vem do original. x7rG a endureceu: nodeIntegration desligado, isolamento de contexto e sandbox ligados, preload por contextBridge e uma Content-Security-Policy no HTML.
Troca do app.asar
x7rG
A troca deixou de apagar antes de escrever: o conteúdo novo é preparado numa pasta temporária, o app.asar atual vai para um nome de rollback e só depois o novo entra, com volta atrás se algo falhar.
Entradas do IPC
x7rG
O endereço de proxy que vem da interface é validado (tipo e limite de 512 caracteres) e o pedido de altura da janela tem um teto de 1200.
Nome, marca e instaladores
Herdado + x7rG
Instaladores e standalone são herdados. O projeto foi renomeado em código, textos e scripts, e o ícone e o logo passaram a ser um emblema x7rG, com o banner x7rG Enterprise.
Integração contínua
x7rG
CI em todo push e pull request: compila a interface, confere que a cópia embutida do bypass não diverge, roda vet e testes da API e os testes de shell; mais um Dependabot semanal.
Documentação e entrega
x7rG
README dividido em cinco guias, SECURITY.md e um passo a passo para leigos; release v1.1.5 com executável Windows, AppImage Linux e dmg/zip macOS.
Por dentro: a troca do app.asar
O programa ativa o bypass trocando o app.asar da instalação do Discord (o original vira _app.asar). A mudança foi na ordem das operações.
Antes (original)
- Apaga o app.asar atual
- Escreve o conteúdo novo no lugar
- Uma falha no meio deixa o Discord sem app.asar
Depois (x7rG)
- Escreve o conteúdo novo numa pasta temporária
- Move o app.asar atual para um nome de rollback
- Move a pasta nova para app.asar e só então apaga o rollback
- Se a última etapa falhar, o app.asar anterior volta
- nodeIntegration: true,- contextIsolation: false,+ nodeIntegration: false,+ contextIsolation: true,+ sandbox: true,Linhas reais do diff de electron/main.ts contra a v1.1.5 do original. O diagrama é do portfólio.
Riscos e limites
- Termos de Serviço
- Usar clientes modificados e proxies para contornar a restrição regional pode violar os Termos de Serviço do Discord. O README e o SECURITY.md do projeto avisam isso e pedem uso por conta e risco; o risco de punição à conta é descrito como baixo, mas existente.
- Sem vínculo com o Discord
- Não é um recurso oficial e não tem afiliação, apoio ou aval do Discord. Não há garantia de que o Go Live funcione em toda sessão nem de segurança da conta.
- Mexe na instalação do Discord
- O aplicativo renomeia o app.asar original para _app.asar e escreve um app.asar novo; desativar restaura o original. O aplicativo não é assinado, e o sistema avisa na primeira abertura.
- Versão
- O fork é baseado na v1.1.5 e publicou a release v1.1.5 em 22 de agosto de 2026. O original seguiu adiante (v2.0.9, de 20 de setembro de 2026) e este fork não incorpora essas mudanças.
- Privacidade
- Segundo o SECURITY.md, nenhum dado vai para servidores do projeto. O tráfego do gateway passa pelo proxy escolhido, e proxies grátis são fracos para anonimato.
Crédito
- Projeto original
- O DiscordCameraLive é baseado no GoLiveBypass, criado por bezumiya (GPL-3.0-or-later). O plugin, a API em Go, os instaladores e a interface original são do projeto original e de seus colaboradores.
- x7rG
- Rogério Gomes / x7rG adaptou e mantém este fork: renomeou o projeto, endureceu a interface Electron, tornou a troca do app.asar transacional, validou entradas do IPC, adicionou CI, reorganizou a documentação e publicou a release, conforme o histórico e o diff do repositório. Ele não é o criador do GoLiveBypass.
- IA e ativos
- As modificações foram desenvolvidas com assistência de IA: o histórico do repositório registra um agradecimento ao Claude pelo código, e o alcance não está documentado. O arquivo do emblema x7rG usado como ícone foi gerado com IA.
Sobre
Começo pelo que já existe: um grupo de WhatsApp, um PDF, uma lembrança de infância. Depois, desenho e construo o que falta.
Rogério GomesCriador da x7rG ENTERPRISE
Sou Rogério Gomes, criador da x7rG ENTERPRISE. Trabalho entre tecnologia, design e produto, transformando problemas, necessidades e ideias em experiências digitais.
Nem todo projeto começa com uma especificação formal. Alguns começam com uma necessidade operacional real, um processo ineficiente, uma interface que poderia funcionar melhor, ou uma ideia que vale a pena explorar. O meu papel é dar direção a essa ideia e transformá-la em algo que possa ser visto, usado e testado.
Da ideia à execução
Participo do processo inteiro, não só de uma etapa dele:
- Ideia
- Direção
- Experiência
- Interface
- Desenvolvimento
- Teste
- Refinamento
Código e design não são etapas isoladas. São partes do mesmo processo de construção.
A inteligência artificial também faz parte desse processo. Uso IA como ferramenta para desenvolver, explorar alternativas, criar determinados ativos e acelerar iterações — mantendo a direção do projeto e deixando sua participação clara quando ela faz parte do resultado.
A base é cruzada: design visual, desenvolvimento de sistemas, gestão de tecnologia e sistemas técnicos.
- Design GráficoUniversidade Salgado de Oliveira — UNIVERSO
- Análise e Desenvolvimento de SistemasFaculdade de Americana — FAM
- Pós-graduações em Inteligência Artificial, Business Intelligence, Perícia Forense e Governança de TIFACUMINAS
- Formação técnica em Eletrotécnica e Mecatrônica
Ainteligênciaartificialconsolidou-secomoumadasprincipaisferramentastecnológicasdaatualidadeecomoumaforçatransformadoradaeconomiaedasociedade.Suaevoluçãojáinfluenciaaprodutividade,omercadodetrabalho,aformacomoempresaseprofissionaiscriamsoluçõesediferentesaspectosdavidadaspessoas.
No fim, cada projeto deste portfólio é isso: uma ideia que ganhou direção, forma e uso real.
A identidade
De rG a x7rG.
Sempre gostei de ser chamado pelo meu nome e sobrenome: Rogério Gomes. Para mim, o nome sempre carregou identidade.
Muitas das pessoas que admirei ao longo da vida também foram reconhecidas pelo próprio nome e pelo que conseguiram construir com ele. Entre elas, Steven Paul Jobs sempre foi uma referência pela sua trajetória de superação, empreendedorismo e resiliência.
Minha primeira identidade nasceu exatamente daí.
rGRogério Gomes
Um símbolo criado a partir das minhas iniciais. Era o começo de uma identidade que ainda iria evoluir junto com minhas ideias e projetos.
Com o tempo, rG tornou-se x7rG.
- xMultiplicaçãoIdeias, possibilidades e aquilo que pode nascer de uma ideia inicial.
- 7Número da sorteÉ pessoal. O meu número da sorte.
- rGRogério GomesA origem de tudo. Isso não mudou.
Depois veio ENTERPRISE.
ENTERPRISE
Para mim, não representa apenas uma empresa. Também representa iniciativa: a disposição de assumir desafios e transformar ideias em projetos reais.
A identidade ganhou então um novo símbolo: o escudo.
Sempre me identifiquei com o imaginário dos vikings e espartanos. Não pela figura do guerreiro em si, mas pelo que essa imagem representa para mim:
Luta.Persistência.Lealdade.
O escudo tornou-se uma representação visual desses princípios e passou a fazer parte da identidade da x7rG ENTERPRISE.
A identidade evoluiu.A origem continua a mesma.
Rogério Gomes.
Trajetória
Algumas empresas que fizeram parte da minha trajetória.
Experiências, equipes e desafios que também ajudaram a construir o profissional que sou hoje.
- 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
Formação & Credenciais
Formação é um processo contínuo. Aqui reúno os estudos, as especializações e as credenciais que sustentam o trabalho técnico e criativo deste portfólio — a documentação como evidência, não como vitrine.
Acervo em atualização
Esta seção reúne uma seleção das minhas formações e credenciais. Outros diplomas, certificações e cursos realizados serão adicionados progressivamente.
Universidade Salgado de Oliveira — UNIVERSO
Design Gráfico
Design
Algumas informações pessoais foram borradas nesta cópia pública para preservar a privacidade do titular.
Contato
x7rG ENTERPRISE
Boas ideias merecem sair do papel.
Se existe um projeto, um problema para resolver ou uma ideia que merece ser construída, podemos começar por uma conversa.
Rogério GomesCriador da x7rG ENTERPRISE