Sobre este template
Personal Showcase é uma portfólio de agência construída a partir de um único briefing escrito, e esta página documenta esse briefing. A paleta é azul profundo #050E13 por baixo e branco #EFEEE9 para a tipografia, com tipografia Inter. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O movimento cabe todo em transições de 300ms, cubic-bezier(0.76, 0, 0.24, 1) e um loop de vídeo ao fundo. Trate como o briefing de uma portfólio para uma agência ou estúdio que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Esta portfólio é feita para agências que precisam da moldura em 1462x1080 sobrevivendo a três rodadas de edições do cliente.
- Se três pessoas vão editar esta portfólio, dê a quem cuida do conteúdo seções de 16vh e passos de espaçamento de 28px em vez de uma captura de tela.
- Profissionais de marketing de produto que precisam que portfólio continue legível com 12,9s de vídeo em loop atrás do texto.
O que está incluído
- Navegação em uma só linha. A navegação é uma fileira só, sem um segundo nível embaixo dela. Uma sobreposição mobile assume abaixo do breakpoint de tablet. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Medido contra a viewport. O layout é resolvido sobre valores fixos (seções de 16vh, passos de espaçamento de 28px, transições de 300ms e curva de aceleração cubic-bezier(0.76, 0, 0.24, 1)), e é isso que mantém a primeira tela composta em qualquer largura. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro. Mantenha os valores nomeados quando portar a página.
- Um clipe, não uma ilustração. A mídia é um clipe de 12,9s recortado para cover na moldura em 1462x1080, então nunca aparecem faixas pretas em nenhuma largura. Um frame de poster em 1462x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- A barra segue a grade. Uma barra fina ocupa o topo de portfólio, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois.
Movimento e interação
Rápido o bastante para parecer intencional
Uma única duração cobre as interações (300ms com cubic-bezier(0.76, 0, 0.24, 1)), e é isso que mantém hover e clique lendo como um sistema só. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só. Mudanças de estado rápidas, sem linha do tempo de scroll.
O loop faz o trabalho ambiente
O movimento ambiente é um clipe de 12,9s em 1462x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
A ordem por trás da portfólio
O preço é a paciência: a página retém o detalhe que uma grade escaneável entregaria de imediato. O que ela compra é uma primeira tela em que a navegação, a linha de estatísticas e o rodapé não podem ser mal interpretados. O leitor de agência recebe a oferta antes das opções.
O que mudar primeiro em Personal Showcase
Componha o texto novo no tamanho de display que o briefing nomeia (seções de 16vh e passos de espaçamento de 28px), e o resto da escala acompanha sem um novo design. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Como a portfólio se reorganiza
Comparado a um layout mobile que esconde seções, este as mantém e muda a forma delas: a seção fica presa a 16vh, a navegação vira um menu compacto no celular e o movimento tem um ramo de movimento reduzido. A hierarquia é o que sobrevive à reorganização.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Personal Showcase?
O briefing capturado tem 6.948 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.
O briefing de Personal Showcase é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 6.948 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Por que a entrada cita React e Tailwind CSS?
Personal Showcase 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.
