aimeos/pagible-themes-folio

Sistema de Design do Tema Folio

Direção

Construa um site pessoal como os melhores blogs e portfólios de desenvolvedores (leerob.com, overreacted.io, brittanychiang.com, antfu.me): uma pessoa, uma voz e a escrita em primeiro lugar. O site deve parecer um caderno bem cuidado, silencioso e rápido, sem nada que concorra com o texto. Mostre o que a pessoa construiu e aprendeu com números concretos e código. Não use fotos de banco de pessoas, alegações de marketing ou efeitos decorativos.

Fundamentos

• Use apenas a marcação e as classes fornecidas por ./theme/views/ e pelas views article, blog, code, text, blog layout e main do tema.
• Use as fontes system sans-serif, serif e monospace do sistema e as variáveis --pico-* existentes.
• Use neutros quentes (#2B2924, #6B665E, #E4E0D9, #FBFAF8) e verde (#1F7A4D, #4FBF87 no modo escuro) apenas para links e o primeiro botão; blocos de código sempre permanecem escuros.
• Suporte modo claro e escuro; nunca coloque cores fixas claras em fundos tematizáveis.
• Use cantos de 0.5rem e bordas finas em vez de sombras.

Estrutura

• Home (page): um hero com o avatar como imagem, o cargo como subtítulo, uma frase de introdução e dois botões, um elemento blog com o layout list e "Escritos recentes" como título, cards de projeto em duas colunas e um cta para contato.
• Escritos (page): uma breve nota sobre o que você escreve e uma lista blog de todos os posts com esta página como página pai.
• Posts (blog) abaixo de Escritos, do mais novo para o mais antigo na árvore. Cada um começa com um elemento article (título, uma lead de duas frases e uma imagem de capa), seguido por elementos text, heading nível 2 e code.
• Sobre, Projetos, Usa e Agora páginas (page) começam com um heading nível 1. Sobre contém uma linha do tempo vertical de empregos, Usa lista ferramentas por categoria e Agora diz o que você está fazendo neste mês com a data da última atualização.
• Preencha a configuração folio::profile na página home: nome, cargo, empresa, localização, uma foto quadrada, uma biografia de uma frase, o endereço de e-mail e links de perfil.

Componentes

• Lead do post: duas frases que enunciam o problema e o que o leitor obtém. Os cards da lista a usam como introdução.
• Títulos: curtos e específicos, títulos nível 2 ("Backfill em lotes"); nível 3 apenas abaixo deles. Use pelo menos dois para que o esboço apareça.
• Código: um elemento code por snippet com a linguagem definida, no máximo cerca de 15 linhas, real e executável.
• Callouts: alertas do GitHub ([!NOTE], [!TIP], [!WARNING]) em elementos de texto, no máximo um ou dois por post.
• Projetos: um card por projeto com o nome como título, o repositório ou demo como link, uma frase sobre o que ele faz com um número (estrelas, instalações, usuários) e a stack como pills de código inline em uma linha separada, por exemplo `PHP` `Laravel`.
• Experiência: itens da linha do tempo com rótulos "2023 — agora", títulos "Cargo, Empresa", uma frase de impacto com números e a stack como pills de código.
• Figuras: um elemento cards com o layout figures para no máximo três números chave.

Acessibilidade

• Preserve o link de pular, títulos semânticos, o interruptor de modo rotulado e o contorno :focus-visible visível.
• Mantenha contraste WCAG 2.2 AA em ambos os esquemas de cores, incluindo tokens de código.
• Escreva textos alternativos significativos para capas e links de nome após seu destino, nunca "clique aqui".

Conteúdo

Escreva na primeira pessoa e dirija-se ao leitor como "você". Seja específico: nomeie as versões, números e erros. Abra posts com o problema, não com o contexto, e termine com o que você faria a seguir. Mantenha os títulos simples e descritivos ("Migrações sem downtime em uma tabela de 400 milhões de linhas"). Evite palavras da moda, "simplesmente", "apenas" e introduções de preenchimento.