├── .github ├── pull_request_template.md └── ISSUE_TEMPLATE │ └── new_issue.md ├── src ├── style.css └── index.html └── README.md /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # O que mudou? 2 | 3 | Descreva brevemente o objetivo deste PR e o contexto das mudanças. 4 | 5 | ## Mudanças Realizadas 6 | 7 | * {mudança_1} 8 | * {mudança_2} 9 | * {mudança_3} 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new_issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Nova Issue" 3 | about: "Use este template para criar uma nova issue" 4 | title: "[Feature] Adicionar card: [Nome do Aluno]" 5 | labels: [] 6 | assignees: [] 7 | --- 8 | 9 | ## Objetivo da Solução 10 | Adicionar um card pessoal com informações tech na página DevCards, seguindo o formato estabelecido. 11 | 12 | ## Critérios de Aceite 13 | * [ ] Criar branch `feat/add-card-nomealuno` a partir da branch `dev` 14 | * [ ] Adicionar card PESSOAL no arquivo `index.html` (não modificar cards existentes) 15 | * [ ] Manter o card modelo original intacto 16 | * [ ] Preencher todas as informações solicitadas: 17 | - Nome completo 18 | - Área tech favorita 19 | - Linguagem de programação preferida 20 | - Meta de carreira 21 | - Projeto dos sonhos 22 | - Tag (uma palavra que te descreva) 23 | * [ ] Fazer commit com mensagem semântica: `feat: adiciona card de [Nome]` 24 | * [ ] Criar Pull Request para a branch `dev` 25 | * [ ] Linkar esta issue no PR 26 | 27 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 4 | background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); 5 | color: #e6e6e6; 6 | padding: 20px; 7 | min-height: 100vh; 8 | } 9 | 10 | header { 11 | text-align: center; 12 | margin-bottom: 40px; 13 | padding: 20px; 14 | background: rgba(255, 255, 255, 0.05); 15 | border-radius: 20px; 16 | backdrop-filter: blur(10px); 17 | border: 1px solid rgba(255, 255, 255, 0.1); 18 | } 19 | 20 | h1 { 21 | margin-bottom: 10px; 22 | font-size: 42px; 23 | letter-spacing: 1px; 24 | text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); 25 | background: linear-gradient(90deg, #4cc9f0, #4361ee); 26 | -webkit-background-clip: text; 27 | background-clip: text; 28 | color: transparent; 29 | } 30 | 31 | .subtitle { 32 | font-size: 18px; 33 | opacity: 0.8; 34 | margin-bottom: 20px; 35 | } 36 | 37 | .stats { 38 | display: flex; 39 | justify-content: center; 40 | gap: 30px; 41 | margin-top: 20px; 42 | flex-wrap: wrap; 43 | } 44 | 45 | .stats span { 46 | background: rgba(255, 255, 255, 0.1); 47 | padding: 10px 20px; 48 | border-radius: 50px; 49 | font-size: 14px; 50 | display: flex; 51 | align-items: center; 52 | gap: 8px; 53 | } 54 | 55 | .stats i { 56 | color: #4cc9f0; 57 | } 58 | 59 | .container { 60 | max-width: 1400px; 61 | margin: 0 auto; 62 | display: grid; 63 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 64 | gap: 25px; 65 | padding: 10px; 66 | } 67 | 68 | .card { 69 | background: rgba(255, 255, 255, 0.08); 70 | backdrop-filter: blur(10px); 71 | border-radius: 20px; 72 | padding: 25px; 73 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 74 | transition: all 0.3s ease; 75 | border: 1px solid rgba(255, 255, 255, 0.15); 76 | position: relative; 77 | overflow: hidden; 78 | } 79 | 80 | .card::before { 81 | content: ''; 82 | position: absolute; 83 | top: 0; 84 | left: 0; 85 | right: 0; 86 | height: 4px; 87 | background: linear-gradient(90deg, #4cc9f0, #4361ee); 88 | } 89 | 90 | .card:hover { 91 | transform: translateY(-10px) scale(1.02); 92 | box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); 93 | background: rgba(255, 255, 255, 0.12); 94 | } 95 | 96 | .card.modelo { 97 | background: rgba(255, 255, 255, 0.05); 98 | border: 2px dashed rgba(255, 255, 255, 0.3); 99 | } 100 | 101 | .card.modelo::before { 102 | background: linear-gradient(90deg, #ff9a9e, #fad0c4); 103 | } 104 | 105 | .card.modelo:hover { 106 | transform: none; 107 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 108 | } 109 | 110 | .card-header { 111 | display: flex; 112 | align-items: center; 113 | gap: 15px; 114 | margin-bottom: 20px; 115 | } 116 | 117 | .card-header i { 118 | font-size: 24px; 119 | color: #4cc9f0; 120 | background: rgba(76, 201, 240, 0.1); 121 | width: 50px; 122 | height: 50px; 123 | border-radius: 50%; 124 | display: flex; 125 | align-items: center; 126 | justify-content: center; 127 | } 128 | 129 | .card.modelo .card-header i { 130 | color: #ff9a9e; 131 | background: rgba(255, 154, 158, 0.1); 132 | } 133 | 134 | .card h2 { 135 | margin: 0; 136 | font-size: 24px; 137 | font-weight: 600; 138 | } 139 | 140 | .info { 141 | font-size: 15px; 142 | margin-bottom: 12px; 143 | padding-left: 5px; 144 | border-left: 3px solid rgba(76, 201, 240, 0.5); 145 | padding: 8px 0 8px 15px; 146 | background: rgba(255, 255, 255, 0.03); 147 | border-radius: 0 8px 8px 0; 148 | } 149 | 150 | .info i { 151 | margin-right: 10px; 152 | color: #4361ee; 153 | width: 20px; 154 | text-align: center; 155 | } 156 | 157 | .tag { 158 | display: inline-block; 159 | margin-top: 15px; 160 | padding: 8px 20px; 161 | font-size: 13px; 162 | background: linear-gradient(90deg, rgba(76, 201, 240, 0.2), rgba(67, 97, 238, 0.2)); 163 | border-radius: 50px; 164 | text-transform: uppercase; 165 | letter-spacing: 1px; 166 | font-weight: 600; 167 | border: 1px solid rgba(76, 201, 240, 0.3); 168 | } 169 | 170 | .tag i { 171 | margin-right: 8px; 172 | } 173 | 174 | footer { 175 | margin-top: 60px; 176 | text-align: center; 177 | padding: 30px; 178 | background: rgba(255, 255, 255, 0.03); 179 | border-radius: 20px; 180 | border-top: 1px solid rgba(255, 255, 255, 0.1); 181 | } 182 | 183 | .footer-content { 184 | max-width: 800px; 185 | margin: 0 auto; 186 | } 187 | 188 | footer p { 189 | margin: 10px 0; 190 | opacity: 0.8; 191 | font-size: 14px; 192 | } 193 | 194 | footer i { 195 | margin-right: 10px; 196 | color: #4cc9f0; 197 | } 198 | 199 | #contributions { 200 | font-weight: bold; 201 | color: #4cc9f0; 202 | } 203 | 204 | /* Responsividade */ 205 | @media (max-width: 768px) { 206 | .container { 207 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 208 | } 209 | 210 | h1 { 211 | font-size: 32px; 212 | } 213 | 214 | .stats { 215 | gap: 15px; 216 | } 217 | 218 | .stats span { 219 | font-size: 12px; 220 | padding: 8px 15px; 221 | } 222 | } 223 | 224 | @media (max-width: 480px) { 225 | .container { 226 | grid-template-columns: 1fr; 227 | } 228 | 229 | body { 230 | padding: 10px; 231 | } 232 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DevCards - Minicurso Git/GitHub 2 | 3 | ## Slides do minicurso 4 | [Minicurso Git/GitHub](https://www.canva.com/design/DAGkSRP0LUI/ouSMNMFtEqKbuL_llIP_4w/edit?utm_content=DAGkSRP0LUI&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) 5 | 6 | ## Notion Git/Git Hub: 7 | [Notion](https://www.notion.so/Git-na-pr-tica-1c2acd2f0b358081a321ec87fc40edd1?source=copy_link) 8 | 9 | ## Objetivo do Projeto 10 | 11 | Criar uma página web colaborativa onde cada participante do minicurso adicionará seu próprio **card de perfil tech**, praticando o fluxo completo de trabalho com Git e GitHub em um cenário real de desenvolvimento colaborativo. 12 | 13 | O objetivo principal é consolidar os conhecimentos do curso através da **execução prática** de um fluxo de trabalho padrão da indústria, desde a criação de uma branch até a abertura de um Pull Request. 14 | 15 | --- 16 | 17 | ## Descrição do Projeto 18 | 19 | **DevCards da Turma** é uma aplicação web que exibe cards com informações técnicas de cada aluno. Cada card contém: 20 | 21 | - Nome completo 22 | - Área tech de interesse/preferência 23 | - Linguagem de programação favorita 24 | - Meta profissional na tecnologia 25 | - Descrição de um projeto dos sonhos 26 | - Uma tag/palavra que representa o aluno 27 | 28 | ## Layout Base 29 | 30 | O projeto já possui: 31 | - Estrutura HTML inicial 32 | - Estilos CSS modernos (gradientes, efeitos visuais, responsividade) 33 | - Card modelo para orientação 34 | - Design pronto para receber novas contribuições 35 | 36 | --- 37 | 38 | ## Fluxo de Trabalho - PASSO A PASSO 39 | 40 | ### **ETAPA 1: Configuração Inicial** 41 | 42 | 1. **Clonar o Repositório** 43 | ```bash 44 | # Clone o repositório para sua máquina local 45 | git clone https://github.com/seu-usuario/DevCards.git 46 | 47 | # Entre na pasta do projeto 48 | cd DevCards 49 | ``` 50 | 51 | ### **ETAPA 2: Escolha e Atribuição da Tarefa** 52 | 53 | 1. **Acessar as Issues** 54 | - Vá até a aba "Issues" do repositório 55 | - Localize a issue com seu nome: `Adicionar card: [SEU NOME]` 56 | 57 | 2. **Revisar os Critérios de Aceite** 58 | - Leia cuidadosamente todos os requisitos da issue 59 | - Certifique-se de entender o que precisa ser feito 60 | 61 | 3. **Atribuir a Issue a Você** (se necessário) 62 | - Na issue, clique em "Assign yourself" 63 | 64 | ### **ETAPA 3: Trabalhando na Sua Branch** 65 | 66 | 1. **Atualizar a Branch dev Local** 67 | ```bash 68 | # Certifique-se de estar na branch dev 69 | git checkout dev 70 | 71 | # Baixe as últimas alterações 72 | git pull origin dev 73 | 74 | ``` 75 | 76 | 2. **Criar Sua Branch de Trabalho** 77 | ```bash 78 | # Crie uma nova branch a partir de dev 79 | # Use o padrão: feat/add-card-seunome 80 | git checkout -b feat/add-card-seunome dev 81 | ``` 82 | 83 | 3. **Desenvolver sua Funcionalidade** 84 | - Abra o arquivo `index.html` em seu editor 85 | - Localize o comentário: `` 86 | - **IMPORTANTE:** Adicione seu card **ACIMA** deste comentário 87 | - **NÃO** modifique cards de outros alunos 88 | - **NÃO** apague o card modelo 89 | 90 | 4. **Formato do Seu Card** 91 | ```html 92 |
93 |
94 | 95 |

