Projeto acadêmico desenvolvido como um portal webgit imersivo para apresentar a trajetória, carreira e conquistas do ator Penn Badgley e do atleta Stephen Curry de forma interativa.
#01Lobby SplitScreen: escolha interativa entre o universo do entretenimento e dos esportes.
#02Seção Hero de Penn Badgley com tipografia temática e citação marcante.
#03Visão geral do artista com métricas de carreira e navegação por abas.
#04Linha do tempo interativa destacando os principais marcos históricos e profissionais.
#05Carrossel de obras no estilo plataforma de streaming com detalhes em modal.
#06Módulo de quiz interativo para testar o conhecimento do usuário.
#07Player de mídia customizado com integração ao YouTube e playlist lateral.
#08Mural multimídia com exibição de fotos e momentos marcantes do ator.
#09Seção Hero de Stephen Curry no estilo Spotify com estatísticas da NBA.
#010Perfil detalhado do atleta com contadores de títulos, MVPs e arremessos.
#011Linha do tempo interativa rastreando da NCAA ao topo do basquete mundial.
#012Painel visual de métricas avançadas e histórico das melhores temporadas.
#013Interface de jogos históricos inspirada no visual do Spotify.
#014Quiz interativo temático sobre a trajetória de Stephen Curry.
Visão Geral do Sistema
Desenvolvido para a disciplina de Desenvolvimento Web I do curso de DSM na FATEC Itaquera, o SplitScreen une as histórias de um artista e de um atleta em uma única Single Page Application (SPA). O projeto conta com design system dark, componentes modulares, linha do tempo interativa com animações de scroll, quiz com pontuação em tempo real e um player multimídia com integração do YouTube.
Principais Funcionalidades
Perfil Hero imersivo com efeito tilt e vídeo de fundo interativo
Navegação por abas (Sobre, Carreira, Prêmios) e linha do tempo expansível
Carrosséis e modais dinâmicos no estilo plataformas de streaming
Quiz interativo com embaralhamento e cálculo de pontuação ao vivo
Player de vídeo customizado com playlist lateral dinâmica
Cursor customizado em desktop e layout 100% responsivo
Arquitetura e Destaques Técnicos
⚡ HTML5 Semântico focado em acessibilidade e marcas ARIA
⚡ CSS3 avançado com CSS Grid, Flexbox e variáveis customizadas
⚡ JavaScript Vanilla para manipulação avançada do DOM e Intersection Observer
⚡ Estrutura otimizada em Single Page Application (SPA)
