Merge branch 'main' of https://github.com/glaucia86/palestra-sdd

Author: glaucia86

README.md

@@ -1,19 +1,21 @@
-# Spec-Driven Development com GitHub Copilot
+# 🎤 Spec-Driven Development com GitHub Copilot
 
 <p align="center">
-  <strong>Apresentacao web interativa sobre SDD (Spec-Driven Development) com foco em contexto, previsibilidade e fluxo com AI Coding Agents.</strong>
+  <img src="./resources/images/palestra-banner.png" alt="Banner da palestra Spec-Driven Development com GitHub Copilot" />
 </p>
 
 <p align="center">
-  <a href="https://glaucia86.github.io/palestra-sdd/"><strong>Ver apresentacao online</strong></a>
-  ·
-  <a href="#-rodando-localmente">Rodar localmente</a>
-  ·
-  <a href="#-estrutura-do-projeto">Estrutura</a>
+  <strong>Apresentação web interativa sobre SDD (Spec-Driven Development) com foco em contexto, previsibilidade e fluxo com AI Coding Agents.</strong>
 </p>
 
 <p align="center">
-  <img src="./resources/images/palestra-banner.png" alt="Banner da palestra Spec-Driven Development com GitHub Copilot" />
+  <a href="https://glaucia86.github.io/palestra-sdd/"><strong>🌐 Ver apresentação online</strong></a>
+  ·
+  <a href="#-quick-start">🚀 Quick Start</a>
+  ·
+  <a href="#-estrutura-do-projeto">📁 Estrutura</a>
+  ·
+  <a href="#-autora">👩‍💻 Autora</a>
 </p>
 
 <p align="center">
@@ -22,108 +24,164 @@
   <img src="https://img.shields.io/badge/JavaScript-ESM-f59e0b?style=for-the-badge&logo=javascript&logoColor=111827" alt="JavaScript ESM" />
   <img src="https://img.shields.io/badge/GitHub%20Pages-Deploy-0b1220?style=for-the-badge&logo=github" alt="GitHub Pages" />
   <img src="https://img.shields.io/badge/License-MIT-22c55e?style=for-the-badge" alt="MIT" />
+  <img src="https://img.shields.io/github/last-commit/glaucia86/palestra-sdd?style=for-the-badge&color=0ea5e9" alt="Last Commit" />
 </p>
 
 ---
 
-## Visao Geral
+## 📖 Visão Geral
 
-Este repositorio contem a apresentacao da **Glaucia Lemos** sobre **Spec-Driven Development (SDD) com GitHub Copilot**.
+Este repositório contém a apresentação da **Glaucia Lemos** sobre **Spec-Driven Development (SDD) com GitHub Copilot**.
 
-A experiencia foi desenvolvida como slides web com Reveal.js, sem build step, com:
+A experiência foi desenvolvida como slides web com Reveal.js, sem build step, com:
 
-- carregamento dinamico de secoes (`slides/manifest.json` + `slides/parts/*.html`);
-- design system proprio em `css/custom.css`;
-- app JS modular em `js/app/*`;
-- recursos interativos como quiz, Mermaid, starfield, particles e backgrounds especiais.
+- 🔄 **Carregamento dinâmico** de seções (`slides/manifest.json` + `slides/parts/*.html`);
+- 🎨 **Design system** próprio em `css/custom.css`;
+- 🧩 **App JS modular** em `js/app/*`;
+- ✨ **Recursos interativos** como quiz, Mermaid, starfield, particles e backgrounds especiais.
 
 ---
 
-## Sumario
+## ✨ Features
 
