TestaAí
ZERO_OS / QUICK ACCESS

Navegue pelo laboratório.

10 resultados. Selecionado: Manifesto.

07 testes no laboratório

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 Abrir briefing

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
  • Vite
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 OBSERVADO07 produtos / mobile, operação, fintech, automaçã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

    Nove ilhas pequenas adicionam busca, 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
151.3 KB
97% do teto97% / TETO 156 KB
CSS / GZIP
31.2 KB
98% do teto98% / TETO 32 KB
INTERAÇÃO PRÓPRIA
25.2 KB
90% do teto90% / TETO 28 KB
FONTE LOCAL
32.9 KB
94% do teto94% / TETO 35 KB

BUILD SNAPSHOT / SERVER 1330.9 KB / SEM WEBASSEMBLY

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

Nove módulos. Nove 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
04CommandPalettebusca e salto por tecladonavegação e links nativos
05EngineeringConsolelentes técnicas em abasprimeira lente legível
06ProjectLensfiltro por capacidadecatálogo completo
07BlueprintToggleinspeção visual da gradeinterface editorial padrão
08CopyLinkcópia contextual de URLURL canônica navegável
09PrintBriefatalho para impressão/PDFimpressão nativa do navegador

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
06print
o briefing vira documento A4 sem navegação ou decoração desnecessária

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 scripts de terceiros. As políticas de resposta transformam essa ausência em uma fronteira verificável.

  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

    Nenhuma observação oculta

    Sem cookies, analytics, fontes remotas, pixels ou conexões de fundo no portfólio institucional.

    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, descoberta por busca 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 nove 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 / 09 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 sem observação oculta

    Recrutadores, leitores e crawlers precisam verificar autoria, projetos e qualidade, enquanto um portfólio institucional não precisa vigiar comportamento.

    DECISÃO
    Publicar portfolio.json, RSS, sitemap e humans.txt com contratos testados; manter analytics, cookies, fontes remotas e pixels fora da origem.
    ALTERNATIVA RECUSADA
    Telemetria terceirizada responderia perguntas de audiência, mas adicionaria identidade, rede e política de dados sem melhorar a avaliação técnica.
    CONSEQUÊNCIA ACEITA
    Não há funil comportamental automático. A evidência passa a vir do artefato, dos checks e das conversas iniciadas por quem o inspeciona.
    PUBLIC CONTRACTS / 0 TRACKERS / 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
0 TRACK

Sem observador oculto

Nenhum analytics, cookie, fonte remota ou conexão de fundo entra na experiência institucional.

05 / INTERACTIONPASS
25.2 KB

Complexidade com teto

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

06 / DISCOVERYPASS
18 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 briefing imprimível para leitura de recrutador.

    07 CASES / BRIEF / COMMANDS
  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