carlos@cesaints: ~/.colophon.md — zsh

Comando: cat .colophon.md

.colophon.md · 3,2 KB · atualizado em

Colophon

A ideia

O site é uma janela de terminal. Cada página é a saída de um comando, e os próximos comandos aparecem no fim de cada página como links, então dá para navegar sem digitar nada. Com JavaScript, o último prompt de cada página vira um terminal de verdade, e Ctrl+K (⌘K no Mac) abre uma paleta de comandos com as páginas e as ações. Os três caminhos saem da mesma fonte de conteúdo, e tudo se lê sem JavaScript: o terminal e a paleta são outro caminho, nunca o único.

Stack

  • Astro 7 gera HTML estático; Preact fica reservado para as partes interativas.
  • TypeScript estrito em tudo, com o conteúdo validado por schema no build.
  • Uma função no servidor, a do formulário de contato, com envio pelo Resend.
  • Hospedagem na Vercel, com deploy só depois de o CI passar inteiro: lint, tipos, testes unitários e de integração, build e testes no navegador, com e sem JavaScript, incluindo acessibilidade.

Cores e tipos

A janela segue o Terminal do macOS: fundo quase preto, prompt verde, diretórios e links em azul, erros em vermelho e, na seção de segurança, roxo, a cor do purple team, que junta ataque e defesa. Esse tema escuro é o padrão para todo mundo, seja qual for a configuração do sistema. O tema claro, no estilo do perfil “Basic” do Terminal, só entra quando você escolhe: no botão “tema” da barra de status, com theme papel no terminal ou pela paleta. Um teste lê as cores do próprio código e confere o contraste AA da WCAG de cada cor de texto contra cada fundo da janela, nos dois temas.

O texto usa IBM Plex Mono. A barra de título usa a fonte de interface do sistema, com IBM Plex Sans como reserva, e o CV impresso sai em IBM Plex Sans. As duas são servidas pelo próprio site, sem requisição a terceiros.

A chuva

A chuva de código do fundo é feita de dados reais: o hash do build que você está vendo, os nomes dos comandos do terminal e os caminhos dos arquivos. Ela não passa por baixo do texto e começa rápida. Para quem pede menos movimento no sistema, ela começa desligada, e dá para ligar se quiser; com as cores forçadas do modo de alto contraste, fica sempre desligada. O botão “chuva” da barra de status pausa e retoma, e no terminal rain on|fast|calm|off escolhe entre rápida (on e fast são a mesma), calma e desligada. Ela para quando a aba fica oculta, pausa depois de cinco minutos sem atividade e volta quando você mexe na página, e fica calma com a bateria fraca.

Segurança do próprio site

  • CSP por hash em todas as páginas e frame-ancestors 'none', além de HSTS, nosniff, Referrer-Policy e Permissions-Policy.
  • Nenhum HTML montado a partir de string: uma regra de lint reprova innerHTML e APIs parecidas.
  • Formulário validado no servidor, com honeypot, token de tempo, rate limit e orçamento diário de envios.
  • Varredura de segredos no CI e uma guarda de privacidade que impede que nomes de clientes ou repositórios privados entrem num commit.
  • Regras de reporte.

Processo

Decisões registradas com contexto, prós e contras; testes automatizados para o núcleo do shell, os comandos, o formulário e a chuva; testes no navegador para cada página, com e sem JavaScript; e nada vai para produção sem o CI verde.