Projeto com erro após o deploy

Olá, Turi! Como vai?

Pelo que você descreveu, parece que o problema está relacionado com o caminho dos arquivos de imagem em seu projeto quando ele é publicado no GitHub Pages. Quando você está trabalhando em seu ambiente local, o caminho do arquivo pode funcionar perfeitamente, mas quando o projeto é publicado no GitHub, o caminho pode precisar ser ajustado.

Uma coisa que você pode tentar é usar caminhos relativos para suas imagens em vez de caminhos absolutos. Por exemplo, se você tiver uma pasta de imagens no mesmo nível que seu arquivo HTML, você poderia se referir a uma imagem como ./images/sua-imagem.jpg em vez de /images/sua-imagem.jpg.

Outra possibilidade é que o GitHub Pages seja sensível a maiúsculas e minúsculas. Certifique-se de que o nome do arquivo e a extensão da sua imagem correspondem exatamente ao que você tem em seu código. Por exemplo, se o arquivo de imagem é sua-imagem.JPG, mas no seu código você escreveu sua-imagem.jpg, isso pode causar um problema.

Por último, você pode tentar usar o inspetor de elementos do seu navegador para ver se há algum erro sendo exibido na console quando você tenta carregar a imagem. Isso pode lhe dar uma pista sobre o que pode estar errado.

Espero ter ajudado e bons estudos!

Fiz as alterações sugeridas, a imagem inicial voltou a funcionar, mas as que estão dentro do switch não funcionaram. Segue o código completo para conferência:

function alterarContexto (contexto) {
    mostrarTempo();
    botoes.forEach(function (target) {
        target.classList.remove("active");
    })

    html.setAttribute("data-contexto", contexto);
    banner.setAttribute("src", `./imagens/${contexto}.png`);
    
    switch (contexto) {
        case "foco":
            titulo.innerHTML = `
            Otimize sua produtividade,<br>
                <strong class="app__title-strong">mergulhe no que importa.</strong>`

            break;

        case "descanso-curto":
                titulo.innerHTML = `
                Que tal dar uma respirada?<br>
                <strong class="app__title-strong">Faça uma pausa curta!</strong>
                `
            break;

        case "descanso-longo": 
            titulo.innerHTML = `
            Hora de voltar à superfície.<br>
            <strong class="app__title-strong">Faça uma pausa longa.</strong>
            `

        default:

            break;
    }
}

Também conferi a questão das maiúsculas e minúsculas e está ok.

Já está funcionando, acho que demorou para atualizar o deploy. Agradeço!