Alterar UI (master upgrade)

[micalevisk]

tornar mais parecido com a visualização de repositórios do GitHub:

[micalevisk]

alternativas

com bio like https://anabastos.me/

listar os repos usando grid layout

estilizados com características parecidas como em https://probot.github.io/

https://producttribe.com

https://yelp.github.io

[micalevisk]

requisitos

• botão toggle de tema (escuro ou claro) tipo o https://cli.fan
• deve ser responsivo, i.e., usar media queries para se adequadar a diferentes dispositivos
• tornar acessível/visível o gráfico de uso das linguagens (geral)
• usar a lib pattern.css para não deiaxr o background em branco
• a página deve ter um download rápido, tipo: https://sunnysingh.io (src)
  • Performance Budgets (Implementing Performance Budgets)
  • WebPageTest - Website Performance and Optimization Test
  • page speed
• cada repositório deve está em seu próprio "card" com as seguintes infos sempre visíveis:
  • nome do repo
  • indicador de tipo de repo (source ou fork)
  • indicador de visibilidade do repo (privado ou público)
  • linguagens usadas no repo
• se o usuário for apenas um colaborador de um repo listado, indicar o dono do repo; no nome do repo, como no GitHub
• para deixar o carregamento dos cards mais atraente, a animação de loading deve ser como o estilo (CSS only) do Facebook:
  • demo - Loading Animation Facebook Style
  • How the Facebook content placeholder works
  • SVG component to create placeholder loading like Facebook cards loading
• tornar acessível/visível um "campo de texto" para filtrar repos por linguagens; ou deixar uma search bar estilo fuzzy escondido que será ativado por uma tecla
• indicador de quantidade de repos listados; ou enumerá-los
• cada "card" deve ocupar somente o espaço indicado pelo seu conteúdo
• em algum momento, deve ser possível visualizar a descrição de um (ou mais) repos
• se o repo não for privado, o seu título (contido no "card") deve ser clicável e levá-lo para a homepage definida (no repo) ou, em caso de ausência, para a página do repo no GitHub
• ter um arquivo robots.txt para o SEO (vide The robots.txt file explained and illustrated)
• as regras de hyperlink usadas na v1 devem ser utilizadas:
  

  micalevisk.github.io/src/App.vue

  Lines 47 to 53 in 1a18b2f

  	const RULES = {
  	IGNORE: ({ description }) => description && description.includes(':guardsman:'),
  	SHOW_URL: ({ isPrivate, isFork, url, homepageUrl, description}) => {
  	if (!isPrivate || (description && description.includes(':unlock:')))
  	return isFork ? url : (homepageUrl || url);
  	},
  	}