18 Portfólios e Sites Insanos (E Porque Você NÃO Deveria Copiá-Los)

Eu cavuquei a internet inteira por vídeos e sites listando os melhores portfólios e websites e quase que a totalidade deles mostrava esse do Bruno Simon que fez um portfólio totalmente em 3D com um carrinho interativo que buzina e dá para verificar os projetos dele do lado. . .

Isso aqui, turma, é interativo, é link normal. Inclusive, do outro lado do mapa, dá até para dar uma acelerada aqui, olha. .

. Do outro lado do mapa, ele fez um playground, turma, que dá para brincar! Vamos ver se eu consigo "rampar" de primeira.

. . Ae!

! Inclusive, no topo do mapa, turma, ele colocou um easter egg. Olha só que interessante.

. . Se você dirigir até aqui e apertar o "Enter".

. . Não acontece nada.

Outro website bastante listado foi esse meio de pagamento chamado "Plink". E eles usaram muita animação 3D no fundo das páginas. .

. Mas até a próxima sessão, eu gostei ainda mais quando ele joga esse efeito das moedinhas em 3D na nossa cara. Muito massa.

E para a minha surpresa, nessas listas tinha um portfólio de um brasileiro chamado Rafael Caferati. E turma, depois dessa introdução com esse efeito de partícula física, tem um detalhezinho muito massa que é esse bottom aqui. .

. "Destroy this Webpage", que é "Destrua Esta Página". E chega uma navezinha que você consegue atirar com espaço, só que se as partículas encostarem em você, você perde vida.

E quanto mais pontos você fizer, melhor. E tem um modo Matrix apertando A, tem até o modo escudo apertando D. .

. Turma, ficou muito massa! Agora, eu vou mostrar um experimento que uma agência chamada "Make me Pulse" fez para mostrar para os seus clientes as habilidades que eles tinham de criar cenários interativos.

E turma, eu vou clicar e arrastar aqui no chão, e ele vai formar uma flor no formato do que eu estou arrastando com o mouse. Turma, é simplesmente sensacional e muito bonito. Olha isso.

. . Só que a cena mais bonita vem agora, turma.

. . Olha isso aqui que sensacional!

É uma animação 3D muito melhor que muito jogo e está rodando aqui no meu navegador. Só que quando eu clicar, olha o que vai acontecer. .

. Clicar e segurar. .

. Olha o efeito. .

. Eu não sei se pelo vídeo, vocês vão estar percebendo a energia desse negócio, mas quando eu olhei pela primeira vez, eu fiquei louco. É muito bem feito!

Agora, um outro portfólio que foi bastante citado é esse do Jack. E apesar de que tem efeitos na tela, tem esse efeito no fundo. .

. Passa o mouse em cima e dá esse efeito de bounce nas letrinhas. .

. Quando eu chego aqui na parte de listar os trabalhos, eu não consegui entender por que ele fez isso. Os trabalhos ficam mudando de posição!

Olha isso, turma. . .

A pessoa está vendo e o negócio vai para um lado e para o outro. . .

E eu gostaria de usar isso como um gancho para uma coisa muito importante que a gente vai falar no final deste vídeo. Turma, lembrem disso aqui, dessa experiência, porque a gente vai falar sobre uma coisa muito séria no final deste vídeo. Outro website que ficou muito popular pela abordagem inédita que ele teve foi "Mostrando a riqueza em escala".

E a ideia é representar US$1 mil em um pixel, e continuar com essa ideia até o final do site. Então, por exemplo, para representar o salário médio anual de uma família americana dos Estados Unidos, que é de US$63 mil, é essa quantidade de pixels aqui. Depois, US$1 milhão fica esse tamanho nessa quantidade de pixels.

Depois turma, olha o salto de US$1 milhão para US$1 bilhão! Eu não conseguia imaginar que era tão grandiosa a diferença entre esses dois números. Turma, eu estou fazendo scroll aqui.

. . Depois, ele mostra de US$1 bilhão para US$139 bilhões, que é a riqueza do Jeff Bezos.

. . E aí turma, o negócio vai.

. . E o negócio vai.

. . E olha.

. . Eu não sei se vai dar para ver o tamanho do scroll até o final da página.

Turma. . .

