🚧 Tools 🚀

Evolução da Plataforma

• Ferramentas: Menu e Lista de Cards

• Ferramentas: Paginação e Botão de Exibir mais

• Ferramentas: Footer

• Hospedagens: Listagem de Quantidade de Itens Exibidos e Ao Todos

• Hospedagens: Último elemento exibido e Mensagem de Fim de Lista

• Hospedagens: Barra de Busca e Resultado de Card

• Hospedagens: Modo Claro

💻 Funcionalidades

• Paginação
• Mensagem para busca com resultado vazio
• Menu Header fixo e com animação
• Botão Menu
• Footer
• Header
• Header conforme a Seção: Ferramentas e Hospedagem
• Design do Ecossistema
• Favicon do Ecossistema

🎯 QA-1 do projeto - feature/improvements

• ⚠️ Menu mobile funcional mas sem animações CSS suaves
• ⚠️ Header scroll não testado em mobile
• ⚠️ Cards poderiam ter melhor espaçamento em mobile
• ⚠️ Falta teste em dispositivos reais (só media queries)
• ⚠️ JavaScript: Considerar modularização em módulos ES6
• ⚠️ CSS: Limpar cards.css removendo estilos não utilizados
• ⚠️ Responsividade: Adicionar animações CSS para menu mobile
• ⚠️ Performance: Implementar lazy loading para imagens dos cards
• ⚠️ Testes: Validar em dispositivos reais, não só em dev tools

🚀 Plano

• 📋 Fase 1: Limpeza e Organização (Baixo Risco)

• Passo 1: Limpar cards.css - Remover estilos não utilizados

• Passo 2: Melhorar espaçamento dos cards em mobile

• 🎨 Fase 2: Melhorias de UX e Responsividade (Médio Risco)

• Passo 3: Adicionar animações CSS suaves para menu mobile

• Passo 4: Testar e ajustar header scroll em mobile

• ⚡ Fase 3: Otimizações Técnicas (Alto Risco)

• Passo 5: Modularizar JavaScript em módulos ES6

• Passo 6: Implementar lazy loading para imagens dos cards

• 🧪 Fase 4: Testes e Validação (Crítico)

• Passo 7: Testes em dispositivos reais

🎯 Resultado do QA

• JavaScript - ⭐⭐⭐⭐⭐ - 95/100 - Código limpo e eficiente
• CSS - ⭐⭐⭐⭐ - 85/100 - Sistema sólido, alguns arquivos legacy
• Responsividade - ⭐⭐⭐⭐ - 88/100 - Boa cobertura, falta polimento mobile
• Performance - ⭐⭐⭐⭐⭐ - 92/100 - Debounce, template cloning
• Acessibilidade - ⭐⭐⭐⭐ - 87/100 - Boa base, poderia ter mais ARIA

🎯 QA-2 do projeto - hotfix/deploy-image

• caminho das imagens para serem exibidas no deploy via github pages

🎯 QA-3 do projeto - bugfix/menu-mobile-responsividade

• no menu no modo mobile, os dois botões não estão sendo exibidos corretamente
• Link 'rel' attribute should include 'noopener'
• 'backdrop-filter' is not supported by Safari, Safari on iOS. Add '-webkit-backdrop-filter' to support Safari 9+, Safari on iOS 9+
• Warning - Console - Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
• Design e Ícones no footer
• Carregamento correto dos cards inicialmente
• localStorage persistente

🎯 Workflow do projeto em branches

• main - em produção
• developer - para avaliação
• feature/versao-1 - funcionalidades dessa sprint
• feature/versao-2 - funcionalidades dessa sprint
• feature/improvements - melhorias apontadas pelo QA-1 da versão 2
• hotfix/deploy-image - erro encontrado na main em produção para correções apontadas pelo QA-2 da versão 2
• bugfix/menu-mobile-responsividade - erro encontrado na developer em teste para correções apontadas pelo QA-3 da versão 2

📂 Estrutura de pastas

📁 Root (Raiz)

• index.html: O ponto de entrada da aplicação.
• main.js: O "cérebro" do projeto, onde reside a lógica de renderização e eventos.
• Readme.md: Documentação técnica do repositório.

📁 assets/ (Recursos Estáticos)

É a pasta mais densa do projeto, dividida por categorias:

• icons/: Contém todos os ícones funcionais em formato .svg (briefcase, github, globe, mail, map-pin, etc.).
• logos/: Armazena a identidade visual (ex: logo-1.jpg).
• thumb_host/: Imagens de pré-visualização para serviços de hospedagem (Firebase, Netlify, Vercel, etc.).
• thumb_tools/: A maior coleção de imagens, com os thumbnails das ferramentas (Figma, Trello, Slack, Notion, etc.).
• thumbs/: Outras imagens genéricas de suporte (ex: tool-1.jpg).
• avatar.jpg: A imagem de perfil usada na sidebar lateral.

