Um currículo que abre dentro de um computador, numa sala em 3D.
O portfólio de Pedro Batista, fundador da Acheme, é um escritório em 3D que roda no navegador. No monitor funciona uma cópia do Windows XP, e o currículo abre no Internet Explorer dela. No celular, a sala dá lugar a uma versão leve, que carrega rápido.
- Cliente
- Pedro Batista (projeto pessoal)
- Ano
- 2026
- Entrega
- portfólio, currículo e PDFs em português e inglês
- No ar
- batistapedro.acheme.me
- A salaescritório em 3D, desenhado com Three.js
- A telauma página encaixada no monitor
- O sistemaWindows XP que roda no navegador
- O currículopáginas simples, em português e inglês
Um portfólio que mostra o trabalho em vez de só descrevê-lo.
Um currículo em PDF pode dizer "desenvolvedor web" sem provar nada. A ideia foi fazer do próprio portfólio a prova: quem recruta ou contrata entra numa sala em 3D, senta diante do computador e usa um sistema de verdade para ler o currículo.
Ao mesmo tempo, o currículo precisava continuar fácil de ler, de imprimir e de achar no Google, para quem não tem tempo para uma cena em 3D. Por isso o mesmo conteúdo existe em três formas: dentro do computador da sala, como site simples e como PDF.
Dois sistemas que conversam entre si.
- 01
A sala
Um escritório em 3D feito com Three.js. O arquivo do modelo caiu de 31,4 MB para 1,54 MB, com a geometria comprimida e as imagens das superfícies refeitas em tamanho menor. A câmera passa por pontos marcados (sala, mesa e monitor), e há um modo de câmera livre.
- 02
A tela
O Windows XP é uma página à parte, encaixada no monitor da sala. A posição, o ângulo e o tamanho dela saem das medidas do próprio modelo 3D, para a tela acompanhar a câmera sem descolar da moldura.
- 03
O sistema
Uma versão enxuta do win32.run, um projeto aberto que recria o Windows XP no navegador. Saíram os programas sem uso, e os arquivos caíram de 239 MB para cerca de 26 MB. As bibliotecas que vinham de servidores de terceiros passaram a ficar dentro do projeto, porque arrastar janelas dependia de uma delas.
- 04
As pontes
O sistema avisa a sala quando alguém mexe no mouse ou no teclado, e é assim que a cena sabe que o computador está em uso. O botão de idioma faz o caminho inverso: troca a língua da sala, do sistema e do currículo.
- 05
O celular
Em telas pequenas ou de toque, a sala não carrega. O aparelho baixa cerca de 7 kB e abre o currículo num navegador de bolso. A biblioteca de 3D, com uns 280 kB, só desce no computador. Se o computador não conseguir desenhar o 3D, a página avisa e oferece o currículo em vez de ficar em branco.
- 06
Uma fonte só
O currículo, os projetos e os contatos ficam num único arquivo de conteúdo. Dele saem o site em português e inglês, a cópia que abre dentro do Windows XP, os PDFs e o texto que o Google lê. Mudou o currículo, muda tudo junto.
Três decisões que fazem a cena funcionar.
Nada aqui exige um computador especial. O trabalho foi fazer o navegador desenhar só o necessário e esconder bem as emendas entre a sala e a tela.
- 01
Um buraco na tela do notebook
A página do Windows XP fica por trás da cena 3D. A tela do notebook recebe um material invisível que, mesmo sem cor, ocupa o seu lugar na profundidade. Assim ela abre uma janela por onde a página aparece, e a moldura do notebook continua na frente das bordas. A técnica vem do portfólio de Henry Heffernan, que é aberto.
- 02
Um modelo mil vezes maior
A página encaixada trabalha em pixels. Na escala original do modelo, a sala inteira mede 2,5 unidades, e a página teria de ser reduzida a uma fração mínima, com texto borrado. Com o modelo ampliado mil vezes, a página fica em tamanho próximo do real e o texto sai nítido.
- 03
Uma entrada em ritmo constante
Se a câmera andasse em velocidade fixa, a sala ficaria parada no começo e cresceria de repente no fim. A distância muda em escala logarítmica, em que cada passo reduz a distância na mesma proporção. O resultado é uma sala que cresce num ritmo uniforme. O som da passagem foi sincronizado com o instante em que a câmera cruza a abertura da sala.
- 04
Dois endereços do mesmo domínio
A sala e o sistema são dois sites separados, porque na hospedagem cada aplicação vem de um repositório de código próprio. Os dois ficam no mesmo domínio, acheme.me. Assim o navegador trata o sistema como parte do mesmo site e deixa o Windows XP guardar os próprios arquivos, o que alguns navegadores bloqueiam quando o domínio é outro.
O que este projeto ensina.
- Uma experiência pesada precisa de uma porta leve. Decida pelo tipo de aparelho antes de baixar o que é pesado, e não depois.
- Um arquivo de conteúdo para todas as saídas (site, PDF e busca) evita versões desencontradas.
- Meça antes de otimizar. Só a compressão do modelo 3D reduziu o arquivo em 95%.
- O que é essencial para a página funcionar não deve depender do servidor de terceiros. Se ele cair, cai junto.
- Quem usa trabalho aberto deve dar o crédito de forma visível. Aqui, os créditos estão numa página própria do currículo.
Ficha técnica
- Sala
- Three.js, TypeScript, Vite e tween.js
- Tela
- CSS3DRenderer e mensagens entre páginas (postMessage)
- Sistema
- SvelteKit e Tailwind CSS, a partir do win32.run
- Conteúdo
- um arquivo de dados que gera o site, a cópia do sistema, os PDFs (Playwright) e o mapa do site
- Hospedagem
- Hostinger, com dois projetos em subdomínios de acheme.me
- Créditos
- "Small Office", de dylanheyes (CC BY 4.0); win32.run, de Bao Nguyen (MIT); técnica do portfólio de Henry Heffernan (MIT); JS Paint, de Isaiah Odhner (MIT); sons do Freesound (CC BY 4.0)
- Marcas
- Microsoft, Windows e Windows XP são marcas da Microsoft Corporation. O sistema do portfólio é uma homenagem, não um produto.
Tem uma ideia que precisa sair do comum?
A Acheme planeja, constrói e mantém sites e experiências como esta. Conte o que você precisa e respondemos em até 48 horas.
Conversar sobre um projeto