TestaAí

BUILD FILE. 001 / SELF-DIAGNOSTIC

Este site também é um sistema em teste.

A estética abre a conversa. Este dossiê mostra o que existe abaixo dela: renderização, orçamento, degradação, segurança e contratos de entrega.

Inspecionar o build Explorar os cases

SYSTEM LENSES. 00 / PRODUTO → CÓDIGO

Três lentes. O mesmo construtor.

Produto, arquitetura de sistemas e IA aplicada são ângulos da mesma prática: transformar uma pergunta em algo que possa ser usado e avaliado.

PRODUCT ENGINEERING / ACTIVE LENS

Da hipótese ao uso real.

O código começa no problema, atravessa uma vertical completa e volta como sinal de produto.

  • TypeScript
  • React
  • Next.js
  • React Native
ZERO_OS / TRACE● SYSTEM NOMINAL
  1. 01
    HIPÓTESEproblema + limite
  2. 02
    SLICEfluxo ponta a ponta
  3. 03
    SHIPambiente observável
  4. 04
    LEARNdecisão seguinte
hypothesis -> vertical_slice -> signal -> iteration

SINAL OBSERVADO04 produtos / mobile, IA generativa, colaboração e jogos

DELIVERY TRACE. 01 / REQUEST → EVIDENCE

Conteúdo primeiro. Interação depois.

A rota entrega semântica e navegação antes do JavaScript. Movimento e ferramentas chegam como aprimoramento progressivo com fronteiras pequenas.

  1. 01
    ROUTE

    Contrato da página

    Metadados, conteúdo semântico e JSON-LD nascem junto da rota, sem depender da hidratação.

  2. 02
    BUILD

    Compilação estática

    Vinext e Vite resolvem páginas, estilos e módulos antes da publicação; o sanitizador inspeciona a saída.

  3. 03
    DELIVERY

    Payload versionado

    CSS, JavaScript e fonte recebem nomes imutáveis; mídia responsiva mantém cache próprio e dimensões explícitas.

  4. 04
    ENHANCE

    Interação acoplada depois

    Sete ilhas pequenas adicionam movimento e controles sem tomar posse do conteúdo principal.

semantic route → sanitized build → immutable assets → bounded enhancement

PERFORMANCE BUDGET. 02 / COMPLEXIDADE COM LIMITE

Cada efeito paga aluguel.

Valores medidos no último artefato local. Os tetos vivem no código e fazem a verificação falhar quando uma mudança ultrapassa o combinado.

CLIENT JS / GZIP
153.8 KB
99% do teto99% / TETO 156 KB
CSS / GZIP
30.8 KB
91% do teto91% / TETO 34 KB
INTERAÇÃO PRÓPRIA
28.3 KB
98% do teto98% / TETO 29 KB
FONTE LOCAL
32.9 KB
94% do teto94% / TETO 35 KB

BUILD SNAPSHOT / SERVER 1452.9 KB / SEM WEBASSEMBLY

CLIENT ISLANDS. 03 / O QUE HIDRATA — E POR QUÊ

Sete módulos. Sete saídas.

Cada ilha tem uma responsabilidade estreita e um caminho sem JavaScript. O fallback é parte do desenho, não uma mensagem de erro.

Módulos interativos, responsabilidade e fallback sem JavaScript.
#MÓDULORESPONSABILIDADESEM JAVASCRIPT
01SignalFieldcampo generativo em canvascomposição visual estática
02ParticleLogomarca reativa em partículaswordmark estático e legível
03LabInterfaceprogresso, TOC e spotlightâncoras e leitura linear
04EngineeringConsolelentes técnicas em abasprimeira lente legível
05ProjectLensfiltro por capacidadecatálogo completo
06BlueprintToggleinspeção visual da gradeinterface editorial padrão
07CopyLinkcópia contextual de URLURL canônica navegável

ADAPTIVE UI. 04 / O AMBIENTE TAMBÉM É INPUT

Uma estética que sabe recuar.

Preferências do sistema alteram apresentação e movimento sem exigir um menu paralelo. A informação continua disponível em todos os modos.

01prefers-reduced-motion
movimento contínuo e transições decorativas são interrompidos
02update: slow
canvas e animações entram no mesmo caminho econômico de movimento reduzido
03prefers-reduced-transparency
superfícies recebem fundos opacos e bordas mais explícitas
04prefers-contrast: more
texto secundário e separadores ganham contraste adicional
05forced-colors: active
cor de sistema substitui efeitos que não carregam informação

