Sobre este template
3D Portfolio entrega a uma marca de 3D, games ou entretenimento uma primeira tela pronta e os números que a produziram. Ela abre com “Jack — 3D Creator” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta é preto #0C0C0C por baixo e branco #D7E2EA para a tipografia. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. A página mantém o movimento em transições de 200ms e um loop de vídeo ao fundo. Parta do briefing capturado e depois edite a portfólio em vez de reconstruí-la do zero.
Feito para
- Pegue a moldura em 1472x1080 e seções de 85vh e passos de espaçamento de 160px desta portfólio antes de pegar qualquer outra coisa.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta portfólio como o padrão que todas as outras páginas copiam.
- Profissionais de marketing de produto que precisam que portfólio continue legível com 6,4s de vídeo em loop atrás do texto.
O que está incluído
- Navegação sem fundo próprio. A barra fica sobre a portfólio em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Medido contra a viewport. O layout é resolvido sobre valores fixos (seções de 85vh, passos de espaçamento de 160px e transições de 200ms), e é isso que mantém a primeira tela composta em qualquer largura. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto. Mantenha os valores que parecem arbitrários.
- Mídia atrás da tipografia. O vídeo fica na camada de baixo da composição em 1472x1080, com a tipografia organizada acima e nada entre os dois. O loop é curto o bastante (6,4s) para o olho ler como textura e não como linha do tempo. Exporte em 1472x1080 ou mais largo para o recorte continuar honesto.
- Cards sem bordas. O meio da página é uma grade de cards, não um bloco de texto: cada painel carrega uma ideia com um ícone e uma linha curta, o que mantém o caminho de leitura horizontal e curto. A ordem dos painéis é a ordem de leitura, então nada depende de pistas de posição.
Movimento e interação
Mudanças de estado, cronometradas
As transições estão especificadas em 200ms, e é esse o tempo ao qual os controles obedecem. Se a curva de aceleração mudar, a duração precisa ser revista junto. Leve as durações para o seu build.
Uma cena, não um frame
A peça central é renderizada ao vivo (uma transformação 3D no elemento principal) em vez de entregue como imagem, então a composição em 1472x1080 reage à viewport em vez de ficar atrás dela. A composição precisa sobreviver à falha da renderização, porque nada mais preenche aquele espaço.
A portfólio com a sua cara
Quando você colocar a sua própria mídia, mantenha o recorte e a ordem das camadas. A mídia é um loop de 6,4s em 1472x1080. É esse posicionamento que mantém o texto legível. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Ler 3D Portfolio como especificação
O briefing é uma especificação, não um moodboard. Ele fixa seções de 85vh, passos de espaçamento de 160px e transições de 200ms e diz qual é a mídia: 1472x1080 com um loop de 6,4s. Esse nível de detalhe é o que faz o design sobreviver a uma reconstrução: mude o texto e as relações continuam de pé. Nada nesta portfólio depende de um padrão.
Como a portfólio se reorganiza
Larga, a composição é densa; estreita, a escala é fluida, não em degraus e a seção fica presa a 85vh. Os dois estados estão descritos no briefing. Um espremer teria sido mais barato e não se sustentaria.
Perguntas frequentes
O que eu recebo ao copiar o briefing de 3D Portfolio?
O briefing capturado tem 13.877 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.
Por que o prompt do 3D Portfolio não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 13.877 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Tailwind CSS para reconstruir 3D Portfolio?
3D Portfolio 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.
