Rafael Langoni — Full Stack Sênior & Designer

Sobre mim

Sou desenvolvedor full stack há 7 anos. Hoje cuido mais de arquitetura e de revisar código dos outros, mas ainda pego tarefa de verdade toda semana. Desenho logo e faço animação porque sempre gostei de ver as coisas se mexendo, e isso acabou virando parte do trabalho.

Sites e sistemas

Sistemas web, painéis e lojas, com backend e front.

APIs e integrações

Pagamento, nota fiscal, filas, o que o projeto precisar.

Logos e identidade

Logo, paleta e uma versão animada pra usar no site.

Animação

Motion pra web e vídeos curtos.

ReactNode.jsNext.jsPostgreSQLRedisDockerKubernetesAWSGraphQLCI/CDWebGLFigma

Terminal

rafael@portfolio ~

Motion

Quinze experimentos. Em dez dá pra mexer, os que têm (mexa aqui) no título. Use as setas pra trocar de slide.

01 · Buraco negro

Disco de acreção inclinado girando em volta do horizonte. O lado que se aproxima fica mais brilhante.

02 · Partículas (mexa aqui)

Anel de pontos presos por molas. Passe o mouse ou o dedo em cima e eles fogem.

Toque pra criar uma bola. Arraste pra arremessar.

03 · Bolinhas (mexa aqui)

Gravidade, quique e arremesso com a velocidade do seu dedo.

04 · Ondas (mexa aqui)

Mova o cursor: na vertical muda a altura das ondas, na horizontal muda a frequência.

05 · Editor de órbitas (mexa aqui)

AnéisVelocidadeCor

5412 •••• •••• 0042

RAFAEL LANGONI

06 · Cartão sob luz de estúdio

Softbox no alto, a luz passa pelo cartão e acende o chip. Depois o cartão dá uma volta completa em 3D.

07 · Galáxia espiral

1.400 estrelas em quatro braços. O centro gira mais rápido que as bordas.

JSGoRsC++PHPTS

08 · Cubo (arraste)

Cubo 3D com as linguagens que mais uso. Arraste pra girar e solte pra ele continuar.

09 · Chuva de código

Colunas de símbolos caindo. Fiz pra treinar canvas.

10 · Morph de formas

Hexágono, triângulo e quadrado trocando de forma e de cor.

Passe o dedo ou o mouse.

11 · Rastro de luz (mexa aqui)

O traço brilha, muda de cor pelo caminho e some devagar.

Puxe a corda e solte.

12 · Corda elástica (mexa aqui)

Física de corda com 22 pontos presos por restrições de distância.

RAFAEL
LANGONI

13 · Cartão inclinável (mexa aqui)

O cartão acompanha o cursor em 3D e o brilho segue o ponto onde você encosta.

JSGoRsC++PHPTSJavaPyCC#

14 · Lanterna (mexa aqui)

No escuro, só aparece o que a luz alcança. Procure as dez linguagens.

Toque ou arraste pra criar ondas.

15 · Ondulações (mexa aqui)

Cada toque solta anéis que crescem e somem, com cor diferente a cada um.

Logos animadas

Seis logos que montei pra testar movimento.

Orbit

Três anéis em velocidades diferentes em volta de um miolo que pulsa.

Prisma

Quatro pedaços vêm de fora, se encaixam num losango e depois se soltam de novo.

Monograma M

O traço do M vai sendo desenhado, ganha cor por dentro e recomeça.

Radar

Ondas saindo do centro e uma varredura girando por cima.

Monograma RL

As duas letras entram de lados opostos e o sublinhado se desenha embaixo.

Engrenagens

Duas engrenagens girando em sentidos opostos, com a proporção certa dos dentes.

Projetos

Plataforma de pagamentos

API em Go com filas e um painel em React. Hoje processa umas 4.200 transações por minuto.

GoReactRedis

Engine 2D

Motor de jogos em C++ com renderizador próprio e editor de cenas. Comecei por curiosidade e já passou de 18 mil linhas.

C++OpenGL

Design system animado

Biblioteca de 63 componentes em TypeScript, com micro-interações e temas claro e escuro.

TypeScriptFigma

Commits nos últimos 12 meses

Experiência

2024 — hoje

Full Stack Sênior

Arquitetura, code review e ainda pego feature nova toda semana. Produto com bastante usuário ativo.

2021 — 2024

Dev Pleno e Motion Designer

Metade do tempo em interface e design system, metade em logo e animação pra clientes pequenos.

2018 — 2021

Dev Júnior

Primeiros sistemas em PHP, Java e C#. Foi quando comecei a animar coisas por conta própria.