Portfólio desenvolvedor: como um vibe coder orquestra o site em JS puro

Portfólio desenvolvedor no vibe coding é passar referência e currículo e orquestrar. O scramble é JavaScript puro, 1,3 s e delay de 280 ms.

Gabriel abriu o portfólio novo na live de 114 min. Ia fazer ajustes baseado no material. Mandou uma referência de design, mandou o currículo e foi fazendo. A referência entra no visual e o currículo entra no conteúdo. O resto é ler o que voltou e mandar o próximo ajuste.

Eu só passei a referência, o material e fui orquestrando aqui, tá ligado? Não sei nada.

O amigo leu o código e falou o que o arquivo mostrava:

Ele fez tudo com JavaScript puro. Não usou nenhuma biblioteca.

Abriram um index.html, um script.js, um style.css. O script.js é o arquivo do scramble e do cursor. O index.html é a página. Gabriel, no mesmo olhar para os arquivos, apontou o tamanho do CSS em relação ao JavaScript. O style.css é o arquivo grande daquele trio.

Isso que eu falei, o style dele tá gigante.

A lanterninha do Google e o material que entra

O site anterior era React na unha. A animação de lanterninha ele tinha pesquisado no Google.

Horrível, mano.

Ele já tinha tentado montar o portfólio desenvolvedor peça por peça, com o que o Google devolve para animação de lanterna. O julgamento na live cobre o React na unha e a lanterninha do Google. O novo começa no material: referência de design e currículo, o mesmo par que ele mandou para orquestrar. O recorte é ajuste em cima de ajuste, olho no que o modelo devolveu, com a live aberta. O site antigo já tinha o custo da lanterninha pesquisada no Google e montada na unha.

Noutra hora da mesma live o recorte foi IA para logo. Este texto é o portfólio.

O scramble de 1,3 s no vibe coding

Com o repo aberto na tela, eles foram ao script.js. Leram no código a duração de 1,3 segundos e o delay de 280 ms, o loop em requestAnimationFrame, o objetivo de escrever o nome Gabriel. Esses números saíram do arquivo, lidos ao vivo, com as constantes à vista. Gabriel orquestrou, o modelo escreveu o JavaScript. O próximo ajuste, se houver, parte da duração e do delay. Ele não precisava escrever o requestAnimationFrame para mandar o material e ler o arquivo.

A bolinha atrasada e o preview ao colar o link

O cursor veio no mesmo script.js: mouse X, mouse Y, uma bolinha um pouco para trás do ponteiro. Quanto maior a velocidade, mais para trás. O visitante sente o atraso quando mexe rápido.

Ao colar o link, os metadados já vinham: dava para ver o preview na hora.

No vibe coding o portfólio que ele mostrou é esse trio e essa leitura do script.js, JavaScript puro, sem biblioteca.

Git sai do verde porque é básico

No portfólio, a lista de destaque pinta skill de verde. Git estava nessa faixa. Ele tira Git do verde.

Git é básico. Sacou?

Outra coisa na lista muda de cor. Essa ele achou da horinha. Git não é um diferencial. A retirada acontece com a lista aberta na tela.

Amanhã, para o portfólio desenvolvedor, mande uma referência de design e o currículo. Abra o que voltou. Conte os arquivos: um index.html, um script.js, um style.css, se for esse o trio, leia os 3. Leia a duração e o delay do scramble no script.js. Olhe o tamanho do style.css. Se Git estiver verde, tire.

Quem constrói em público deixa o repo aberto na câmera, que é o que as leis do movimento pedem. Dá para assistir à live e ouvir o amigo ler o JavaScript puro, e o Gabriel no style.css gigante.