Sobre este template
Portfolio Cosmic resolve o problema de portfólio para uma marca de 3D, games ou entretenimento com um único briefing capturado. “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life” é a linha que o layout foi construído para sustentar. A paleta se reduz a preto #000000 por baixo, branco #D1DAD8 para a tipografia e azul #4E85BF carregando os destaques, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 800x562 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 2700ms. Trate como o briefing de uma portfólio para uma marca de 3D, games ou entretenimento que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Se três pessoas vão editar esta portfólio, dê a quem cuida do conteúdo um tamanho de display fixo de 13px e seções de 300vh em vez de uma captura de tela.
- Feito para um fundador solo lançando uma portfólio para uma marca de 3D, games ou entretenimento, sem nenhum design system atrás.
- Quem briefa um modelo para uma portfólio vai usar o prompt de 8.253 caracteres como ponto de partida.
O que está incluído
- Navegação em uma só linha. Os links ficam em uma linha só, em um único tamanho, e a ação #4E85BF fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #4E85BF é o único elemento da barra com peso.
- Passos de espaçamento citados. Os tamanhos foram lidos do render em 800x562: um tamanho de display fixo de 13px, seções de 300vh, passos de espaçamento de 13px e transições de 2700ms. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído. Verifique uma reconstrução contra os mesmos números.
- Varrer vence ler aqui. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a portfólio fácil de varrer. Os painéis compartilham a família da interface em um tamanho só, o que impede a grade de virar um segundo layout. A ordem dos painéis é a ordem de leitura.
- Links antes da ação. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #4E85BF, tudo no menor passo tipográfico do briefing.
Movimento e interação
Mudanças de estado, cronometradas
Os controles resolvem em 2700ms, rápido o bastante para a página responder ao toque, e não depois dele. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback. Cronometre o feedback com exatidão.
Movimento horizontal contínuo
A faixa horizontal é o elemento mais chamativo depois do título: movimento contínuo, #4E85BF no item ativo, e nunca pede interação ao leitor. O item ativo é marcado com #4E85BF, não com uma mudança de tamanho.
O que mudar primeiro em Portfolio Cosmic
Comece pela promessa, não pela decoração. Reescreva “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life” como uma frase que diga o que você faz, depois componha essa frase em Inter no tamanho de display que o briefing usa. Troque azul #4E85BF pelo seu próprio destaque e confira o contraste contra preto #000000 antes de mexer em qualquer outra coisa. Reescreva o texto e a mídia antes de repintar qualquer coisa.
O tempo por trás da portfólio
Enquanto um template anima cada seção na entrada, esta anima transições de 2700ms, camadas em parallax e um elemento sticky e depois para. Nada anima por si nesta portfólio.
O que esta portfólio acerta
Quando você briefa uma portfólio de 3D, a parte difícil é decidir o que a primeira tela se recusa a dizer. Portfolio Cosmic responde isso de antemão: uma linha de display e a navegação, o selo de anúncio, a linha de estatísticas, a grade de cards e o clipe de fundo atrás dela. Dá ao leitor de 3D a rota honesta mais curta até a oferta.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Portfolio Cosmic?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x562, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Portfolio Cosmic depende de React e Tailwind CSS?
Portfolio Cosmic 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.
Posso publicar uma página reconstruída a partir de Portfolio Cosmic sem dar os créditos?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x562.