Seu nome

96 |
97 |
Área Favorita: Back-end
98 |
Linguagem: Java
99 |
Meta: Full-Stack Dev
100 |
Projeto dos Sonhos: Criar um aplicativo de AR que interaja com o mundo real
101 |
Disciplina 🧠
102 |
103 | ``` 104 | 105 | ### **ETAPA 4: Commit e Push** 106 | 107 | 1. **Verificar suas Alterações** 108 | ```bash 109 | # Veja quais arquivos foram modificados 110 | git status 111 | ``` 112 | 113 | 2. **Adicionar e Commitar** 114 | ```bash 115 | # Adicione o arquivo modificado 116 | git add index.html 117 | 118 | # Faça um commit com mensagem semântica 119 | git commit -m "feat: adiciona card de [Seu Nome]" 120 | ``` 121 | 122 | 3. **Enviar para o GitHub** 123 | ```bash 124 | # Faça o push da sua branch 125 | git push origin feat/add-card-seunome 126 | ``` 127 | 128 | ### **ETAPA 5: Criar Pull Request (PR)** 129 | 130 | 1. **Acessar o Repositório no GitHub** 131 | - Vá até a página do seu repositório 132 | - Deverá aparecer um botão "Compare & pull request" 133 | 134 | 2. **Criar o Pull Request** 135 | - Clique em "New Pull Request" 136 | - Selecione: 137 | - Base: `dev` (do repositório principal) 138 | - Compare: `feat/add-card-seunome` (sua branch) 139 | 140 | 3. **Preencher Informações do PR** 141 | - **Título:** `feat: adiciona card de [Seu Nome]` 142 | - **Descrição:** 143 | - Referencie a issue: `Resolves #NÚMERO_DA_ISSUE` 144 | - Descreva brevemente o que foi feito 145 | - Liste os itens implementados 146 | 147 | 4. **Revisar e Submeter** 148 | - Verifique se o diff mostra apenas seu card 149 | - Clique em "Create Pull Request" 150 | 151 | ### **ETAPA 6: Aguardar Revisão e Merge** 152 | 153 | 1. **Responder a Feedback** (se houver) 154 | - O mantenedor pode solicitar ajustes 155 | - Faça as correções na mesma branch 156 | - Faça commit e push novamente 157 | 158 | 2. **Acompanhar o Status** 159 | - Verifique se o PR foi aprovado 160 | - Confirme quando for mesclado (merged) 161 | 162 | 3. **Atualizar seu Repositório Local** 163 | ```bash 164 | # Volte para a branch dev 165 | git checkout dev 166 | 167 | # Baixe as alterações mescladas 168 | git pull origin dev 169 | ``` 170 | 171 | ## Projeto Final 172 | image 173 | 174 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DevCards - Perfis Tech da Turma 7 | 8 | 9 | 10 | 11 |
12 |

