Skip to content

README.md

Latest commit

 

History

History
76 lines (53 loc) · 4.26 KB

README.md

File metadata and controls

76 lines (53 loc) · 4.26 KB

Git Master 🐙

Status Linguagens Licença

Git Master é uma plataforma interativa, responsiva e bilíngue (PT/EN) criada para desenvolvedores que desejam aprender, consultar e revisar os comandos essenciais do Git. Construída puramente com HTML, CSS (Glassmorphism) e Vanilla JavaScript, a ferramenta foca em ergonomia, acessibilidade e aprendizado dinâmico.

🎯 Principais Funcionalidades

📖 Modo de Estudo

  • Filtros e Busca: Encontre rapidamente o comando que você precisa utilizando a barra de busca (atalho Ctrl+K) ou navegando pelas categorias (Básicos, Branches, Remoto, Desfazer, Avançado).
  • Contexto Prático: Além da descrição do comando, cada item possui um "Cenário" real de uso (ex: "Chefe pediu pra olhar um bug urgente na main? Guarde seu código inacabado na gaveta com git stash").
  • Link Inteligente para Documentação: O botão 🤔 Não entendi abre a documentação oficial (git-scm.com) exatamente na página do comando em questão, respeitando o idioma atual da interface.
  • Cópia Rápida: Botão de copy-to-clipboard com notificação (Toast) para uso ágil no terminal.

🧠 Modo de Revisão (Quiz)

  • Teste seus conhecimentos respondendo qual comando faz determinada ação.
  • Sistema de pontuação em tempo real e feedback de erro mostrando a sintaxe correta.

⚙️ Experiência do Usuário (UX/UI)

  • Bilíngue (PT / EN): Alternância instantânea de idioma traduzindo textos, comandos, documentações e até o <title> da página, com salvamento automático de preferência no localStorage.
  • Temas (Dark / Light): Alternância suave entre os modos claro e escuro, também persistidos localmente.
  • Responsividade Total: Interface Mobile-First que quebra em colunas e ajusta botões para uso com polegar em telas pequenas (até 480px).
  • Atalhos de Teclado:
    • Ctrl + K (Focar busca)
    • M (Alternar entre Modo Estudo/Revisão)
    • T (Alternar Tema Claro/Escuro)

👾 Easter Egg

  • A plataforma conta com um Easter Egg escondido. Quer descobrir? Experimente clicar no botão de alternância de idioma (PT/EN) mais de 10 vezes freneticamente. Assuma os riscos de corromper a Matrix.

🚀 Como Rodar o Projeto

Este projeto não depende de Node.js, frameworks ou pacotes externos (npm). Ele roda inteiramente no navegador.

  1. Clone o repositório:

    git clone https://github.com/seu-usuario/git-master.git

  2. Abra o projeto: Vá até a pasta do projeto e abra o arquivo index.html em qualquer navegador web de sua preferência.

    Se usar o VS Code, você pode usar a extensão Live Server para rodar um servidor local rapidamente.

🛠️ Tecnologias Utilizadas

  • HTML5: Semântica e estrutura acessível.
  • CSS3: Variáveis CSS, flexbox, grid, media queries responsivas e animações (keyframe). O visual moderno é embasado na técnica de Glassmorphism.
  • JavaScript (Vanilla): Lógica orientada a eventos (addEventListener), manipulação dinâmica do DOM, mapeamento recursivo para o easter egg e manipulação de localStorage.

🎨 Princípios de Design Adotados

O site foi construído fugindo de "aparências genéricas de IA":

  • Título utilizando a cor sólida oficial do Git (#F1502F) para manter a hierarquia e contraste adequados.
  • Animações refinadas e limitadas aos componentes necessários, evitando fadiga visual (título interativo que requer inline-flex para a bounding box correta).
  • Copywriting conversacional que contextualiza os comandos técnicos no dia a dia do desenvolvedor.

📝 Licença

Este projeto está sob a licença MIT. Desenvolvido para propósitos educacionais e práticos.

⚠️ Nota de Bugs Conhecidos: Existem relatos de que o motor de tradução de linguagem da plataforma pode sofrer um colapso crítico (Crash Matrix) caso o idioma seja alterado de forma agressiva e consecutiva. Caso enfrente anomalias visuais ou dialetos desconhecidos, um simples F5 deve estabilizar o sistema.

(Projeto gerado e refinado com a ajuda de Inteligência Artificial)