Redação YTI&W-News
📈 Introdução ao Projeto
Este artigo visa compartilhar a experiência de criar um portfólio pessoal com foco na parte técnica, destacando a escolha de tecnologias e a implementação de animações e interações com JavaScript. Ao longo deste artigo, exploraremos as escolhas de tecnologias, como o uso de Astro e GSAP, e como essas escolhas permitiram criar uma experiência de usuário atraente e imersiva.
Com o objetivo de criar um portfólio que seja tanto uma apresentação de habilidades quanto uma experiência de usuário atraente, escolhi utilizar uma combinação de tecnologias que permitissem criar animações e interações complexas sem comprometer a performance do site. Neste artigo, exploraremos como essas escolhas foram implementadas e como elas contribuíram para a criação de uma experiência de usuário única e imersiva.
Além disso, este artigo visa fornecer uma visão geral das tecnologias e técnicas utilizadas para criar o portfólio, tornando-o uma referência útil para desenvolvedores que buscam criar experiências de usuário atraentes e imersivas.
Escolha de Tecnologias
A escolha de tecnologias foi fundamental para a criação do portfólio. Ao longo do desenvolvimento, escolhi utilizar uma combinação de tecnologias que permitissem criar animações e interações complexas sem comprometer a performance do site. Algumas das principais tecnologias utilizadas incluem:
- Astro: Uma framework que permite criar sites estáticos e dinâmicos de forma fácil e eficiente.
- GSAP: Uma biblioteca de animação que permite criar animações complexas e personalizadas.
- Three.js: Uma biblioteca de WebGL que permite criar gráficos 3D complexos e imersivos.
- Swup: Uma biblioteca de transições de página que permite criar transições de página atraentes e imersivas.
Implementação de Animações e Interações
A implementação de animações e interações foi um dos principais desafios do desenvolvimento do portfólio. Ao longo do processo, escolhi utilizar uma combinação de tecnologias que permitissem criar animações e interações complexas sem comprometer a performance do site. Algumas das principais técnicas utilizadas incluem:
- Uso de GSAP para criar animações complexas e personalizadas.
- Uso de Three.js para criar gráficos 3D complexos e imersivos.
- Uso de Swup para criar transições de página atraentes e imersivas.
Conclusão
Em resumo, a criação do portfólio foi um processo desafiador e gratificante que exigiu a escolha de tecnologias e a implementação de animações e interações complexas. Ao longo do desenvolvimento, escolhi utilizar uma combinação de tecnologias que permitissem criar experiências de usuário atraentes e imersivas sem comprometer a performance do site. Espero que este artigo tenha fornecido uma visão geral das tecnologias e técnicas utilizadas para criar o portfólio e tenha sido útil para desenvolvedores que buscam criar experiências de usuário atraentes e imersivas.
🎨 Design e Inspirações
Para este projeto, eu desejava criar um design que fosse ao mesmo tempo minimalista e brutalista, com layouts claros e momentos que sentissem diretos e brutais. Eu estou obcecado com a fina-metragem: interações suaves, transições sutis e atenção aos detalhes que fazem tudo sentir intencional sem ser barulhento.
As inspirações para este design vieram de profissionais como Brijan Powell, Thomas Monavon, Greg Lallé e Gil Huybrecht.
🛠️ Tech Stack e Ferramentas
Astro: Um Framework Popular e Versátil
Astro é um framework que se tornou muito popular recentemente, e eu o adoro porque torna a SSG (Geração de Sites Estáticos) simples e direta, enquanto ainda permite que eu mantenha as coisas simples com JavaScript puro (sem React ou outros frameworks de JavaScript).
GSAP: Uma Indústria Estável para Animação Web
Para animações e interatividade, eu naturalmente escolhi o GSAP, um padrão da indústria para animação web. Eu usei o Lenis para rolagem suave (ele se combina muito bem com o GSAP), o Three.js para WebGL e o Swup para lidar com as transições de página.
Lenis: Uma Ferramenta para Rolação Suave
gsap.fromTo(
this.images,
{ yPercent: 100, autoAlpha: 0 },
{
yPercent: 0,
autoAlpha: 1,
duration: 0.8,
ease: "power3.out",
stagger: 0.1
}
)
Three.js: Uma Ferramenta para WebGL
Eu usei o Three.js para criar animações 3D complexas, como a animação do “rock” que não é abordada nesse artigo.
Swup: Uma Ferramenta para Transições de Página
Eu escolhi o Swup para lidar com as transições de página porque é fácil de integrar e me dá muita liberdade para orquestrar as animações.
Tailwind: Uma Ferramenta para Estilização e Layout
Eu usei o Tailwind para estilizar e criar o layout do meu portfolio.
Prismic: Um CMS para Gerenciamento de Conteúdo
Eu usei o Prismic como um CMS para gerenciar o conteúdo do meu portfolio.
Netlify: Uma Plataforma para Hospedagem
Eu hospedei meu portfolio no Netlify, uma alternativa sólida ao Vercel que estou escolhendo deixar de lado (por razões que você provavelmente pode adivinhar).
🕹️ Animações e Interações
Reveal Animations
Para textos, dividi os elementos em duas categorias: parágrafos (geralmente com várias linhas) e títulos (apenas um ou poucas palavras). Os parágrafos serão revelados linha por linha, enquanto os títulos serão animados caractere por caractere.
// Títulos
this.split = new SplitText(this.element, {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
return gsap.from(self.chars, {
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.01,
ease: "expo.out"
});
}
});
// Parágrafos
this.split = new SplitText(this.element, {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
return gsap.from(self.lines, {
duration: 0.9,
yPercent: 105,
stagger: 0.04,
ease: "expo.out"
});
}
});
Page Transitions
As transições de página são essenciais no desenvolvimento criativo. Elas permitem que mantenhamos o controle do ritmo do site e mantenhamos a experiência sentida como contínua.
// 1) Capture the link’s current state (small, in the header)
const state = Flip.getState(link)
// 2) Hide the title and fit the link into the title’s position/size
gsap.set(title, { opacity: 0 })
Flip.fit(link, title, {
absolute: true,
scale: false,
props: "fontSize,lineHeight,letterSpacing"
})
// 3) Animate from the captured state to the current position (link “grows” into the title)
Flip.from(state, {
absolute: false,
simple: true,
duration: 0.9,
ease: "expo.inOut",
onComplete: () => {
gsap.set(title, { opacity: 1 });
gsap.set(link, { opacity: 0 })
}
})
Vertical Slider
Para o caso de listagem, a ideia foi criar um slider vertical que permite que você navegue pelas obras, enquanto a obra ativa é escalada para ganhar destaque.
const timeline = gsap.timeline({
scrollTrigger: {
trigger: this.dom,
start: "top-=6.5% center",
end: "bottom center-=0.5%",
scrub: true
}
})
timeline.to(image, {
scaleX: scaleExpanded,
scaleY: scaleExpanded,
force3D: true,
duration: 0.8,
ease: "none",
}, index)
timeline.to(image, {
scaleX: 1,
scaleY: 1,
force3D: true,
duration: 1.5,
ease: "none",
delay: 0.3,
}, ">")
Slider to Grid Switch
Para adicionar um pouco de extra que não necessariamente traz conteúdo, mas claramente melhora a motion e é algo que você frequentemente vê em portfólios: uma troca de layout, movendo as obras de um slider vertical para uma grade.
// 1) Capture current state (list layout)
const state = Flip.getState(targets)
// 2) Toggle layout: CSS does the rest (grid vs list)
projectsDOM.classList.add("--grid-mode")
// 3) Animate from captured state to new layout
Flip.from(state, {
absolute: true,
duration: 1,
ease: "expo.inOut",
nested: true,
scale: true,
simple: true
})
Preloader
Além do lado criativo, o preloader é principalmente aqui para carregar mídia e ativos-chave, para que o site se sinta mais rápido e confiável.
gsap.to(progressVal, {
duration: 3,
ease: 'steps(14)',
value: 100,
})
const showreelState = Flip.getState(showreel)
showreel.classList.remove("--preloading-showreel")
Flip.from(showreelState, {
absolute: true,
duration: 1,
ease: "expo.inOut",
scale: true,
simple: true
})
gsap.fromTo(
background,
{ clipPath: "inset(2.5rem 2.5rem 2.5rem 2.5rem)" },
{
clipPath: "inset(100% 0rem 0rem 0rem)",
duration: 1,
ease: "expo.inOut"
}
)
👋 Conclusão
Em resumo, o projeto de portfolio foi um desafio técnico que exigiu a escolha certa de tecnologias para alcançar os objetivos de design e interação. A combinação de Astro, GSAP, Lenis, Three.js e Swup permitiu criar uma experiência de usuário atraente e responsiva.
Lições aprendidas
- A escolha certa de tecnologias pode fazer a diferença em um projeto de design e interação.
- A Astro é uma ferramenta poderosa para construir sites rápidos e escaláveis.
- O GSAP é uma biblioteca de animação versátil e fácil de usar que pode ser integrada a outras tecnologias.
- A Lenis é uma biblioteca de scroll suave que pode ser usada para criar uma experiência de usuário atraente.
- O Three.js é uma biblioteca de WebGL que pode ser usada para criar animações 3D complexas.
- O Swup é uma biblioteca de transições de página que pode ser usada para criar uma experiência de usuário atraente.
Desempenho do site
O site foi projetado para ser rápido e escalável, com uma carga inicial de menos de 1 segundo e uma taxa de transferência de dados de menos de 1 MB. Isso foi alcançado graças à combinação de Astro, GSAP e outras tecnologias.
// Exemplo de código para medir o desempenho do site
const performance = window.performance;
const startTime = performance.now();
// Código para medir a carga inicial do site
const loadTime = performance.now() - startTime;
// Código para medir a taxa de transferência de dados do site
const transferRate = performance.getEntriesByType('resource').reduce((acc, entry) => acc + entry.transferSize, 0);
console.log(`Carga inicial: ${loadTime}ms`);
console.log(`Taxa de transferência de dados: ${transferRate}KB`);
Em resumo, o projeto de portfolio foi um sucesso em termos de design, interação e desempenho. A combinação de tecnologias certas permitiu criar uma experiência de usuário atraente e responsiva que atende às necessidades do usuário.
Fonte de Referência: tympanus.net.
Curadoria e Adaptação: Redação Yassutaro Developers.
Redação YTI&W-News
Notícias do universo do Desenvolvimento Web, dicas e tutoriais para Webmasters.
- Desenvolva Sem Complicações com Zero-Build 2 de março de 2026
- Domine Pull Requests e Contribua para Projetos de Código 2 de março de 2026
- Minifique seu código e otimize seu site 28 de fevereiro de 2026
- Crie Transições de Página Asíncronas em JavaScript Puro 28 de fevereiro de 2026
- Desenvolva Aplicações Seguras com Entidade Forte 27 de fevereiro de 2026