📁 css/ (Estilização Modular)

Você optou por uma arquitetura CSS modular, o que é excelente para manutenção:

• cards.css: Estilos dos componentes de card e perfil.
• footer.css: Estilização do rodapé.
• header.css: Lógica visual do cabeçalho e menu.
• layout.css: Definições globais, variáveis (Dracula/Light) e estrutura de grid.

📁 data/ (Banco de Dados Local)

Onde os dados são consumidos pelo main.js:

• host.js: Array de objetos com as informações de hospedagem.
• tools.js: Array de objetos com a lista de ferramentas.

📁 public/ & Outros

• favicon.ico: Ícone do navegador.
• manifest.json: Configurações para PWA ou metadados da aplicação.
• .github/: Provavelmente contém fluxos de CI/CD (GitHub Actions) ou templates de issue.

💻 Próximo Passo

• imagens em thumb_tools e thumb_host são todas .jpg: converter essas thumbs para .webp
• Passo 6: Implementar lazy loading para imagens dos cards
• Passo 7: Testes em dispositivos reais

---

Versão 1

💻 Sobre o desafio

Neste desafio você poderá criar uma página web para que seja seu portfolio e currículo. Utilizando HTML e CSS.

💻 Techs

• Nível de dificuldade: Iniciante
• Tecnologias: html, css

💻 Como começar?

1 - Use o link do Figma como base para o projeto. Também disponibilizamos para download todos os assets necessários (imagens e ícones), para fazer o download basta clicar no link acima.

2 - Leia com atenção todas as instruções do desafio.

3 - Bora codar! Lembre-se que você pode usar as tecnologias que se sentir mais confortável, mas também pode se desafiar usando novas techs, fazendo modificações e/ou adicionando funcionalidades no projeto como preferir. 🚀

4 - Compartilhe seu resultado ou tire suas dúvidas na nossa comunidade aberta

💡 Conteúdos Aplicados

Neste desafio você vai construir o seu próprio portfolio. Caso você ainda não tenha feito os cursos do Discover ou queira fazer uma revisão, segue abaixo uma lista dos cursos que podem te ajudar a resolver este desafio.

💡 Guia Estelar de HTML

O conteúdo esclarece plugin de preview HTML, tags, atributos, semântica, listas, abreviações, listas, representação de código, URLs, diretórios, tabelas, THead, TBody, colgroup, cabeçalho, meta, favicon, meta SEO e meta social.

💡 Guia Estelar de CSS

O conteúdo aborda anatomia, seletores, box model, cascata, especificidade, shorthand, funções, devTools e vender prefixes.

💡 Posicionamento foguetes

Conhecer como o CSS trabalha com layout ou o posicionamento dos elementos na sua página, é essencial.

💡 App bonito, até nos textos

Não adianta a aplicação estar linda, mas usando Comic Sans como fonte e por isso, vamos aprender sobre tipografia na web com CSS.

💡 Formulários de outro planeta

A tag form no HTML é a maneira mais tradicional de interagir com o usuário da aplicação e é incrível o que é possível com esse elemento.

💡 Alinhando os planetas

Com o CSS moderno, nós podemos poscionar, alinhar, ordenar e trbalhar co os elementos de maneira flexível. Esse e outros poderes do Flexbox.

🚀 Requisitos do projeto

🚀 Requisitos para o desafio

• Os cards dos projetos deverão ser clicáveis
• Os cards dos posts deverão ser clicláveis

🚀 Se desafie também

• Tornando o design responsivo: estratégia com grid e flexbox
• Consumir a API do Github

🎨 Style Guide

🎨 Cores

• Templates de referências para ser feito

:root {
  --body-bg-color: #22212c;
  --text-color: #837e9f;
  --bg-cards: #302f3d;
  --bg-techs: #cb92b1;
}

🎨 Fontes

• font-family: Merriweather Sans
• font-weight: 400, 500 e 700
• Você pode encontrar a fonte no Google Fonts*

📅 Entrega

Após concluí-los, adicionar esses códigos ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.

📅 Tarefas

• Organizando os detalhes do projeto no readme.md
• Uma branch main e uma developer
• Favicon
• Cor do ícone
• Learn Responsive Design
• Learn CSS

📅 Telas

• Desktop

• Mobile

Feito com ❤️ por Douglas A B Novato. 👋🏽 Entre em contato!

Fonte do projeto na Rocketseat. 👋 Participe da comunidade aberta!