Desenvolvedor Web Pedro Batista Cases | Currículo | Contrate
Início | Cases | Brasília, Brasil (UTC−3) | Disponível para trabalho remoto English

Cases

Seis projetos, contados como problema, construção e resultado.

Parte deste trabalho é para instituições públicas e clientes privados, então o código não é público. Posso mostrar qualquer um deles numa conversa.

Nesta página: Este portfólio · Calendário da Renejum · Portal do ENAM · Reformulação da ENFAM · Cypay · IESP Tradutor


Este portfólio

Projeto pessoal · Three.js, Windows XP e este currículo

Se você chegou pelo escritório 3D, está olhando para ele agora: esta página está aberta no Internet Explorer, dentro do Windows XP, no monitor do escritório. No celular, ela abre numa versão de bolso do Internet Explorer.

O problema
Um PDF pode dizer “desenvolvedor web” sem provar nada. Eu queria que o próprio portfólio fosse a prova, e que o currículo continuasse legível, imprimível e indexável para quem não tem tempo para uma cena 3D.
O que construí
Dois apps que conversam entre si.
  • A sala. Um escritório 3D em Three.js, TypeScript e Vite. O modelo caiu de 31,4 MB para 1,54 MB com geometria comprimida em Draco e texturas recodificadas. A câmera se move entre keyframes nomeados (sala, mesa, monitor) com tween.js, e há um modo de câmera livre.
  • A tela. Um Windows XP funcionando roda num iframe que o CSS3DRenderer posiciona no monitor. O mesh da tela usa um material invisível que ainda escreve profundidade: ele abre o buraco por onde o iframe aparece, e a moldura continua escondendo as bordas quando a câmera se move. Tamanho e ângulo saem dos próprios vértices do mesh, e o modelo é ampliado 1000 vezes para o CSS3D trabalhar em pixels reais e o texto não borrar.
  • O sistema. Um fork enxuto do win32.run (SvelteKit). Tirei programas sem uso e as bibliotecas que ficaram órfãs, reduzi os assets estáticos de 239 MB para cerca de 26 MB e trouxe todas as dependências de CDN para dentro do projeto, porque arrastar e redimensionar janelas dependia de uma cópia do jQuery UI em CDN.
  • As pontes. O XP repassa eventos de mouse e teclado para a sala via postMessage, e é assim que a cena sabe que alguém está usando o computador. O botão de idioma faz o caminho inverso: sala, XP e, por fim, esta página.
  • A versão de celular. Celulares pulam o 3D, e o bundle do three.js junto, e abrem este currículo dentro de um Internet Explorer de bolso no estilo do Windows Mobile 2003, com botão de voltar, menus e troca de idioma próprios. Se o WebGL falhar num computador, o carregamento avisa e oferece o currículo em vez de mostrar uma tela em branco.
  • Uma fonte só. As páginas, os PDFs e o texto que os buscadores leem saem de um único arquivo de conteúdo. Um script escreve o site em inglês e português, e o Playwright imprime os PDFs a partir dele.
  • O deploy. Dois apps na Hostinger, um build estático do Vite e um servidor Node para o XP, em subdomínios do mesmo domínio para que o disco virtual do XP no IndexedDB não seja bloqueado dentro do iframe. Um smoke test em Playwright percorre boot, mesa, monitor, Esc e câmera livre, e reporta erros de console.
Resultado
Um currículo que se abre dentro de um sistema operacional funcionando, dentro de uma sala 3D, e que ainda degrada para HTML simples quando precisa. Esta página segue a mesma ideia: HTML e CSS puros no estilo de um site pessoal do início dos anos 2000, porque é isso que o Internet Explorer 6 mostraria.

Stack: Three.js, TypeScript, Vite, tween.js, CSS3DRenderer, SvelteKit, Tailwind CSS, postMessage, Playwright, gltf-transform, sharp

Acesse: batistapedro.acheme.me

Plugin do Calendário da Renejum

ENFAM · Renejum, a Rede Nacional de Escolas Judiciais e da Magistratura

Calendário da Renejum em setembro de 2026, com filtros de mês, categoria, modalidade e escola, e os totais de eventos e vagas do mês
O problema
Os cursos oferecidos pela rede ficavam em sistemas separados, mantidos por tribunais diferentes, e montar um calendário único exigia consolidar tudo à mão.
O que construí
Um plugin WordPress sob medida com dois shortcodes: um calendário mensal interativo e uma visão em lista. Um proxy em PHP consulta três APIs externas no servidor (SINEMAF, do Conselho da Justiça Federal, Educa, da ENFAM, e SIGA, do Tribunal de Justiça de Minas Gerais) e guarda cada fonte por mês em transients do WordPress, para que o visitante não acione as APIs dos tribunais a cada página vista. O visitante filtra por mês, categoria, modalidade e escola, alterna entre início do curso e inscrições abertas e vê os totais do mês. Roles e labels ARIA em toda a interface.
Resultado
Um calendário para a rede inteira, sem consolidação manual. A visão de setembro de 2026 lista 87 eventos e 3.456 vagas.