DevCards da Turma

13 |

Perfis tech dos alunos do Minicurso Git/GitHub - Turma 2025

14 |
15 | 16 |
17 |
18 |
19 | 20 |

Seu Nome Aqui

21 |
22 |
Área Favorita: [Frontend/Backend/Dados]
23 |
Linguagem: [Python/JavaScript/Java]
24 |
Meta: [Full-Stack Dev]
25 |
Projeto dos Sonhos: [descrição breve]
26 |
[sua_tag]
27 |
28 | 29 |
30 |
31 | 32 |

Mateus Miranda da Silva

33 |
34 |
Área Favorita: Frontend
35 |
Linguagem: Python, JavaScript
36 |
Meta: Desenvolvedor Frontend
37 |
Projeto dos Sonhos: Projeto próprio inovador
38 |
Desenrolado
39 |
40 | 41 |
42 |
43 | 44 |

Paulo Sérgio A. Souza

45 |
46 |
Área Favorita: Back End, Redes, Sec. Info
47 |
Linguagem: Python, C
48 |
Meta: Fundamentos de Computação
49 |
Projeto dos Sonhos: Sistemas robustos e seguros
50 |
Determinado
51 |
52 | 53 |
54 |
55 | 56 |

Luan Bento

57 |
58 |
Área Favorita: Cibersegurança
59 |
Linguagem: Python, JavaScript
60 |
Meta: Cibersegurança Dev
61 |
Projeto dos Sonhos: Analisar erros de segurança
62 |
Proativo
63 |
64 | 65 |
66 |
67 | 68 |

