Sobre o Projeto

Visão Geral

Este projeto nasceu da paixão pelo cinema e pela tecnologia. Trata-se de um portfólio visual interativo desenvolvido para catalogar e apresentar uma seleção filmes, combinando uma estética moderna inspirada em plataformas de streaming como Netflix e HBO Max.

A aplicação foi construída com foco na experiência do usuário, oferecendo navegação fluida, animações sutis e um design responsivo que se adapta perfeitamente a qualquer dispositivo. Cada detalhe foi pensado para proporcionar uma experiência cinematográfica imersiva, desde a transição suave dos backgrounds até os efeitos hover nos cards de filmes.

O objetivo principal era criar uma vitrine elegante que não apenas exibisse informações sobre os filmes, mas que também transmitisse a atmosfera única que cada obra representa. A paleta de cores escura com acentos em vermelho foi escolhida especificamente para remeter ao ambiente de uma sala de cinema.

Principais Tecnologias Utilizadas

Next.js + TypeScript

Framework que estende o React, usado para construir o site com alta performance e código mais seguro.

Tailwind CSS

Framework de estilos utilitários para criar layouts rápidos e responsivos.

CSS Module

Método de estilização que mantém o CSS organizado e sem conflitos.

Lucide Icons + React Icons

Bibliotecas de ícones leves e modernos usados na interface.

TMDB Api

Fonte dos dados dos filmes exibidos no site (títulos, sinopses, posters, etc.).

YouTube Embed

Recurso usado para incorporar o trailer oficial dos filmes via iframe.

Node.js

Ambiente que executa o Next.js e realiza o processamento do projeto.

Visual Studio Code

Editor de código utilizado durante todo o desenvolvimento.

Arquitetura

A estrutura do projeto segue as melhores práticas de desenvolvimento React moderno, com componentes organizados de forma modular e reutilizável. A separação clara entre componentes de UI, páginas e utilitários facilita a manutenção e expansão do código. O sistema de design foi implementado utilizando variáveis CSS customizadas em conjunto com Tailwind CSS, permitindo uma experiência de theming consistente em toda a aplicação. Isso garante que mudanças visuais possam ser feitas de forma centralizada, mantendo a coerência visual do projeto.

Funcionalidades

  • Página inicial com slideshow animado de posters.
  • Galeria responsiva de filmes com efeitos hover.
  • Carregamento automático de filmes ao alcançar o final da página.
  • Página de detalhes com sinopse, gêneros, avaliação e trailer.
  • Design responsivo para todos os dispositivos.
  • Uso de animações suaves de entrada e transições visuais elegantes para tornar a navegação mais fluida e agradável.
  • Tema escuro cinematográfico com acentos em vermelho.