THREAT MODEL. 05 / MENOR SUPERFÍCIE ÚTIL

Confiança não vem do layout.

O portfólio não precisa de câmera, cookies ou rastreamento persistente. As métricas agregadas usam ingestão de mesma origem, e as demais políticas continuam fechadas.

  1. 01 / EXECUTION

    Origem fechada, bootstrap explícito

    CSP fecha arquivos na própria origem e bloqueia atributos executáveis; o bootstrap inline exigido pelo runtime permanece como custo documentado.

    POLICY / ENFORCED
  2. 02 / EMBEDDING

    Superfície não enquadrável

    Frame ancestors, frame source e X-Frame-Options impedem uso silencioso da interface em terceiros.

    POLICY / ENFORCED
  3. 03 / CAPABILITIES

    Permissões negadas por padrão

    Câmera, microfone, geolocalização, pagamento, USB e browsing topics permanecem desativados.

    POLICY / ENFORCED
  4. 04 / PRIVACY

    Medição mínima e declarada

    Vercel Web Analytics mede pageviews e referências agregadas por rotas de mesma origem, sem cookies, identificadores persistentes, fontes remotas ou pixels publicitários.

    POLICY / ENFORCED

KNOWN LIMIT / SCRIPT-SRC MANTÉM UNSAFE-INLINE PARA O BOOTSTRAP DO RUNTIME / SCRIPT-SRC-ATTR NONE

DECISION LEDGER. 06 / CONTEXTO → ESCOLHA → CUSTO

A decisão termina com uma consequência.

Quatro ADRs curtos registram por que a implementação tomou este caminho, o que ficou de fora e qual evidência mantém cada escolha honesta.

  1. ADR-001 / ACCEPTED

    Rota estática, ilhas explícitas

    O portfólio precisava combinar narrativa longa e ferramentas interativas sem transformar cada página em uma aplicação cliente.

    DECISÃO
    Pré-renderizar conteúdo e metadados em Server Components; hidratar apenas sete módulos com responsabilidades estreitas e fallbacks nomeados.
    ALTERNATIVA RECUSADA
    Um SPA único simplificaria o estado global, mas faria leitura, navegação e indexação dependerem de uma fronteira cliente maior.
    CONSEQUÊNCIA ACEITA
    A composição exige contratos entre HTML e ilhas, porém mantém conteúdo, links e estrutura úteis antes de qualquer JavaScript.
    STATIC HTML / 07 ISLANDS / NO-JS FALLBACKS
  2. ADR-002 / ACCEPTED

    Movimento limitado pelo ambiente

    Partículas e transições ajudam a comunicar laboratório e tecnologia, mas podem competir com leitura, bateria, CPU e preferências do visitante.

    DECISÃO
    Usar canvas 2D determinístico com densidade e DPR limitados, pausa por visibilidade e interseção, além de modos reduzidos por preferência.
    ALTERNATIVA RECUSADA
    WebGL e uma cena 3D ampliariam o espetáculo, com custo desproporcional para uma camada que não carrega informação essencial.
    CONSEQUÊNCIA ACEITA
    O efeito é deliberadamente menos cinematográfico, mas recua de modo previsível e não altera a hierarquia nem a navegação.
    BOUNDED CANVAS / DPR CAP / ADAPTIVE MOTION
  3. ADR-003 / ACCEPTED

    Primitivas nativas antes do controle customizado

    Cases densos precisam revelar detalhes progressivamente sem esconder conteúdo de teclado, tecnologia assistiva ou ambientes sem hidratação.

    DECISÃO
    Priorizar links, âncoras, tabelas, meter, details e summary; adicionar comportamento cliente somente quando a primitiva não resolve a tarefa.
    ALTERNATIVA RECUSADA
    Acordeões e medidores inteiramente customizados dariam mais controle visual, mas recriariam foco, estados e semântica já disponíveis no navegador.
    CONSEQUÊNCIA ACEITA
    Algumas nuances variam entre navegadores; em troca, o caminho básico permanece operável, reconhecível e fácil de auditar.
    NATIVE DISCLOSURE / SEMANTIC METER / KEYBOARD PATH
  4. ADR-004 / ACCEPTED

    Inspeção pública com medição agregada

    Recrutadores, leitores e crawlers precisam verificar autoria, projetos e qualidade, enquanto o laboratório também precisa entender alcance e origem do tráfego.

    DECISÃO
    Publicar portfolio.json, RSS, sitemap e humans.txt com contratos testados; usar somente Vercel Web Analytics, sem cookies, por rotas de mesma origem.
    ALTERNATIVA RECUSADA
    GA4, pixels publicitários e identificação persistente ofereceriam funis mais detalhados, mas ampliariam coleta, rede, consentimento e risco de privacidade.
    CONSEQUÊNCIA ACEITA
    Pageviews e referências passam a ser medidos de forma agregada; não há perfil persistente, replay de sessão nem identificação individual de visitantes.
    PUBLIC CONTRACTS / COOKIE-FREE ANALYTICS / SAME-ORIGIN CSP

