# Miguel Angelo · Portfólio Full Stack, design e motion > Portfólio de Miguel Angelo: backend em Python e FastAPI, frontend, design de interfaces e motion. Site: https://miguelrsant.com.br/ · English version: https://miguelrsant.com.br/en.md Disponível para projetos · Franca, SP. Construo sistemas em **Python e FastAPI**, desenho as interfaces que ficam por cima deles e uso motion para dar ritmo à experiência. ## Números - **1,28s**: testes que levavam 10 min - **25s**: relatórios que levavam 3h30 - **95%**: menos trabalho manual - **30**: tecnologias no stack ## Sobre Entendo o processo de negócio **antes de escrever a primeira linha de código.** Automatizei relatórios que consumiam **3h30 de trabalho manual** e passaram a rodar em **25 segundos**. Hoje construo o ERP da Di Fiorenna com Python, FastAPI, PostgreSQL e Docker, onde reduzi o tempo dos testes de 10 min para 1,28 s com cache e acelerei o desenvolvimento configurando o setup do Claude. Antes de migrar para o desenvolvimento, atuei em Supply Chain automatizando relatórios e análises de dados com Python e Pandas. Essa bagagem encurta o caminho entre a necessidade da operação e a solução entregue. Também cuido de como tudo isso chega a quem usa: desenho interfaces e identidades visuais, construo o frontend e uso motion para dar ritmo e clareza à experiência. - **Backend:** Python / FastAPI / Django / PostgreSQL / Docker / Linux - **Frontend:** React / TypeScript / JavaScript / Next.js / Tailwind / Sass - **Design:** Figma / Photoshop / Illustrator / Identidade visual - **Motion:** GSAP / anime.js / Three.js / Microinterações - **Dados:** Pandas / Automação / Integrações via API / SQL - **DevOps:** GitHub Actions / Nginx / Docker / Git / CI/CD ## Ferramentas do dia a dia - **Backend e dados:** Python, FastAPI, Django, Node.js, PostgreSQL, MySQL, Pandas - **Frontend:** HTML5, CSS3, Sass, JavaScript, TypeScript, React, Next.js, Tailwind CSS - **Design e motion:** Figma, Photoshop, Illustrator, GSAP, Anime.js, Three.js - **DevOps e ferramentas:** Docker, GitHub Actions, NGINX, Linux, Git, GitHub, VS Code, Claude, ChatGPT ## Projetos Cada projeto junta código, interface e movimento. Mais cases entram aqui em breve. ### Sabrina Tattoo & Piercing (Tatuagem, 2026) - **Tipo:** Landing page de tatuadora e body piercer - **Stack:** Next.js, React e TypeScript, com CSS e JavaScript próprios - **Direção:** estúdio à noite: preto, off-white e azul de tinta, título condensado e assinatura à mão - **Site:** https://ssabrina-tattoo.vercel.app/ - Landing page da Sabrina, tatuadora e body piercer que atende só com hora marcada. Projeto real, de cliente. - No topo, as tatuagens surgem nos braços dela: duas fotos empilhadas e uma máscara que espalha a tinta, num ciclo de 9 segundos. - Animações feitas à mão, sem biblioteca: uma máquina que desenha a rosa traço a traço, uma fita azul que acompanha a rolagem e o nome escrito como assinatura. - Portfólio em mosaico com ampliação das fotos e o passo a passo da ideia à pele, em quatro etapas. - Agendamento sempre por mensagem: os botões abrem o WhatsApp e o Instagram dela, sem formulário. - Páginas Sobre, Contato e Privacidade, tudo parado com movimento reduzido e design system documentado. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: Next.js, React, TypeScript, CSS, Vercel. ### arqATLAS (Arquitetura, 2026) - **Tipo:** Atlas ilustrado de uma página (concept de arquitetura) - **Stack:** Next.js, React e TypeScript, com CSS Modules e WebGL sem biblioteca - **Direção:** anime dos anos 90: céu azul, noite roxa, vermelho de destaque e serifa editorial - **Site:** https://arqatlas-theta.vercel.app/ - **Código:** https://github.com/miguelrsant/architect - Atlas de uma página sobre como uma cidade sai da imaginação e vira lugar para morar, em três atos: Imagine, Projete e Habite. - Imagine: a megacidade que o cinema sonhou para 2019, com seis pontos que dizem o que já existe e o que ainda é ficção. - Projete: uma torre se desenha em linhas de luz conforme a página rola e depois ganha cor de baixo para cima, num sombreador WebGL escrito sem biblioteca. - Habite: São Paulo do pôr do sol à noite, com o Copan, o MASP e a Ponte Estaiada, e as janelas acendendo com a rolagem. - Todo número tem a fonte ao lado; os testes conferem os números, os links e a posição de cada ponto nas ilustrações. - No celular as cenas ocupam a tela inteira, com recortes verticais das ilustrações e os cartões subindo por cima. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: Next.js, React, TypeScript, CSS Modules, WebGL, Vitest, Playwright, Vercel. ### Maria Mangal Parrilla (Restaurante, 2026) - **Tipo:** Site de restaurante (marca fictícia, feita para demonstração) - **Stack:** Next.js, React e TypeScript, com CSS próprio - **Direção:** noite de parrilla: brasa, madeira escura, serifa elegante e fotos grandes - **Site:** https://maria-mangal-parrilla.vercel.app/ - **Código:** https://github.com/miguelrsant/maria-mangal-site - Site institucional de uma parrilla argentina com duas casas. A Maria Mangal é um restaurante fictício, criado para mostrar como fica um site de restaurante feito sob medida. - Abertura com fotos em tela cheia que trocam a cada 6 segundos, com recorte próprio para o celular. - Horários que destacam o dia de hoje no fuso de São Paulo e reserva que abre o WhatsApp da casa escolhida com a mensagem pronta. - Seções da casa, do salão em mosaico com ampliação, de eventos e de avaliações, com animações de entrada calmas. - Logo própria em SVG e design system com dois temas (salão e mármore); tudo que muda de um restaurante para outro fica num arquivo só. - Fotos otimizadas em WebP com prévia borrada, e dados estruturados (JSON-LD) prontos para o Google. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: Next.js, React, TypeScript, CSS, Vercel. ### arvoreSer (Psicologia, 2026) - **Tipo:** Site de clínica de psicologia - **Stack:** Next.js, React e TypeScript, com CSS próprio - **Direção:** acolhedora, em guache, com raízes e flores, bege e verde - **Site:** https://arvoreser.vercel.app/ - Site da arvoreSer Psicologia, clínica de Franca (SP) fundada por psicólogas, feito em Next.js. - Identidade visual inteira criada por mim: logo, paleta, tipografia (Fraunces e Figtree) e ilustrações em guache a partir de uma pintura de raízes e flores. - Design system documentado, com 26 tokens de cor, tipografia, espaçamento, ilustrações, movimento, acessibilidade e 14 componentes, também em PDF. - Ilustrações e enfeites desenhados em SVG como componentes React, com movimento calmo: entradas suaves ao rolar e flores que balançam devagar. - Acessibilidade WCAG 2.2 AA: contraste alto, foco visível, tudo parado com movimento reduzido e o CRP de cada psicóloga sempre à vista. - Home estática e responsiva, com equipe, como funciona, perguntas frequentes e mapa. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: Next.js, React, TypeScript, CSS, Vercel. ### Atlas (E-commerce, 2026) - **Tipo:** Loja de moda online - **Stack:** React e Vite, com design e motion próprios - **Direção:** editorial, tipografia serifada, off-white quente e preto - **Site:** https://atlasstore-dun.vercel.app/ - Desenvolvimento da loja online da Atlas, marca de moda própria de Franca (SP), com React, TypeScript e Vite. - Quatro páginas (Início, Coleção, Produto e Sobre) com URLs limpas e navegação sem recarregar a página. - Coleção com filtro por categoria, página de produto com guia de tamanhos e sacola de compras salva no navegador. - Design system próprio e documentado (cores, tipografia, espaçamento e componentes), com direção editorial em preto, branco e cinza quente. - Motion com Framer Motion: entrada da home em 1,5 s, troca de página em escada dupla de 0,5 s e cinco efeitos de rolagem, como o manifesto que se preenche palavra por palavra. - Layout responsivo do celular ao desktop, com menu de tela cheia no celular. - Vídeo de 30 s para o Instagram (“Vista o seu caminho”), animado em código com Remotion. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: React, TypeScript, Vite, Tailwind CSS, Framer Motion, Remotion, Vercel. ## Laboratório Experimentos que eu faço sem briefing de cliente, para testar 3D, narrativa, jogo e movimento. ### Casa Brisa (3D, 2026) - **Tipo:** Experiência 3D de arquitetura guiada pelo scroll - **Stack:** Three.js, TypeScript, GSAP e Vite, com shaders próprios - **Direção:** prancha de arquitetura, nanquim sobre papel e luz de fim de tarde - **Site:** https://casa-3d-woad.vercel.app/ - **Código:** https://github.com/miguelrsant/casa_3d - Site de uma página em que a planta baixa da Casa Brisa, uma casa térrea de 605 m², vira casa 3D conforme a página rola. - A câmera entra pela porta pivotante e percorre os ambientes (entrada, estar, cozinha e jantar, varanda, piscina, suíte e lounge do fogo), cada um com sua ficha técnica de área, medidas, pé-direito e acabamentos. - Cada ambiente passa de desenho a traço para render realista em blocos com contorno laranja, num shader único que decide pixel a pixel o que ainda é papel e o que já é render. - Tudo gerado por código: arquitetura, móveis, vegetação, texturas e céu, sem modelos 3D nem imagens de terceiros. No fim, a câmera sobe para a vista aérea e uma folha de papel desenrola e devolve a planta. - Desempenho cuidado: nível de qualidade escolhido pela placa de vídeo, ajuste automático abaixo de ~26 fps, vegetação com LOD e planta estática quando não há WebGL. - Voltar o scroll reproduz os mesmos quadros, e a régua de ambientes permite pular direto para qualquer parada, também no celular. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: Three.js, TypeScript, GSAP, Vite, Vitest, Playwright, Vercel. ### Dentro da Ansiedade (Narrativa 3D, 2026) - **Tipo:** História interativa em 3D sobre ansiedade, guiada pelo scroll - **Stack:** React, Three.js e Vite, com pós-processamento próprio - **Direção:** pessoas escaneadas em azul lavanda, borda rosada, pele de vidro e títulos enormes - **Site:** https://dentro-da-ansiedade.vercel.app/ - **Código:** https://github.com/miguelrsant/dentro-da-ansiedade - Site narrativo em 3D que acompanha um dia de alguém com ansiedade, do despertador até o pedido de ajuda, em 16 cenas e quatro atos (A manhã, O dia, A noite, A saída). - O React desenha só a camada de texto (títulos, conversas, notificações, respiração guiada e cartões de ajuda); o palco 3D roda fora dele, monta cada cena em segundo plano e passa por uma cortina na cor da cena entre uma e outra. - Pessoas escaneadas com poses de captura de movimento real, ajustadas com cinemática inversa para cada cadeira, cama e mesa, e gestos animados por cima das poses. - O coração do protagonista bate no ritmo de cada cena: o contador de batimentos e o brilho no peito acompanham a história. - Trilha original de piano composta em código, que emenda em si mesma sem corte, com botão de som e a escolha guardada no navegador. - Oclusão ambiente, desfoque de profundidade que acompanha a câmera, bloom e granulado, com a resolução caindo aos poucos em máquinas lentas. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: React, JavaScript, Three.js, WebGL, Vite, Vercel. ### Tinta & Montanha (Canvas, 2026) - **Tipo:** História contada em pintura animada e música, guiada pelo scroll - **Stack:** React, Canvas 2D e Web Audio, com Vite - **Direção:** pintura chinesa a tinta (shan shui) sobre papel de arroz, com âmbar e vermelho de selo - **Site:** https://tinta-e-montanha.vercel.app/ - **Código:** https://github.com/miguelrsant/tinta-e-montanha - Site de uma página que conta a história real do Kasato Maru, o navio que trouxe os primeiros imigrantes japoneses ao Brasil em 1908, no estilo da pintura chinesa a tinta. - Oito capítulos, cada um com a sua pintura animada: a partida de Kobe entre cerejeiras, os 52 dias de mar, a subida da Serra do Mar de trem, o cafezal, as araucárias, o chá do Vale do Ribeira e as lanternas da Liberdade. - Tudo gerado por código, sem nenhuma imagem nem arquivo de áudio: montanhas com aguada e rugas de rocha, árvores, navio, trem e névoa pintados em Canvas 2D, com aleatoriedade determinística por cena. - Trilha original em Web Audio: guzheng sintetizado (Karplus-Strong), flauta dizi, cordas, tambor e gongo, com um arranjo diferente em cada capítulo. - Câmera com parallax lento entre as camadas, árvores ao vento, reflexo na água e troca de pintura com uma mancha de tinta que se espalha no papel. - Três jeitos de ver: modo filme, que avança no ritmo da música, rolagem no próprio ritmo ou em silêncio, também pelo teclado. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: React, JavaScript, Canvas 2D, Web Audio, Vite, Vercel. ### O Olho da Criação (WebGL, 2026) - **Tipo:** Narrativa visual em WebGL guiada pelo scroll - **Stack:** React, WebGL2 e GSAP, com Vite - **Direção:** os afrescos de Michelangelo redesenhados em letras coloridas sobre o preto - **Site:** https://olho-da-criacao.vercel.app/ - **Código:** https://github.com/miguelrsant/olho-da-criacao - Site de uma página em que um olho feito de milhares de letras coloridas se abre no escuro. Ao rolar, a câmera entra na pupila e atravessa o Gênesis. - Os afrescos do teto da Capela Sistina viram cenas em letras: a Separação da Luz e das Trevas, a Criação de Adão, a Criação de Eva, o Pecado Original e a Expulsão do Paraíso. - O motor desenha cada cena numa grade e troca cada célula por uma letra de um atlas ordenado pela quantidade de tinta, com a cor da cena, em WebGL2. - Legendas com os versículos que se decifram na tela com o GSAP, e um menu no topo para pular entre os capítulos. - Modo filme, que avança sozinho, e controles de densidade das letras e de pausa; cada cena tem a sua descrição para leitores de tela. - Site otimizado para nota máxima: SEO para o Google, pronto para agentes de IA (Markdown, llms.txt e dados estruturados) e PageSpeed alto. - Tech Stack: React, JavaScript, WebGL2, GSAP, Vite, Vercel. ## Onde trabalhei De Supply Chain para o desenvolvimento, sempre automatizando o que tomava tempo das pessoas. ### Desenvolvedor Júnior Python Di Fiorenna Indústria Cosmética · Franca, SP · ago 2026 · atual Construo o ERP com Python, FastAPI, PostgreSQL e Docker. Testes de 10 min para 1,28 s com cache, CI/CD com GitHub Actions e Claude no fluxo de desenvolvimento. Tags: FastAPI, PostgreSQL, Docker ### Assistente de Supply Chain Palácio das Ferramentas · Franca, SP · fev · mai 2026 Relatórios automatizados com Python e Pandas: de 3h30 para 25 s, cerca de 95% menos tempo manual. Crossdocking, dropshipping e fulfillment. 2 anos e 3 meses na empresa. Tags: Python, Pandas, Dados ## Cursos e certificados Estudo contínuo: do desenvolvimento web ao Python e à base de processos da logística. ### curso.dev curso.dev · curso online Curso online de desenvolvimento web. Tags: Web, Desenvolvimento ### Python · Mundos 1, 2, 3 e 4 Curso em Vídeo · curso online Curso de Python do Curso em Vídeo, Mundos 1, 2, 3 e 4. Tags: Python ### Logística e Gestão de Supply Chain Certificado · formação A base de processos que hoje orienta como desenho sistemas para a operação. Tags: Processos ## Contato Aberto a conversar sobre backend, frontend, design e tecnologia aplicada à indústria. - E-mail: - LinkedIn: https://www.linkedin.com/in/miguelrsant/ - GitHub: https://github.com/miguelrsant - Instagram: https://www.instagram.com/miguelrsant/ ## Links - [Miguel Angelo](https://miguelrsant.com.br/) (Markdown: https://miguelrsant.com.br/index.md) - [Sobre](https://miguelrsant.com.br/sobre) (Markdown: https://miguelrsant.com.br/sobre.md) - [Contato](https://miguelrsant.com.br/contato) (Markdown: https://miguelrsant.com.br/contato.md) - [Privacidade](https://miguelrsant.com.br/privacidade) (Markdown: https://miguelrsant.com.br/privacidade.md) - [Links](https://miguelrsant.com.br/links) (Markdown: https://miguelrsant.com.br/links.md) - E-mail: - LinkedIn: https://www.linkedin.com/in/miguelrsant/ - GitHub: https://github.com/miguelrsant - Instagram: https://www.instagram.com/miguelrsant/ - YouTube: https://www.youtube.com/@miguelrsant - TikTok: https://www.tiktok.com/@miguelrsant01 - Currículo (PDF): https://miguelrsant.com.br/cv/cv-miguel-angelo.pdf - llms.txt: https://miguelrsant.com.br/llms.txt - Sitemap: https://miguelrsant.com.br/sitemap.xml