Sobre este template
Creative Portfolio preserva o rastro das decisões: o briefing que produziu esta portfólio tem 5.639 caracteres. O título diz “I craft bold brands and modern websites with purpose”, e o resto da portfólio se organiza em volta disso. O esquema de cores é verde profundo #181B17 por baixo, branco #DED9CF para a tipografia e azul vivo #309ADA carregando os destaques, e a página é composta em Figtree. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O briefing gasta o orçamento de movimento em transições de 1200ms e cubic-bezier(0.16, 1, 0.3, 1). Se você está briefando uma portfólio de agência, parta desta composição e substitua o assunto.
Feito para
- Engenheiros que precisam que a portfólio sobreviva a uma conexão lenta vão usar 640x468 e a escala tipográfica como orçamento de peso.
- Times internos que estendem esta portfólio e precisam de tipografia de 28px a 200px e passos de espaçamento de 80px levado para os novos blocos sem alteração.
- Feito para quem cuida do conteúdo e reescreve uma portfólio cujo título precisa continuar tão longo quanto o da Creative Portfolio.
O que está incluído
- Links colapsam em uma largura. A fileira gasta o contraste em um lugar só: a ação #309ADA, com a marca e os links recuados na cor do texto. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os links são compostos abaixo da marca em tamanho, e a ação #309ADA é o único elemento da barra com peso. Não dê à marca mais espaço do que a tipografia dela precisa.
- Números, não impressões. Os valores são a especificação: tipografia de 28px a 200px, passos de espaçamento de 80px, transições de 1200ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1), capturados em 640x468 em vez de inferidos de um print. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição.
- Linha de cima: marca, links, uma ação. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes. A referência tem captura em 640x468.
- Passos de espaçamento citados. O espaçamento é declarado do mesmo jeito (tipografia de 28px a 200px, passos de espaçamento de 80px, transições de 1200ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1)), não como uma escala que cresce sozinha.
Movimento e interação
Durações vindas do briefing
O orçamento de animação é pequeno e explícito: 1200ms usando cubic-bezier(0.16, 1, 0.3, 1), aplicado a mudanças de estado, não a entradas. Toda mudança de estado nomeia um valor, então o padrão do navegador nunca é usado.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x468 fica parada e só se movem os elementos que respondem a você. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
Como Creative Portfolio ordena a primeira leitura
Aqui, a ordem é o projeto em si. a navegação, a linha de estatísticas e o clipe de fundo estão posicionados para a oferta chegar antes da prova, e tipografia de 28px a 200px e passos de espaçamento de 80px definem a distância entre os dois. O leitor de agência recebe a oferta antes das opções.
O que mudar primeiro em Creative Portfolio
Comece pela promessa, não pela decoração. Reescreva “I craft bold brands and modern websites with purpose” como uma frase que diga o que você faz, depois componha essa frase em Figtree no tamanho de display que o briefing usa. Troque azul vivo #309ADA pelo seu próprio destaque e confira o contraste contra verde profundo #181B17 antes de mexer em qualquer outra coisa. Uma marca diferente pode reaproveitar a moldura inteira.
Ler Creative Portfolio como especificação
Uma reconstrução normalmente começa com uma captura de tela e uma suposição. Aqui ela começa com 5.639 caracteres de especificação: a moldura, o espaçamento e o movimento estão escritos antes da primeira linha de código. Nada nesta portfólio depende de um padrão.
Perguntas frequentes
O que o briefing por trás de Creative Portfolio contém de fato?
O briefing capturado tem 5.639 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 portfólio do Creative Portfolio em outra stack?
Creative 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.
Posso manter as transições de Creative Portfolio e mudar os tempos?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 1200ms usando cubic-bezier(0.16, 1, 0.3, 1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
