|
1 | 1 | # Git Master 🐙 |
2 | 2 |
|
3 | | - |
4 | | - |
5 | | - |
| 3 | + |
| 4 | + |
| 5 | + |
6 | 6 |
|
7 | | -**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. |
| 7 | +**Git Master** is an interactive, responsive, and bilingual (PT/EN) platform created for developers who want to learn, consult, and review essential Git commands. Built purely with HTML, CSS (Glassmorphism), and Vanilla JavaScript, the tool focuses on ergonomics, accessibility, and dynamic learning. |
8 | 8 |
|
9 | 9 | --- |
10 | 10 |
|
11 | | -## 🎯 Principais Funcionalidades |
| 11 | +## 🎯 Key Features |
12 | 12 |
|
13 | | -### 📖 Modo de Estudo |
14 | | -- **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*). |
15 | | -- **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"*). |
16 | | -- **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. |
17 | | -- **Cópia Rápida:** Botão de *copy-to-clipboard* com notificação (*Toast*) para uso ágil no terminal. |
| 13 | +### 📖 Study Mode |
| 14 | +- **Filters and Search:** Quickly find the command you need using the search bar (shortcut `Ctrl+K`) or by browsing the categories (*Basics, Branches, Remote, Undo, Advanced*). |
| 15 | +- **Practical Context:** In addition to the command description, each item features a real-world "Scenario" of use (e.g., *"Did your boss ask you to check an urgent bug in main? Put your unfinished code away in the drawer with git stash"*). |
| 16 | +- **Smart Link to Documentation:** The `🤔 Didn't understand` button opens the official documentation (`git-scm.com`) directly on the page of the command in question, matching the current language of the interface. |
| 17 | +- **Quick Copy:** A *copy-to-clipboard* button with toast notifications for quick use in the terminal. |
18 | 18 |
|
19 | | -### 🧠 Modo de Revisão (Quiz) |
20 | | -- Teste seus conhecimentos respondendo qual comando faz determinada ação. |
21 | | -- Sistema de pontuação em tempo real e feedback de erro mostrando a sintaxe correta. |
| 19 | +### 🧠 Review Mode (Quiz) |
| 20 | +- Test your knowledge by answering which command performs a specific action. |
| 21 | +- Real-time scoring system and error feedback showing the correct syntax. |
22 | 22 |
|
23 | | -### ⚙️ Experiência do Usuário (UX/UI) |
24 | | -- **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`. |
25 | | -- **Temas (Dark / Light):** Alternância suave entre os modos claro e escuro, também persistidos localmente. |
26 | | -- **Responsividade Total:** Interface *Mobile-First* que quebra em colunas e ajusta botões para uso com polegar em telas pequenas (até 480px). |
27 | | -- **Atalhos de Teclado:** |
28 | | - - `Ctrl + K` (Focar busca) |
29 | | - - `M` (Alternar entre Modo Estudo/Revisão) |
30 | | - - `T` (Alternar Tema Claro/Escuro) |
| 23 | +### ⚙️ User Experience (UX/UI) |
| 24 | +- **Bilingual (PT / EN):** Instant language switching that translates text, commands, documentation, and even the page `<title>`, with automatic preference saving in `localStorage`. |
| 25 | +- **Themes (Dark / Light):** Smooth transition between light and dark modes, also persisted locally. |
| 26 | +- **Total Responsiveness:** A *Mobile-First* interface that breaks into columns and adjusts buttons for thumb use on small screens (up to 480px). |
| 27 | +- **Keyboard Shortcuts:** |
| 28 | + - `Ctrl + K` (Focus search) |
| 29 | + - `M` (Toggle between Study/Review Mode) |
| 30 | + - `T` (Toggle Light/Dark Theme) |
31 | 31 |
|
32 | 32 | ### 👾 Easter Egg |
33 | | -- 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. |
| 33 | +- The platform features a hidden *Easter Egg*. Want to discover it? Try clicking the language toggle button (`PT/EN`) **frenetically more than 10 times**. Do so at your own risk of corrupting the Matrix. |
34 | 34 |
|
35 | 35 | --- |
36 | 36 |
|
37 | | -## 🚀 Como Rodar o Projeto |
| 37 | +## 🚀 How to Run the Project |
38 | 38 |
|
39 | | -Este projeto não depende de Node.js, frameworks ou pacotes externos (`npm`). Ele roda inteiramente no navegador. |
| 39 | +This project does not rely on Node.js, frameworks, or external packages (`npm`). It runs entirely in the browser. |
40 | 40 |
|
41 | | -1. **Clone o repositório:** |
| 41 | +1. **Clone the repository:** |
42 | 42 | ```bash |
43 | | - git clone https://github.com/seu-usuario/git-master.git |
| 43 | + git clone https://github.com/your-username/git-master.git |
44 | 44 | ``` |
45 | | -2. **Abra o projeto:** |
46 | | - Vá até a pasta do projeto e abra o arquivo `index.html` em qualquer navegador web de sua preferência. |
| 45 | +2. **Open the project:** |
| 46 | + Go to the project folder and open the `index.html` file in any web browser of your choice. |
47 | 47 |
|
48 | | - *Se usar o VS Code, você pode usar a extensão **Live Server** para rodar um servidor local rapidamente.* |
| 48 | + *If you use VS Code, you can use the **Live Server** extension to quickly run a local server.* |
49 | 49 |
|
50 | 50 | --- |
51 | 51 |
|
52 | | -## 🛠️ Tecnologias Utilizadas |
| 52 | +## 🛠️ Technologies Used |
53 | 53 |
|
54 | | -- **HTML5:** Semântica e estrutura acessível. |
55 | | -- **CSS3:** Variáveis CSS, flexbox, grid, media queries responsivas e animações (*keyframe*). O visual moderno é embasado na técnica de *Glassmorphism*. |
56 | | -- **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`. |
| 54 | +- **HTML5:** Semantic and accessible structure. |
| 55 | +- **CSS3:** CSS variables, Flexbox, Grid, responsive media queries, and keyframe animations. The modern visual style is based on the *Glassmorphism* technique. |
| 56 | +- **JavaScript (Vanilla):** Event-driven logic (`addEventListener`), dynamic DOM manipulation, recursive mapping for the Easter Egg, and `localStorage` handling. |
57 | 57 |
|
58 | 58 | --- |
59 | 59 |
|
60 | | -## 🎨 Princípios de Design Adotados |
61 | | -O site foi construído fugindo de "aparências genéricas de IA": |
62 | | -- Título utilizando a cor sólida oficial do Git (`#F1502F`) para manter a hierarquia e contraste adequados. |
63 | | -- Animações refinadas e limitadas aos componentes necessários, evitando fadiga visual (título interativo que requer `inline-flex` para a *bounding box* correta). |
64 | | -- *Copywriting* conversacional que contextualiza os comandos técnicos no dia a dia do desenvolvedor. |
| 60 | +## 🎨 Adopted Design Principles |
| 61 | + |
| 62 | +The website was built avoiding generic "AI looks": |
| 63 | +- Title using the official Git solid color (`#F1502F`) to maintain proper hierarchy and contrast. |
| 64 | +- Refined animations limited to necessary components, avoiding visual fatigue (interactive title requiring `inline-flex` for the correct bounding box). |
| 65 | +- Conversational copywriting that contextualizes technical commands in the developer's daily routine. |
65 | 66 |
|
66 | 67 | --- |
67 | 68 |
|
68 | | -## 📝 Licença |
69 | | -Este projeto está sob a licença MIT. Desenvolvido para propósitos educacionais e práticos. |
| 69 | +## 📝 License |
| 70 | + |
| 71 | +This project is licensed under the MIT License. Developed for educational and practical purposes. |
70 | 72 |
|
71 | 73 | --- |
72 | 74 |
|
73 | | -> **⚠️ Nota de Bugs Conhecidos:** |
74 | | -> 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. |
| 75 | +> **⚠️ Known Bugs Note:** |
| 76 | +> There are reports that the platform's language translation engine may suffer a critical breakdown (Matrix Crash) if the language is changed aggressively and consecutively. If you encounter visual anomalies or unknown dialects, a simple `F5` should stabilize the system. |
75 | 77 |
|
76 | | -*(Projeto gerado e refinado com a ajuda de Inteligência Artificial)* |
| 78 | +*(Project generated and refined with the help of Artificial Intelligence)* |
0 commit comments