aimeos/pagible-themes-folio

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 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 construyó y aprendió con números y código concretos. 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 los temas article, blog, code, text, la maquetación blog y la vista main.
• Usa las fuentes del sistema sans-serif, serif y monospace, y las variables --pico-* existentes.
• Usa neutros cálidos (#2B2924, #6B665E, #E4E0D9, #FBFAF8) y verde (#1F7A4D, #4FBF87 en modo oscuro) solo 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 tematizables.
• 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 frase y dos botones, un elemento blog con la maquetación list y "Escritos recientes" como título, cards de proyecto en dos columnas y un cta para contacto.
• Escritos (page): una nota breve sobre de qué escribes y una lista blog de todos los posts con esta página como página padre.
• Posts (blog) debajo de Escritos, los más nuevos primero en el árbol. Cada uno comienza con un elemento article (título, un resumen de dos frases y una imagen de portada), seguido de elementos text, heading de nivel 2 y code.
• Páginas Sobre mí, Proyectos, Usos y Ahora (page) comienzan con un heading de nivel 1. Sobre mí contiene una línea de tiempo vertical de trabajos, Usos lista herramientas por categoría y Ahora dice qué estás haciendo este mes con la fecha de la última actualización.
• Rellena la configuración folio::profile en la página de inicio: nombre, cargo, empresa, ubicación, una foto cuadrada, una biografía de una frase, la dirección de correo electrónico y enlaces de perfil.

Componentes

• Resumen del post: dos frases que enuncian el problema y lo que el lector obtiene. Las tarjetas de lista lo usan como introducción.
• Encabezados: encabezados de nivel 2 cortos y específicos ("Relleno por 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 configurado, como máximo unas 15 líneas, reales y ejecutables.
• Llamadas de atención: alertas de GitHub ([!NOTE], [!TIP], [!WARNING]) en elementos de texto, como máximo una o dos por post.
• Proyectos: una tarjeta por proyecto con el nombre como título, el repositorio o demo como enlace, una frase sobre lo que hace con un número (estrellas, instalaciones, usuarios), y la pila como píldoras de código en línea en una línea separada, p. ej. `PHP` `Laravel`.
• Experiencia: elementos de línea de tiempo con etiquetas "2023 — ahora", títulos "Rol, Empresa", una frase de impacto con números y la pila como píldoras de código.
• Figuras: un elemento cards con la maquetación figures para mostrar como máximo tres números clave.

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 WCAG 2.2 AA 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 "haz clic aquí".

Contenido

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