Arthur Alexandre

69 |
70 |
Área Favorita: Backend
71 |
Linguagem: Java + SpringBoot
72 |
Meta: Dev Backend
73 |
Projeto dos Sonhos: Contribuir para a sociedade
74 |
Determinado
75 |
76 | 77 |
78 |
79 | 80 |

Daniel Barbosa Ramos

81 |
82 |
Área Favorita: Dados
83 |
Linguagem: Python, Java, SQL
84 |
Meta: Engenheiro de dados
85 |
Projeto dos Sonhos: Soluções em prol da sociedade
86 |
Foco
87 |
88 | 89 |
90 |
91 | 92 |

Luan Santos

93 |
94 |
Área Favorita: Dados
95 |
Linguagem: Python
96 |
Meta: Desenvolvedor
97 |
Projeto dos Sonhos: Criar um jogo
98 |
Atencioso
99 |
100 | 101 |
102 |
103 | 104 |

Paulo Moura Menezes

105 |
106 |
Área Favorita: Backend
107 |
Linguagem: Java
108 |
Meta: Desenvolvedor Full-Stack
109 |
Projeto dos Sonhos: Tecnologia de impacto social
110 |
Predestinado
111 |
112 | 113 |
114 |
115 | 116 |

Arthur Henrique

117 |
118 |
Área Favorita: Back-end
119 |
Linguagem: Java
120 |
Meta: Full-Stack Dev
121 |
Projeto dos Sonhos: Aplicativo de AR
122 |
Disciplina 🧠
123 |
124 | 125 |
126 |
127 | 128 |

Valdênio Pantaleão

129 |
130 |
Área Favorita: Back-end
131 |
Linguagem: Java
132 |
Meta: Desenvolvedor Full-Stack
133 |
Projeto dos Sonhos: App Desafios Sustentáveis
134 |
Disciplinado
135 |
136 | 137 |
138 |
139 | 140 |

Denilson Rodrigues Da Silva Lima

141 |
142 |
Área Favorita: Frontend
143 |
Linguagem: Java
144 |
Meta: Desenvolvedor Full-Stack
145 |
Projeto dos Sonhos: Fazer um Jogo RPG
146 |
Prompt
147 |
148 | 149 |
150 |
151 | 152 |

Kauan Marcio Ferreira Lima