O negócio é maluco. É muito massa! Outro portfólio que ficou muito famoso pela abordagem inédita foi esse do Robby Leonardi.

Então, eu começo a fazer o scroll aqui para baixo na página e ele simula um jogo de plataforma. Não preciso fazer mais nada. Eu estou só fazendo scroll e ele passa pelo level 1, onde ele mostra as habilidades em cada área.

. . Eu estou fazendo o scroll e ele pulou sozinho, estou só fazendo scroll.

. . Algumas animações.

. . Guarda esse também, porque a gente vai falar sobre essas coisas no final do vídeo.

. . Mas é superinteressante.

Vai para o level 2, fase da água. . .

E assim vai. Outra agência especializada em interações em tempo real é essa "Lusion" aqui, e eu quero destacar dois efeitos. Primeiro é esse translúcido.

Turma, eu não sabia que dava para fazer isso no navegador com uma performance tão alta. Está tipo. .

. Está nativo. E outra, aqui na página "About".

Turma, olha só que delicinha. . .

Tem até um som misterioso. . .

Olha esse efeito, turma. . .

É sensacional! E se eu clicar, olha o que acontece. .

. Vou clicar de novo. .

. Delicinha! Outro site sensacional é de um carro autônomo chamado Zoox, e olha só a paleta de cor que eles escolheram para apresentar o projeto.

. . Turma, é muito bonito, é uma coisa cyber punk.

. . Não sei, eu adoro essas cores.

E tem uma outra sessão que parece que a gente está espiando uma pessoa de fora do carro. Olha só. .

. Olha que massinha. .

. É muito bem executado, turma. .

. É só no scroll. É muito, muito bonito.

Olha isso, turma. . .

Outra agência muito comentada é a "Active Theory". Eles construíram um cenário 3D meio que interativo. Então, eu vou passando o mouse e a câmera vai mexendo.

. . Mas o que mais me chamou atenção é que a cor da luz desse telão reflete no chão do cenário 3D.

E se eu passar o mouse aqui em cima, muda o cenário, turma. Quando a gente está em uma sala comercial, passo o mouse, está em um lago. .

. E turma, por aí vai. É muito massa.

Outro portfólio que foi muito citado foi esse do Josué Espinosa, e ele já começa com uma frase bastante espinhosa que é. . .

"Eu não sou seu desenvolvedor de software padrão, ou tradicional", enfim. . .

Mas eu acho que esse portfólio foi destacado por conta desse efeito. . .

Eu vou fazer o scroll da página para baixo e olha. . .

Ah. . .

É delicinha, vai? O próximo website é sobre um app, e abordagem que eles adotaram para mostrar o app me chamou bastante atenção. Então, a gente começa com um mundinho 3D e se eu fizer o scroll aqui vai para outra cena.

. . E agora, o que me chamou atenção.

. . Para mostrar o app, eles de fato sacam uma mão na tela e ela também tem uma certa interação.

. . E cada slide que eu dou, cada navegada que eu dou, na verdade, vai para um outro cenário, e cada mão tem um contexto diferente para explicar como o app funciona em cada contexto.

Esse próximo site é uma experiência sensacional. Ele te coloca dentro de um quarto com várias coisas das antigas, mas em especial um quadro falando: "Pegue o seu celular", e um controle do Super Nintendo. E clicando, indo para a direita, ele tem um computador meio que estranhão na vertical, mas tem um motivo muito claro do porquê ele está na vertical.

E ele vai carregar um software e vai chegar numa parte em que ele mostra um QRCode. Eu vou pegar o meu celular, vou escanear esse QRCode. .

. E olha só o que vai aparecer na minha tela. .

. Um controle de joguinho! E agora, eu vou jogar.

E olha só. . .

Turma, é genial! Dá para fazer muita coisa com isso, turma. Olha isso!

Outro portfólio que chamou bastante atenção na internet foi esse do "Adeola". E as cores que ele selecionou foram fantásticas, mas eu acho que chamou atenção por conta desse efeito. Vocês não estão vendo, porque eu estou sendo bem sutil.

. . Mas agora eu vou navegar bem rápido e olha só.

. . Ele entorta a página, turma.

É muito louco! Mas a gente vai conversar sobre isso no final do vídeo também. Esse próximo experimento chamou muita atenção na internet porque ele é feito em React, mas é tudo 3D.

