aimeos/pagible

Sistema de Diseño del Tema Folio

Dirección

Construye un sitio web personal como los mejores blogs y portafolios de desarrolladores (leerob.com, overreacted.io, brittanychiang.com, antfu.me): una persona, una voz, y la escritura es lo primero. El sitio debe sentirse como un cuaderno bien cuidado, tranquilo y rápido, sin nada que compita con el texto. Muestra lo que la persona ha construido y aprendido con números concretos y código. No uses fotos de stock de personas, afirmaciones de marketing ni efectos decorativos.

Fundamentos

• Usa únicamente el marcado y las clases proporcionadas por ./theme/views/ y las vistas de article, blog, code, text, el diseño blog y las vistas main del tema.
• Usa las fuentes sans-serif, serif y monospace del sistema y las variables --pico-* existentes.
• Usa únicamente neutros cálidos (#2B2924, #6B665E, #E4E0D9, #FBFAF8) y verde (#1F7A4D, #4FBF87 en modo oscuro) para enlaces y el primer botón; los bloques de código siempre permanecen oscuros.
• Soporta modo claro y oscuro; nunca coloques colores fijos claros sobre fondos que puedan cambiar de tema.
• Usa esquinas de 0.5rem y bordes finos en lugar de sombras.

Estructura

• Inicio (page): un hero con el avatar como imagen, el rol como subtítulo, una introducción de una oración y dos botones, un elemento blog con el diseño list y «Escritos recientes» como título, cards de proyecto a dos columnas y un cta de contacto.
• Escritura (page): una nota breve sobre de qué escribes y una lista blog de todas las publicaciones con esta página como página principal.
• Publicaciones (blog) debajo de Escritura, de la más reciente a la más antigua en el árbol. Cada una comienza con un elemento article (título, un lead de dos oraciones y una imagen de portada), seguido de elementos text, heading nivel 2 y code.
• Páginas Acerca de, Proyectos, Usos y Ahora (page) comienzan con un heading nivel 1. Acerca de contiene una línea de tiempo vertical de trabajos, Usos enumera herramientas por categoría y Ahora dice lo que estás haciendo este mes con la fecha de la última actualización.
• Completa la configuración folio::profile en la página de inicio: nombre, cargo, empresa, ubicación, una foto cuadrada, una biografía de una oración, la dirección de correo electrónico y enlaces de perfil.

Componentes

• Lead de publicación: dos oraciones que indiquen el problema y lo que obtiene el lector. Las tarjetas de lista lo usan como introducción.
• Encabezados: encabezados nivel 2 cortos y específicos («Backfill en lotes»); nivel 3 solo debajo de ellos. Usa al menos dos para que aparezca el esquema.
• Código: un elemento code por fragmento con el lenguaje especificado, como máximo unas 15 líneas, real y ejecutable.
• Llamadas: alertas de GitHub ([!NOTE], [!TIP], [!WARNING]) en elementos de texto, como máximo una o dos por publicación.
• Proyectos: una tarjeta por proyecto con el nombre como título, el repositorio o demo como enlace, una oración de lo que hace con un número (estrellas, instalaciones, usuarios), y la pila tecnológica como píldoras de código en línea en una línea separada, por ejemplo `PHP` `Laravel`.
• Experiencia: elementos de línea de tiempo con etiquetas «2023 — ahora», títulos «Rol, Empresa», una oración de impacto con números y la pila como píldoras de código.
• Figuras: un elemento cards con el diseño figures para tres números clave como máximo.

Accesibilidad

• Conserva el enlace de salto, los encabezados semánticos, el interruptor de modo etiquetado y el contorno :focus-visible visible.
• Mantén el contraste AA de WCAG 2.2 en ambos esquemas de color, incluidos los tokens de código.
• Escribe textos alternativos significativos para las portadas y enlaces de nombre después de su destino, nunca «haga clic aquí».

Contenido

Escribe en primera persona y dirige al lector como «tú». Sé específico: nombra las versiones, los números y los errores. Abre las publicaciones con el problema, no con los antecedentes, y termina con lo que harías a continuación. Mantén los títulos sencillos y descriptivos («Migraciones sin tiempo de inactividad en una tabla de 400M de filas»). Evita palabras de moda, «simplemente», «solo» e introducciones de relleno.