Sobre este template
Portfolio About preserva o rastro das decisões: o briefing que produziu esta página sobre tem 5.431 caracteres. O esquema de cores é preto #0C0C0C por baixo e branco #D7E2EA para a tipografia, e a página é composta em Kanit. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. O movimento se resume a transições de 200ms, mantido discreto o bastante para o texto continuar conduzindo. Use quando a página sobre precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Cite uma moldura em 640x468 na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta página sobre como o padrão que todas as outras páginas copiam.
- Feito para um fundador solo lançando uma página sobre para uma agência ou estúdio, sem nenhum design system atrás.
O que está incluído
- Números levados para a construção. Os tamanhos foram lidos do render em 640x468: passos de espaçamento de 160px e transições de 200ms. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho.
- Uma pílula para a única novidade. Um selo, uma mensagem: a pílula fica acima do título em Kanit no menor passo da escala, e nada mais disputa esse lugar. Existe um único anúncio, e é isso que faz o selo parecer notícia.
- Uma escala para tipo e moldura. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 160px e transições de 200ms), não como uma escala que cresce sozinha.
- Selo acima da dobra. Mantenha acima do título, nunca ao lado dele. A referência tem captura em 640x468.
Movimento e interação
Todo o orçamento de animação
Os controles resolvem em 200ms, rápido o bastante para a página responder ao toque, e não depois dele. As durações são curtas o bastante para o feedback parecer resposta, e não animação.
Ponteiro só onde ajuda
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards e um elemento sticky que segura a posição enquanto o conteúdo passa por baixo. Todo o resto fica parado, e isso mantém a ênfase na composição. O feedback se limita aos controles, então a composição fica parada em volta deles. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
A página sobre com a sua cara
Compare com começar de uma página em branco. Aqui a moldura (640x468) e passos de espaçamento de 160px e transições de 200ms já estão decididas, então o trabalho é de substituição, não de composição. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Como Portfolio About ordena a primeira leitura
Compare o topo desta página com uma tela de landing page típica de agência. As duas trazem um título e uma ação; aqui o selo de anúncio, a linha de estatísticas e a lista de recursos ficam em ordem fixa em vez de competir com o mesmo peso. O leitor de agência recebe a oferta antes das opções.
Por que esta composição funciona para agência
A maioria das páginas de agência acrescenta mais uma seção quando a primeira tela é fraca. Esta remove opções: o selo de anúncio, a linha de estatísticas e a lista de recursos, nessa ordem, e nada que repita a oferta. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Portfolio About?
O briefing capturado tem 5.431 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Posso reconstruir página sobre do Portfolio About em outra stack?
Portfolio About foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
Como se comportam as transições de 200ms em Portfolio About?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 200ms. Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
