otaviom · freelancer

Eu desenho páginas que contam história. E construo o que roda atrás delas.

Landing pages onde o scroll é a câmera, produtos com backend de verdade e a infraestrutura que coloca os dois no ar. A peça inteira, feita por uma pessoa só.

o que eu faço

Três habilidades que o resto desta página comprova.

Landing pages com história

A página inteira é uma travessia: o vídeo de fundo avança conforme o visitante rola, as legendas trocam por cena e a oferta chega no fim do corredor. Copy, direção de arte, animação e vídeo saem todos daqui.

HTML · CSS · JS sem framework · scrub por Range

Produto e backend

Quando a página precisa de algo atrás dela: API, banco, autenticação, integração com serviço de terceiro, painel interno. Prefiro entregar pouco e em pé a entregar muito e instável.

Node · TypeScript · Next · Postgres · Cloudflare Workers · D1

Infra e pipeline próprio

Eu opero o que entrego. Containers, proxy reverso, túnel, deploy no edge. E um pipeline local que gera os vídeos das histórias, sem depender de banco de imagens nem de crédito de plataforma.

Docker · Caddy · Cloudflare Tunnel · Pages · ComfyUI

mostruário

Seis corredores, seis nichos.

São estudos de estilo para marcas fictícias: cada um testa a mesma gramática num nicho diferente. Abra qualquer um e atravesse a página inteira.

/01

Memo

o conhecimento saindo de mil arquivos soltos
SaaS · produtividade atravessar
/02

Bamboo

as folhas de bananeira escondendo a loja inteira
Cosméticos · bem-estar atravessar
/03

Halo

linho, vapor e a pele no fim do corredor
Clínica · estética atravessar
/04

Brasa

da boca do fogão à mesa, em seis tempos
Restaurante atravessar
/05

AVESSO

o backstage acendendo um spot por vez
Streetwear · drop atravessar
/06

Órbita

um portal por fase, até o lançamento
Lançamento digital atravessar

produto em operação

Ata Recorder

O projeto mais completo que eu construí: do robô que entra na reunião até a interface que devolve a ata pronta.

A página inicial do Ata Recorder, com um painel mostrando a transcrição de uma reunião e os cartões de decisão e tarefa extraídos dela.
print do site no ar, sem mockup
o problema
Reunião gravada não vira conhecimento: ninguém reassiste duas horas de vídeo para achar a decisão que foi tomada no minuto 74.
o que eu construí
O backend de gravação: um robô entra na reunião pelo Zoom, Meet ou Teams, grava, transcreve e devolve resumo, plano de ação e mapa mental. Cada reunião ganha um chat próprio, e há um chat geral que responde cruzando todas elas, sempre citando a fonte.
stack
Node · TypeScript · Postgres + pgvector · Firebase Auth · MeetingBaas
agora
Reescrita v2 em monorepo: Next 16, Expo, tokens de design próprios e i18n. Trabalho em andamento, não entregue.

casos técnicos

Onde o trabalho não aparece na tela.

Produtos reais, descritos pelo que são. Sem métrica inventada e sem print de dashboard falso.

Dropi

interno · dashboard
o problema
Um scraper de frete coletava produtos o dia inteiro, mas conferir o que ele tinha trazido dependia de abrir o banco na mão.
o que eu construí
Um dashboard interno para inspecionar a coleta: busca, filtro, detalhe do produto e o histórico de cada execução. Empacotado em Docker com healthcheck, testes de unidade e de ponta a ponta rodando antes do deploy.
stack
Next 14 App Router · Drizzle · Postgres 16 · NextAuth · TanStack Query · Vitest · Playwright · Docker

Niko

pessoal · bot
o problema
Os bots de música do meu servidor no Discord morriam ou viravam assinatura paga.
o que eu construí
Um bot próprio com fila, controle por botão em vez de comando decorado e saída automática do canal quando não tem ninguém ouvindo. Projeto pequeno e honesto: existe porque eu uso.
stack
Python · discord.py

bastidores

Os vídeos e os servidores também são meus.

O vídeo nasce aqui

Nenhum corredor desta página veio de banco de imagens. Todos foram gerados na minha própria máquina, 15 segundos em 720p por peça, e depois re-encodados com quadros-chave densos, que é o que permite buscar o vídeo quadro a quadro enquanto você rola.

ComfyUI · Wan 2.2 · ffmpeg

E sobe pelo meu homelab

Rodo um servidor em casa com os serviços em containers, proxy reverso na frente e túnel para expor o que precisa de link externo. É onde os clientes revisam as peças antes de elas irem ao ar. O que é público mora no edge da Cloudflare.

Docker · Caddy · Cloudflare Tunnel · Pages · D1

Um detalhe que quebra tudo

Vídeo que responde ao scroll exige que o servidor devolva pedaços do arquivo sob demanda. Hospedagem estática costuma devolver o arquivo inteiro e o scrub congela, sem erro no console e sem aviso. Cada página daqui sobe com uma função no edge só para resolver isso.

HTTP Range · 206 Partial Content

sobre

Sou José Otávio, desenvolvedor e designer freelancer no Brasil. Assino como otaviom.

Comecei pelo código e acabei desenhando, porque entregar uma página bonita que não sobe (ou uma que sobe e não convence ninguém) resolve metade do problema. Hoje pego a peça inteira: a ideia, a narrativa, o vídeo, o código e o servidor.

Trabalho sozinho e gosto de coisa pequena e bem-acabada. Se o projeto pede uma equipe, eu digo antes de começar.

Tem uma história para contar?
Me manda o contexto.

Diga o que você vende, para quem, e em quanto tempo precisa no ar. Eu respondo com o que dá para fazer e com o que não dá.