💝 Galeria Interativa: Márcio & Larissa (Especial Dia dos Namorados)

Uma experiência web imersiva e responsiva, desenvolvida exclusivamente como uma homenagem digital para celebrar o Dia dos Namorados.

🎯 Sobre o Projeto

Este projeto foi encomendado com o propósito de modernizar a tradicional entrega de álbuns de fotos, transformando memórias em uma aplicação web interativa. O foco do desenvolvimento foi aliar um alto apelo visual a uma engenharia de front-end performática, garantindo uma experiência de usuário (UX) fluida, emocionante e memorável ao casal.

A arquitetura do projeto foi pensada para ser leve, dispensando frameworks pesados, e focando na extração do máximo de performance dos navegadores modernos.

🚀 Arquitetura e Tecnologias

O projeto foi inteiramente construído utilizando tecnologias nativas (Vanilla), destacando os seguintes conceitos técnicos:

• HTML5 & CSS3: Utilização de Design Tokens (variáveis nativas) para controle de temas, animações complexas via @keyframes e funções matemáticas CSS (clamp, min, max) para tipografia e layout responsivos.
• CSS Scroll Snap API: Paginação nativa do carrossel de fotos, eliminando a necessidade de bibliotecas de terceiros (como Swiper ou Slick), o que reduz drasticamente o tempo de carregamento e melhora o desempenho em dispositivos móveis.
• JavaScript & Canvas API: Implementação de uma engine customizada de física 2D para gerenciar o ciclo de vida, as trajetórias pseudo-gravitacionais e o garbage collection das partículas animadas (corações e fogos de artifício).
• SEO & Meta Tags (Open Graph): Configuração otimizada para compartilhamento em redes sociais (WhatsApp, Instagram, LinkedIn), garantindo a renderização perfeita de thumbnails e descrições via OG Tags e Twitter Cards.

✨ Funcionalidades em Destaque

• Splash Screen Coreografada: Orquestração de tempo (setTimeout/setInterval) para sincronizar a explosão de partículas com o fade-out do elemento central e a revelação da galeria.
• Interatividade Baseada em Eventos: O fundo da aplicação reage a interações do usuário (cliques fora do carrossel disparam novas explosões de partículas na coordenada exata do ponteiro).
• Estratégia de Fallback de Assets: Rotina em JavaScript que monitora falhas de carregamento de imagem (onerror) e injeta um placeholder seguro automaticamente, garantindo que a UI nunca "quebre".

👨‍💻 Desenvolvido por

Marcos Vinicius Souza Silva
Software Engineer | Full-Stack Web Developer
Visitar Perfil no GitHub