-- [Objetivos da palestra](#-objetivos-da-palestra)
-- [Stack tecnica](#-stack-tecnica)
-- [Arquitetura da aplicacao](#-arquitetura-da-aplicacao)
-- [Rodando localmente](#-rodando-localmente)
-- [Estrutura do projeto](#-estrutura-do-projeto)
-- [Deploy](#-deploy)
-- [Navegacao durante a apresentacao](#-navegacao-durante-a-apresentacao)
-- [Autora](#-autora)
-- [Licenca](#-licenca)
+<table>
+<tr>
+<td width="50%">
 
----
-
-## Objetivos da palestra
+### 📊 Slides Interativos
+- **Reveal.js 5.1** — Framework moderno de apresentações
+- **Navegação Intuitiva** — Suporte a slides verticais e horizontais
+- **Speaker Notes** — Notas para o palestrante
 
-A apresentacao cobre de forma pratica:
+</td>
+<td width="50%">
 
-- fundamentos de **Spec-Driven Development**;
-- uso de **spec-kit** no fluxo de desenvolvimento;
-- GitHub Copilot Agent Mode e qualidade de contexto;
-- arquitetura de contexto com `PRD.md`, `AGENTS.md`, Rules e Skills;
-- estrategia de **Progressive Disclosure** para reduzir ruido;
-- demo com elementos visuais e interativos;
-- quiz final com consolidacao dos conceitos.
+### 🎨 Recursos Visuais
+- **Diagramas Mermaid** — Diagramas técnicos interativos
+- **Ícones Lucide** — Biblioteca de ícones moderna
+- **Animações** — Starfield, particles e backgrounds especiais
 
----
+</td>
+</tr>
+<tr>
+<td width="50%">
 
-## Stack tecnica
+### 🧪 Elementos Interativos
+- **Quiz Interativo** — Consolidação de conceitos
+- **Carregamento Dinâmico** — Slides carregados sob demanda
+- **Design System** — Estilos customizados e consistentes
 
-- **Slides:** Reveal.js 5.1 (CDN)
-- **Diagramas:** Mermaid 11 (CDN)
-- **Icones:** Lucide (CDN)
-- **Estilos:** `css/custom.css`
-- **Aplicacao JS:** ESM modular em `js/app/*`
-- **Servidor local:** `live-server` via `server/dev-server.js`
-- **Publicacao:** GitHub Pages via GitHub Actions
+</td>
+<td width="50%">
 
----
+### 🚀 Experiência do Desenvolvedor
+- **Zero Build** — Sem etapa de compilação
+- **ESM Modular** — Código JavaScript moderno
+- **Hot Reload** — Atualização automática durante desenvolvimento
 
-## Arquitetura da aplicacao
+</td>
+</tr>
+</table>
 
-A pagina principal (`index.html`) inicia uma estrutura simples:
+---
 
-1. carrega estilos e bibliotecas CDN (Reveal, Mermaid, Lucide);
-2. inicializa o app em `js/app/init.js`;
-3. carrega os arquivos definidos em `slides/manifest.json`;
-4. injeta os blocos de `slides/parts/*.html` dentro de `.reveal .slides`;
-5. executa bootstrap de recursos visuais, quiz e hooks de evento do Reveal.
+## 📚 Conteúdo da Palestra
 
-Esse desenho permite evoluir conteudo e features sem acoplamento forte entre slides e runtime.
+| Tópico | Descrição |
+|--------|-----------|
+| 🎯 **Fundamentos SDD** | Conceitos básicos de Spec-Driven Development |
+| 🛠️ **spec-kit** | Como usar spec-kit no fluxo de desenvolvimento |
+| 🤖 **GitHub Copilot** | Agent Mode e otimização de contexto |
+| 📐 **Arquitetura** | PRD.md, AGENTS.md, Rules e Skills |
+| 🔄 **Progressive Disclosure** | Estratégias para reduzir ruído de contexto |
+| 🎬 **Demo Prática** | Elementos visuais e interativos ao vivo |
+| 🏆 **Quiz Final** | Consolidação dos conceitos apresentados |
 
 ---
 
-## Rodando localmente
+## 🚀 Quick Start
 
-### Pre-requisitos
+### Pré-requisitos
 
-- Node.js 18+
-- npm
+> [!IMPORTANT]
+> - **Node.js** — Versão 18.0.0 ou superior
+> - **npm** — Gerenciador de pacotes
 
-### Instalacao
+### Instalação
 
 ```bash
-npm install
-```
+# Clone o repositório
+git clone https://github.com/glaucia86/palestra-sdd.git
+cd palestra-sdd
 
-### Execucao
+# Instale as dependências
+npm install
 
-```bash
+# Inicie o servidor de desenvolvimento
 npm run start
 ```
 
-A aplicacao sobe na porta `3000` e abre `index.html` automaticamente.
+### Acesso
 
-- URL local: `http://127.0.0.1:3000/index.html`
-- sem abrir navegador automaticamente:
+A aplicação será aberta automaticamente em `http://127.0.0.1:3000/index.html`
 
-```bash
-npm run start -- --no-browser
-```
+> [!TIP]
+> Use `npm run start -- --no-browser` para iniciar sem abrir o navegador automaticamente.
+
+---
+
+## 🏗️ Tech Stack
+
+<table>
+<tr>
+<td align="center" width="120">
+<a href="https://revealjs.com/">
+<img src="https://revealjs.com/images/logo/reveal-symbol.svg" width="48" height="48" alt="Reveal.js"/>
+</a>
+<br><strong>Reveal.js</strong>
+<br><sub>Slides Framework</sub>
+</td>
+<td align="center" width="120">
+<a href="https://mermaid.js.org/">
+<img src="https://mermaid.js.org/assets/logo.svg" width="48" height="48" alt="Mermaid"/>
+</a>
+<br><strong>Mermaid</strong>
+<br><sub>Diagramas</sub>
+</td>
+<td align="center" width="120">
+<a href="https://lucide.dev/">
+<img src="https://lucide.dev/logo.svg" width="48" height="48" alt="Lucide"/>
+</a>
+<br><strong>Lucide</strong>
+<br><sub>Ícones</sub>
+</td>
+<td align="center" width="120">
+<a href="https://www.javascript.com/">
+<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" width="48" height="48" alt="JavaScript"/>
+</a>
+<br><strong>JavaScript</strong>
+<br><sub>ESM Modules</sub>
+</td>
+</tr>
+</table>
 
 ---
 
-## Estrutura do projeto
+## 🏛️ Arquitetura da Aplicação
+
+A página principal (`index.html`) inicia uma estrutura simples:
+
+1. carrega estilos e bibliotecas CDN (Reveal, Mermaid, Lucide);
+2. inicializa o app em `js/app/init.js`;
+3. carrega os arquivos definidos em `slides/manifest.json`;
+4. injeta os blocos de `slides/parts/*.html` dentro de `.reveal .slides`;
+5. executa bootstrap de recursos visuais, quiz e hooks de evento do Reveal.
+
+Esse desenho permite evoluir conteúdo e features sem acoplamento forte entre slides e runtime.
+
+---
+
+## 📁 Estrutura do Projeto
 
 ```text
 palestra-sdd/
@@ -156,38 +214,86 @@ palestra-sdd/
 
 ---
 
-## Deploy
+## 🎮 Navegação Durante a Apresentação
+
+| Tecla | Ação |
+|-------|------|
+| `→` / `Espaço` | Próximo slide |
+| `←` | Slide anterior |
+| `↑` / `↓` | Navegar sub-slides |
+| `Esc` | Visão geral |
+| `F` | Tela cheia |
+| `S` | Speaker notes |
+
+---
 
-O deploy para GitHub Pages e automatico via workflow:
+## 📸 Screenshots
 
-- arquivo: `.github/workflows/deploy-pages.yml`
-- gatilho: push para branch `main`
-- URL publicada: `https://glaucia86.github.io/palestra-sdd/`
+> [!NOTE]
+> **Demo ao vivo:** [https://glaucia86.github.io/palestra-sdd/](https://glaucia86.github.io/palestra-sdd/)
 
 ---
 
-## Navegacao durante a apresentacao
+## 🚢 Deploy
+
+O deploy para GitHub Pages é automático via workflow:
 
-- `->` / `Espaco`: proximo slide
-- `<-`: slide anterior
-- `setas vertical`: navegar sub-slides
-- `Esc`: visao geral
-- `F`: tela cheia
-- `S`: speaker notes
+- **Arquivo:** `.github/workflows/deploy-pages.yml`
+- **Gatilho:** push para branch `main`
+- **URL publicada:** [https://glaucia86.github.io/palestra-sdd/](https://glaucia86.github.io/palestra-sdd/)
 
 ---
 
-## Autora
+## 👩‍💻 Autora
+
+<div align="center">
+  <a href="https://github.com/glaucia86">
+    <img src="https://github.com/glaucia86.png" width="100px;" alt="Glaucia Lemos" style="border-radius: 50%;"/>
+  </a>
+  <br />
+  <strong>Glaucia Lemos</strong>
+  <br />
+  <sub>A.I Developer at Zup Innovation/Itaú</sub>
+  <br /><br />
+  <a href="https://mvp.microsoft.com/pt-BR/MVP/profile/d3200941-395d-423b-a0ec-eb0577d3bb86">
+    <img src="https://img.shields.io/badge/Microsoft%20MVP-Web%20Technologies-blue?logo=microsoft&logoColor=white" alt="Microsoft MVP"/>
+  </a>
+  <br /><br />
+  <a href="https://x.com/glaucia_lemos86">🐦 Twitter</a> •
+  <a href="https://www.linkedin.com/in/glaucialemos/">💼 LinkedIn</a> •
+  <a href="https://github.com/glaucia86">🐙 GitHub</a> •
+  <a href="https://www.youtube.com/@GlauciaLemos">📺 YouTube</a>
+</div>
+
+---
 
-**Glaucia Lemos**
+## ⭐ Apoie Este Projeto
 
-- GitHub: https://github.com/glaucia86
-- X/Twitter: https://x.com/glaucia_lemos86
-- LinkedIn: https://www.linkedin.com/in/glaucialemos/
-- YouTube: https://www.youtube.com/@GlauciaLemos
+Se você achou esta apresentação útil:
+
+<table>
+<tr>
+<td>⭐ <strong>Star</strong> este repositório</td>
+<td>🐛 <strong>Reporte</strong> problemas encontrados</td>
+</tr>
+<tr>
+<td>💡 <strong>Sugira</strong> melhorias</td>
+<td>🔀 <strong>Contribua</strong> via pull requests</td>
+</tr>
+</table>
 
 ---
 
-## Licenca
+## 📄 Licença
+
+Este projeto está sob a licença **MIT**. Veja `LICENSE` para detalhes.
 
-Este projeto esta sob a licenca **MIT**. Veja `LICENSE` para detalhes.
+---
+
+<p align="center">
+  Feito com 💚 usando Reveal.js e GitHub Copilot
+</p>
+
+<p align="center">
+  <a href="#-spec-driven-development-com-github-copilot">⬆️ Voltar ao Topo</a>
+</p>