Stack: PHP, WordPress Plugin API, shortcodes, Transients API, APIs REST, JavaScript, Bootstrap 5

Acesse: renejum.enfam.jus.br

Portal do ENAM

ENFAM · Exame Nacional da Magistratura

Página inicial do portal do ENAM, com o título do exame, links para a edição atual e um vídeo de apresentação
O problema
O ENAM é o exame nacional e unificado que habilita candidatos para os concursos da magistratura federal, do trabalho, militar e estadual. O portal precisava ficar no ar e acessível quando candidatos do país inteiro chegam ao mesmo tempo, nos dias de inscrição e de resultado.
O que construí
Um front-end em WordPress e Elementor, acessível e organizado em torno do que o candidato procura (o exame, dados, normativos, certificado, resultados, notícias e dúvidas), com cache e configuração de servidor na nossa própria stack LAMP.
Resultado
Mais de 30 mil visitas no primeiro mês. O mesmo portal agora conduz a 6ª edição do exame.

Stack: WordPress, Elementor, PHP, HTML, CSS, WCAG e eMAG, LAMP, cache no servidor

Acesse: enfam.jus.br/enam

Reformulação do site da ENFAM

ENFAM · site institucional

Página inicial da ENFAM com a marca de 20 anos, o menu principal e a seção de cursos e eventos
O problema
O site da escola nacional de magistrados era difícil de navegar e lento, e novas páginas demoravam demais para ficar prontas.
O que construí
Uma reformulação orientada por UX da arquitetura de informação, da navegação e dos templates, apoiada numa biblioteca de componentes no Figma que transformei em templates WordPress reutilizáveis. Também refatorei o tema legado, otimizei assets e implementei cache no servidor.
Resultado
As visitas diárias cresceram 300%, e os Core Web Vitals entraram na faixa “Bom”.

Stack: Figma, WordPress, Elementor, PHP, CSS, otimização de performance

Acesse: enfam.jus.br

Cypay

Freelance · landing page de uma carteira cripto autocustodial

Topo da página inicial da Cypay com o título All-in-One Crypto App
O problema
A Cypay reúne swap, rendimento, trading, bridge e cartão em nove blockchains numa única carteira autocustodial. A landing page precisava explicar tudo isso sem virar um paredão de texto.
O que construí
Uma página única guiada pelo scroll. Seções, cards de funcionalidades e mockups do app entram e saem da tela conforme a rolagem, amarrados à posição do scroll com requestAnimationFrame e IntersectionObserver em vez de temporizadores. HTML, CSS e JavaScript puro escritos à mão, sem framework. A primeira versão também tinha uma barra de progresso de leitura e um mascote 3D, o logo da Cypay extrudado a partir de SVG com Three.js, que atravessava a página acompanhando o scroll.
Resultado
No ar em cypay.io. O conteúdo mudou desde o lançamento, mas a coreografia de scroll continua sendo o jeito como a página funciona.

Stack: HTML, CSS, JavaScript puro, IntersectionObserver, requestAnimationFrame, Canvas, Three.js

Acesse: cypay.io

IESP Tradutor

Freelance · plugin de tradução para o IESP-UERJ, Instituto de Estudos Sociais e Políticos

Manual do IESP Tradutor, mostrando a aba Configurações Gerais do plugin no painel do WordPress
O problema
O site WordPress do instituto precisava ser lido em inglês, espanhol e francês por pesquisadores estrangeiros, com custo zero de tradução e sem estragar nomes e termos institucionais.
O que construí
Um plugin WordPress em PHP 8 com três camadas. Por padrão, o widget gratuito do Google Tradutor, sem limite de caracteres. Por cima dele, um glossário e “segmentos” (blocos HTML marcados com data-iesp-key) para traduções humanas fixas. E, por página, um modo opcional no servidor com o Google Cloud Translation para SEO: traduções gravadas no banco, invalidadas por hash de conteúdo ao salvar e reprocessadas por uma fila no WP-Cron, tudo atrás de um controle de cota com limite seguro e parada obrigatória abaixo da faixa gratuita, mais alertas em 70, 85, 95 e 100%. O editor controla tudo por painéis no Gutenberg, um admin com oito abas, importação de CSV e Excel e WP-CLI; controle de cota, importação e segmentos têm testes automatizados.
Resultado
Quatro idiomas gerenciados de dentro do WordPress, com custo zero de API por projeto. O plugin está na versão 3.1.

Stack: PHP 8, WordPress Plugin API, Gutenberg, Google Cloud Translation API, WP-Cron, WP-CLI, PHPUnit

Acesse: manual do plugin

HTML e CSS puros. Sem frameworks, sem rastreadores. · Créditos e licenças
Pedro Batista · Brasília, Brasil · Atualizado em setembro de 2026