🏆 PROJETO PREMIADO: Selecionado no TOP 6 entre milhares de projetos na Imersão Dev 10 (Alura + Google).

💎 Códice Hextech | Guia de Campeões LoL

🔗 Teste o projeto ao vivo: https://joaofazio.github.io/codice_hextec/

🏆 Projeto desenvolvido para a Imersão Dev com Alura e Google.

Uma aplicação web interativa e imersiva que consome a API oficial da Riot Games (Data Dragon) para exibir dados detalhados, histórias e estatísticas de todos os campeões de League of Legends em tempo real.

---

📱 Preview do Projeto

🖥️ Navegação & Gráficos	🎨 Galeria de Skins	📱 Mobile (Responsivo)
Busca em Tempo Real e Chart.js	Fundo Dinâmico e Scroll	Carrossel Touch e Layout Adaptável

---

✨ Destaques do Projeto

O projeto aplica os conceitos fundamentais da Imersão com foco total na Experiência do Usuário (UX) e na fidelidade visual:

⚙️ Integração & Lógica

• Consumo de API em Tempo Real: O sistema consulta o Data Dragon da Riot Games, garantindo que as informações e a versão do patch estejam sempre atualizadas.
• Visualização de Dados: Uso criativo da biblioteca Chart.js para transformar os números brutos (ataque/defesa) em gráficos visuais de fácil leitura.
• Busca Dinâmica: Filtragem instantânea conforme o usuário digita, aplicando a manipulação do DOM ensinada nas aulas.
• Tratamento de Exceções: O código prevê casos onde a API não retorna dados (como campeões sem status), evitando erros na tela.

🎨 Interface & Design (Hextech)

• Identidade Visual: Estilização CSS inspirada no cliente oficial do jogo, utilizando variáveis CSS e Flexbox/Grid para organização.
• Responsividade: Layout adaptável que funciona em celulares, tablets e desktops.
• Galeria de Skins: Um modal extra para visualização das artes dos campeões com fundo dinâmico.
• Micro-interações: Detalhes como barras de rolagem personalizadas, efeitos de hover e botões de navegação para melhorar a usabilidade.

---

🛠️ Tecnologias Utilizadas

• HTML5 Semântico: Estrutura acessível e organizada.
• CSS3 Moderno: Flexbox, CSS Grid, Variáveis (:root), Animações (@keyframes) e Media Queries.
• JavaScript (ES6+): Manipulação de DOM, Async/Await, Fetch API e Event Listeners.
• Bibliotecas:
  • Chart.js (Gráficos)
  • Phosphor Icons (Ícones Vetoriais)

---

🚀 Como rodar localmente

1. Clone o projeto:

   git clone [https://github.com/joaofazio/codice_hextec.git](https://github.com/joaofazio/codice_hextec.git)

2. Entre na pasta:

   cd codice_hextec

3. Abra o arquivo index.html no seu navegador ou use o Live Server do VS Code para uma experiência completa.

---

⚖️ Aviso Legal (Disclaimer)

"Códice Hextech foi criado sob a política de 'Legal Jibber Jabber' da Riot Games usando ativos de propriedade da Riot Games. A Riot Games não endossa ou patrocina este projeto."

---

👨‍💻 Autor

Desenvolvido por João Gabriel Fazio Pauli.

---