Site pessoal vira jogo com boss fight feito em JavaScript puro

Um site pessoal transformado em mundo jogável

Paul Bakaus refez seu site pessoal como uma experiência explorável em pixel art, com monstro próprio: o Jirasaurus, que ataca com "Scope Creep" e "Sprint Planning" e, no meio da luta, executa uma "Workflow Migration". A motivação declarada é saudade de uma internet com mais personalidade - sites em que se percebia quem os fez, seus interesses e humor. O autor sentia que o próprio site estava "jogando seguro" e decidiu fazer algo "extremamente exagerado": abriu o Claude Code e, dez dias depois, existia uma boss fight.

O resultado é um pequeno mundo renderizado ao vivo no navegador: os projetos ocupam um sistema solar, os textos ficam em disquetes, há um painel no telhado sobre uma cidade, uma estrada representando a carreira e uma página de palestras em que os vídeos tocam na tela de um auditório pixel art. Três páginas escondem jogos jogáveis. Embaixo de tudo, o Ghost continua publicando os posts e enviando a newsletter; o projeto inteiro é distribuído como um zip de tema.

Imersão e ponto de vista pessoal

A inspiração vem da Secret Cinema, em Londres: na produção de "O Império Contra-Ataca", a imersão começava já no e-mail de confirmação. Bakaus aplica a mesma lógica ao site - a experiência começa antes da chegada e os momentos intermediários importam. Cada cena precisava passar por um teste: contar algo sobre o autor e dar motivo para gastar tempo ali. Um herói inicial sobre uma floresta foi rejeitado ("não tem nada a ver comigo") e virou um hack night no telhado, com o autor usando seu casaco creme.

Restrições visuais: a paleta do Amiga

Para dar coesão, o mundo usa a paleta de 4.096 cores do Amiga (dezesseis níveis de vermelho, verde e azul), bordas duras, gradientes em faixas e sombreamento por padrões de pixels. As cenas são desenhadas em buffers Canvas 2D pequenos, ampliados por escalas inteiras; o logo em voxels usa WebGL2 seguindo a mesma direção. O dithering ordenado cria tons intermediários com pixels alternados. Essas restrições deram ao Claude algo concreto a preservar entre iterações - "deixar mais retrô" é vago demais sem um alvo fixo.

A caminhada que não funcionava

Transformar o autor em sprite exigiu um método novo. Os frames individuais pareciam plausíveis, mas em movimento o personagem se espremia, deslizava ou saltava - em certa hora, tinha três mãos. A solução foi um rig que mantinha cabeça e tronco aprovados e calculava as pernas como dois ossos conectados, com botas pivotando no calcanhar ou no dedo do pé, seguindo as fases reais de um passo. A descoberta-chave: revisar por screenshot respondia à pergunta errada - era preciso assistir à animação no timing real. O Claude gerava código e arte rápido, mas sua compreensão visual não captava o que acontecia entre frames plausíveis; a experiência do autor (que já trabalhou na indústria de jogos e construiu um game engine) reconhecia os erros.

Música sintetizada no navegador

A trilha não é gravada: o Web Audio sintetiza tudo ao vivo com osciladores, ruído, filtros e envelopes - doze músicas no site final. Um "laboratório de sons" local permitiu avaliar 95 candidatos (dez "amor", 26 "talvez", 59 "não") com notas como "melodia fraca". A trilha também moldou a navegação: para não interromper a música, o tema carrega a próxima página atrás de uma cortina que se fecha e troca o conteúdo, mantendo o contexto de áudio vivo; um clique vira mudança de cena.

Um site antes de ser espetáculo

Um boot screen inicial foi removido por funcionar como intersticial. Títulos e descrições são HTML real; movimento reduzido recebe cenas estáticas; as cenas param de desenhar fora da tela; os jogos carregam separadamente. O design responsivo recompõe as cenas conforme o espaço - em janelas estreitas, o telhado vira uma janela sobre o painel.

Divisão do trabalho com IA

O Claude escreveu o código, construiu o pipeline de arte e compôs a música; Bakaus deu direção, escolheu versões e testou no laptop e no celular. Verificações automatizadas no navegador pegavam comportamentos quebrados, mas não decidiam se uma melodia era memorável ou se uma caminhada parecia natural. Passes de "polimento" podiam desviar de decisões aprovadas (o diamante do Impeccable chegou a parecer uma morango) - a lição prática foi manter referências próximas, feedback específico e revisar cada coisa na forma em que as pessoas a experimentariam.