QUALITY PIPELINE. 07 / FAIL THE BUILD

Opinião no design. Contrato na entrega.

A revisão vai do dado editorial à resposta HTTP. Cada etapa reduz uma classe diferente de surpresa antes de a versão ser considerada pronta.

  1. 01

    Contrato

    schema / content / SEO / docs

    instância, dados e descoberta sincronizados

  2. 02

    Estática

    TypeScript / ESLint / contraste

    zero erro e zero aviso

  3. 03

    Mídia

    fidelidade / hashes / rollback

    derivados íntegros e recuperáveis

  4. 04

    Build

    Vinext / sanitizer / budgets

    artefato limpo e dentro do teto

  5. 05

    Runtime

    HTTP / semântica / headers

    rotas e políticas verificadas

  6. 06

    Borda

    links públicos / audit npm

    dependências e portas conferidas

CONTRACT BOARD. 08 / ÚLTIMO CORTE

Seis gates. Nenhuma barra de vaidade.

01 / TYPE SYSTEMPASS
STRICT

TypeScript como contrato

Tipos estritos, opcionais exatos e acesso indexado defensivo bloqueiam ambiguidade antes da build.

02 / STATIC ANALYSISPASS
0 WARN

Lint sem anistia

ESLint e regras JSX/ARIA falham tanto em erro quanto em aviso; acessibilidade não fica para o fim.

03 / CONTRASTPASS
84 AA

Leitura mensurada

Os pares informativos auditados passam WCAG AA, com adaptações próprias para contraste e cores forçadas.

04 / PRIVACYPASS
1 ANALYTICS

Medição agregada

Vercel Web Analytics registra pageviews agregados sem cookies, perfil persistente, fonte remota ou pixel publicitário.

05 / INTERACTIONPASS
28.3 KB

Complexidade com teto

Sete módulos próprios ficam isolados e abaixo do orçamento de 29 KB; conteúdo útil chega antes deles.

06 / DISCOVERYPASS
28 URL

Encontrável e legível

Sitemap, JSON-LD, RSS, canonicals e JSON Schema conectam páginas, cases, escrita, autoria e contrato.

BUILD HISTORY. 09 / QUATRO CORTES

O resultado guarda o caminho.

Um release log curto da própria interface. Cada corte adicionou uma capacidade verificável sem apagar a decisão que veio antes.

  1. CUT. 01

    A marca virou interface

    Paleta, Sora, frasco e linguagem de laboratório ganharam uma composição editorial responsiva.

    TOKENS / ICONS / STATIC ROUTES
  2. CUT. 02

    O manifesto virou sistema

    Home, Experimentos e Zero foram separados; blog, sitemap, RSS e dados estruturados abriram descoberta.

    MULTI-PAGE / SEO / WRITING
  3. CUT. 03

    A vitrine virou evidência

    Cases ganharam mapas, trade-offs, traces, falhas e perguntas para aprofundamento técnico.

    04 CASES / TRACES / QUESTIONS
  4. CUT. 04

    A evidência ganhou contrato

    Budgets reais, incident drills, superfícies legíveis por máquina e o próprio build ficaram inspecionáveis.

    QUALITY / RESILIENCE / JSON

BUILD FILE / OPEN FOR INSPECTION

A interface faz a promessa.
Os cases mostram o trabalho.

Inspecionar os sistemas