É de uma biblioteca chamada react-three-fiber, que ele faz a abstração daquele 3JS. Turma, olha que massinha! Tem até turbo!

Olha que louco! É muito, muito massa! Um outro site que chamou muita atenção pela experiência que dá na pessoa ao acessar é esse alemão aqui.

Você vai descendo e descendo e descendo, e vai aparecendo animações. . .

E eu não entendo os textos infelizmente, Eu queria traduzir depois. . .

Mas é uma coisa, é uma experiência que mexe. . .

Só vendo as imagens, você vê que tem alguma coisa especial aí, turma. Olha só que massinha. .

. Outro site que está chamando bastante atenção na internet é sobre esse clube chamado "KODE", que vai ser supostamente lançado em 2022. E turma, olha que bem executado!

Eu imagino o mapa do clube oficial, e dá para conversar com as pessoas, dá para interagir com os itens, dá para chutar a bola, dá para pegar até alguns itens, tipo formando quests. . .

Eu vou pegar a estrelinha. Olha lá. .

. Não sei se dá para correr. .

. E assim vai indo. .

. Agora, antes de mostrar os dois últimos websites, eu quero avisar que no final deste vídeo aqui, eu quero indicar mais dois vídeos para você continuar sua jornada. .

. E o próximo site que eu vou mostrar, você vai falar: "Ah, está de sacanagem! " E é o site da newsletter.

Mas calma! Ele é o gancho para o último portfólio que eu quero mostrar que já está aberto aqui. .

. E a mensagem final que eu quero dar para vocês sobre tudo o que a gente viu até então. Turma, eu não sei se é só opinião pessoal minha, ou mais alguém que está assistindo vídeo compartilha disso.

. . Mas na minha opinião, vários dos efeitos que foram mostrados nesses portfólios, mais atrapalham do que ajudam a experiência de acessar o portfólio.

Talvez um dos benefícios de fazer efeitos é você chamar atenção ao ponto de estar dentro de um vídeo ou estar dentro de listas de outros sites. Mas turma, assim. .

. Eu não sei! Talvez então a estratégia seja você fazer uma coisa que chame tanta atenção, mas tanta atenção, que fure certas (bolhas?

) e todo mundo acaba conhecendo, ou eu sinceramente sugiro você fazer uma coisa simples, como o que eu fiz aqui para a newsletter, que o produto é economizar o seu tempo em consumir materiais de tecnologia. . .

E de cara aqui está na headline: "Notícias de tecnologia para quem não tem tempo de ler notícias. " Turma, está aqui! É a primeira coisa que a pessoa vai ler, e eu não estou querendo dizer que esse é o melhor layout que existe no universo.

Não! Mas é um layout que é fácil de consumir e o mais importante: quanto mais simples, menor a probabilidade de um layout desmoronar. Quando você vai adicionando várias coisas, Turma, tem cada layout que é como se fosse um prédio que desmoronou!

Turma, é literalmente. . .

Eu entro em uma interface, parece que é um negócio desmoronado! Então, quanto mais simples, menor a chance de isso acontecer. Mas aí vai vir alguém e vai falar: "Mas então você não sabe fazer layout e fazer website, você faz essas coisas toscas simples aqui.

. . " Aí você fala: "Não, este aqui é minimalista.

" E não só eu estou fazendo coisas minimalistas. Olha só esse portfólio do Damian. .

. É simples! Você o vê, você vê a mensagem principal que ele é um designer que trabalha com websites e user interfaces.

Turma, é simples. Vai descendo. .

. Estão aqui os estudos de caso que ele fez. .

. E no final, olha a mensagem que ele coloca que sensacional. .

. "Precisa de um designer? Vamos trabalhar juntos.

" Turma, é isso! Agora, eu gostaria de recomendar dois vídeos aqui do canal que tiveram uma aceitação absurda, muito acima do que eu poderia sonhar! E o primeiro é esse.

. . "5 Hábitos Que Todo Programador Júnior Já Deveria Ter".

. . E o outro é.

. . "3 Técnicas Que Eu Uso Para Aprender a Programar Qualquer Coisa", inclusive para aprender qualquer coisa que você quer aprender por mais difícil que seja, e por mais que você não tenha o dom.

Fechado? Valeu!