153 |
154 |
Área Favorita: Frontend, Backend
155 |
Linguagem: Python, JavaScript, Java
156 |
Meta: Desenvolvedor
157 |
Projeto dos Sonhos: Criar um jogo
158 |
Desenrolado
159 |
160 | 161 |
162 |
163 | 164 |

JonasKL3

165 |
166 |
Área Favorita: Frontend
167 |
Linguagem: C
168 |
Meta: Frontend
169 |
Projeto dos Sonhos: Jogos Web
170 |
Ideia
171 |
172 | 173 |
174 |
175 | 176 |

Pedro Henrik Pereira Da Silva

177 |
178 |
Área Favorita: Dados
179 |
Linguagem: Python, JS, Java
180 |
Meta: Rockstar Games
181 |
Projeto dos Sonhos: Desenvolver na Rockstar
182 |
Esforçado
183 |
184 | 185 |
186 |
187 | 188 |

Arthur Victor

189 |
190 |
Área Favorita: Dados
191 |
Linguagem: Python
192 |
Meta: Analista em Cibersegurança
193 |
Projeto dos Sonhos: Analisar códigos pelo mundo
194 |
Proativo
195 |
196 | 197 |
198 |
199 | 200 |

Renally dos Santos Aciole

201 |
202 |
Área Favorita: Frontend
203 |
Linguagem: JavaScript
204 |
Meta: Desenvolvedor Full-Stack
205 |
Projeto dos Sonhos: Aplicação da Raggio
206 |
Paciência
207 |
208 | 209 |
210 |
211 | 212 |

Gustavo Henrique Santos

213 |
214 |
Área Favorita: Backend
215 |
Linguagem: C++, JavaScript
216 |
Meta: Desenvolvedor Full-Stack
217 |
Projeto dos Sonhos: Estar com minha mulher
218 |
Romântico
219 |
220 | 221 |
222 |
223 | 224 |

Adjon Vinícius Gomes Alves

225 |
226 |
Área Favorita: Frontend / Backend
227 |
Linguagem: JS / Python / Java
228 |
Meta: Trabalhar na Google
229 |
Projeto dos Sonhos: Criar um app de IA
230 |
Lenda
231 |
232 | 233 |
234 |
235 | 236 |

José Arthur de Araújo Almeida

237 |
238 |
Área Favorita: Fullstack
239 |
Linguagem: Python, JS, Java
240 |
Meta: Dev Full-Stack Senior
241 |
Projeto dos Sonhos: Finalizar projeto Full-Stack
242 |
Evolução
243 |
244 | 245 |
246 |
247 | 248 |

Maria Eduarda Câmara Soares

249 |
250 |
Área Favorita: Frontend e Backend
251 |
Linguagem: Python, JS, Java
252 |
Meta: Desenvolvedor Full-Stack
253 |
Projeto dos Sonhos: Ideia
254 |
Gentil
255 |
256 | 257 |
258 |
259 | 260 |

Alex Monteiro da Silva

261 |
262 |
Área Favorita: Backend
263 |
Linguagem: Java, JavaScript
264 |
Meta: Desenvolvedor Full-Stack
265 |
Projeto dos Sonhos: Site materiais construção
266 |
Construtor
267 |
268 | 269 |
270 |
271 | 272 |

Jhonata Leonardo Da Silva

273 |
274 |
Área Favorita: Frontend, Backend
275 |
Linguagem: Python, JS, Java
276 |
Meta: Desenvolvedor Full-Stack
277 |
Projeto dos Sonhos: Plataforma moderna
278 |
Eficiente
279 |
280 | 281 |
282 |
283 | 284 |

Maria Cecília Gomes

285 |
286 |
Área Favorita: Frontend e Backend
287 |
Linguagem: Python, JS e Java
288 |
Meta: Full-Stack Dev
289 |
Projeto dos Sonhos: Ideia
290 |
Engraçada
291 |
292 | 293 |
294 |
295 | 296 |

Lucas Barbosa Graciano

297 |
298 |
Área Favorita: Back-end
299 |
Linguagem: Java
300 |
Meta: Full-Stack Dev
301 |
Projeto dos Sonhos: App leitura partituras IA
302 |
Disciplina 🎯
303 |
304 | 305 |
306 |
307 | 308 |

Lauro Gabriel Da Silva Andrade

309 |
310 |
Área Favorita: Frontend
311 |
Linguagem: Java
312 |
Meta: Terminar o curso
313 |
Projeto dos Sonhos: Fazer um jogo
314 |
Calmo
315 |
316 |
317 | 318 | 325 | 326 | 347 | 348 | 349 | --------------------------------------------------------------------------------