aimeos/pagible

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 compita 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 imagens 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 sans-serif, serifa e monoespaçadas do sistema e as variáveis --pico-* existentes.
• Use apenas neutros quentes (#2B2924, #6B665E, #E4E0D9, #FBFAF8) e verde (#1F7A4D, #4FBF87 no modo escuro) para links e o primeiro botão; blocos de código permanecem sempre escuros.
• Suporte os modos claro e escuro; nunca coloque cores fixas claras em fundos temáticos.
• Use cantos de 0.5rem e bordas finas em vez de sombras.

Estrutura

• Início (page): um hero com o avatar como imagem, o cargo como subtítulo, uma introdução de uma frase e dois botões, um elemento blog com o layout list e "Escritos recentes" como título, cards de projetos em duas colunas e um cta para contato.
• Escrita (page): uma breve nota sobre o que você escreve e uma lista blog de todas as postagens com esta página como página pai.
• Postagens (blog) abaixo de Escrita, da mais nova para a mais antiga na árvore. Cada uma começa com um elemento article (título, uma introdução de duas frases e uma imagem de capa), seguido por elementos text, heading nível 2 e code.
• Páginas Sobre, Projetos, Usa e Agora (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 este mês com a data da última atualização.
• Preencha a configuração folio::profile na página inicial: nome, cargo, empresa, localização, uma foto quadrada, uma biografia de uma frase, o endereço de e-mail e links de perfil.

Componentes

• Introdução da postagem: duas frases que declaram o problema e o que o leitor obtém. Os cards da lista a usam como introdução.
• Títulos: títulos de nível 2 curtos e específicos ("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 trecho com o idioma definido, no máximo cerca de 15 linhas, real e executável.
• Chamadas: alertas do GitHub ([!NOTE], [!TIP], [!WARNING]) em elementos de texto, no máximo um ou dois por postagem.
• Projetos: um card por projeto com o nome como título, o repositório ou demonstração como link, uma frase sobre o que 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 alternador de modo rotulado e o contorno :focus-visible visível.
• Mantenha o 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 as postagens 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 com zero downtime em uma tabela de 400M de linhas"). Evite palavras da moda, "simplesmente", "apenas" e introduções de enchimento.