🧪 Periodic Table

---

Busca e exploração de elementos químicos com interface interativa, modais de detalhes e visualização de camadas eletrônicas. Projeto feito em React e publicado no GitHub Pages.

📸 Screenshots

---

O que o projeto apresenta

• Busca rápida por elementos (nome, símbolo ou número atômico).
• Filtros por categorias/estado físico com destaque visual por cores/ícones.
• Modais com informações atômicas detalhadas (propriedades e notas).
• Visualização de camadas/cascas eletrônicas e distribuição de elétrons.
• Layout responsivo em grid da Tabela Periódica.
• Renderização condicional para estados de seleção, destaque e vazios.

Tecnologias e práticas

• React 18 e componentização: componentes reutilizáveis para células, grade e modais.
• React Router DOM: rotas client-side (páginas em src/pages/).
• React Modal: modais acessíveis com overlay e foco/ESC.
• React Icons e SVGs como componentes: ícones consistentes e estilização via CSS.
• CSS global (grid responsivo e transições suaves).
• Deploy com gh-pages e Create React App (react-scripts).

Como rodar localmente

Pré-requisitos: Node.js e npm instalados.

npm install
npm start

• Ambiente de desenvolvimento em http://localhost:3000
• Hot reload habilitado via Create React App

Build de produção

npm run build

• Gera saída otimizada em build/ (minificação e assets versionados).

Deploy (GitHub Pages)

O projeto já está configurado para deploy no GitHub Pages via gh-pages:

npm run deploy

Notas:

• O campo homepage está definido em package.json para a URL do GitHub Pages.
• O script deploy publica o conteúdo de build/ no branch adequado.

---

Made with 🤍 by Caique C.