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!