Voltar aos projetos

Case de projeto

Nosso Álbum — Nossa História de Amor

Álbum digital interativo criado para transformar memórias de um casal em uma experiência visual inspirada em um álbum de figurinhas. O projeto combina navegação por páginas, animação de virada, trilha sonora e conteúdo personalizado, com front-end em HTML, CSS e JavaScript e apoio de uma API em FastAPI.

HTMLCSSJavaScriptPythonFastAPISt.PageFlip

Minha atuação

Concepção da experiência, desenvolvimento front-end, estruturação das páginas, integração da animação de page flip e implementação do backend em Python com FastAPI.

Tela principal do projeto Nosso Álbum — Nossa História de Amor

Demonstração visual

Galeria interativa

Abra a pasta para explorar as telas e demonstrações do case. As mídias podem ser arrastadas e organizadas de forma interativa.

Demonstração animada da navegação e da virada de páginas do álbum digital
Páginas internas do álbum com aventuras, viagens e momentos do casal
Páginas internas do álbum com cartões de memórias e momentos inesquecíveis
Arraste uma mídia para baixo para fechar

O problema

O que precisava ser resolvido

Transformar uma coleção de lembranças em algo mais envolvente do que uma galeria estática exigia criar uma experiência com narrativa, personalidade e interação, sem perder a sensação afetiva de folhear um álbum físico.

A solução

Como transformei a ideia em produto

Desenvolvi um álbum digital com páginas temáticas, navegação por setas e animação de virada de página. As memórias foram organizadas em uma experiência visual contínua, com imagens, textos personalizados e áudio, enquanto uma API em FastAPI dá suporte à estrutura do projeto.

Funcionalidades

O que o projeto entrega

Virada de páginas com efeito de álbum físico
Páginas temáticas com fotos e memórias personalizadas
Controles de navegação e áudio
Experiência responsiva em formato de álbum digital
Backend com FastAPI para suporte à aplicação

Decisões técnicas

Tecnologia com uma razão por trás

01

St.PageFlip para a navegação

A biblioteca foi utilizada para reproduzir o movimento de uma página física e reforçar a proposta de álbum interativo.

02

HTML, CSS e JavaScript no front-end

A combinação permite controle direto sobre layout, animações e comportamento visual sem adicionar complexidade desnecessária ao projeto.

03

FastAPI no backend

O backend em Python foi adotado para organizar a camada de API de forma leve, rápida e documentável.

Desafios

Pontos que exigiram mais atenção

  • Manter o efeito de virada natural em diferentes tamanhos de tela
  • Organizar conteúdo visual sem comprometer legibilidade e equilíbrio das páginas
  • Sincronizar navegação, animação e elementos de áudio em uma experiência fluida

Resultado & aprendizado

O que esse projeto demonstra

O projeto demonstra como desenvolvimento web e narrativa visual podem ser combinados para transformar conteúdo pessoal em uma experiência digital interativa, reforçando domínio de front-end, animações, responsividade e integração com backend.