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.
- 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 entendiabre 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.
- 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.
- 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 nolocalStorage. - 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)
- 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.
Este projeto não depende de Node.js, frameworks ou pacotes externos (npm). Ele roda inteiramente no navegador.
-
Clone o repositório:
git clone https://github.com/seu-usuario/git-master.git
-
Abra o projeto: Vá até a pasta do projeto e abra o arquivo
index.htmlem 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.
- 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 delocalStorage.
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-flexpara a bounding box correta). - Copywriting conversacional que contextualiza os comandos técnicos no dia a dia do desenvolvedor.
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 simplesF5deve estabilizar o sistema.
(Projeto gerado e refinado com a ajuda de Inteligência Artificial)