aimeos/pagible

Système de conception du thème Folio

Orientation

Construisez un site personnel comme les meilleurs blogs et portfolios de développeurs (leerob.com, overreacted.io, brittanychiang.com, antfu.me) : une seule personne, une seule voix, et l'écriture prime. Le site doit donner l'impression d'un carnet bien tenu, calme et rapide, où rien ne rivalise avec le texte. Montrez ce que la personne a construit et appris avec des chiffres concrets et du code. N'utilisez aucune photo d'archives de personnes, aucune revendication marketing et aucun effet décoratif.

Fondations

• Utilisez uniquement le balisage et les classes fournis par ./theme/views/ et les vues article, blog, code, text, blog (layout) et main du thème.
• Utilisez les polices système sans-serif, serif et monospace ainsi que les variables --pico-* existantes.
• Utilisez uniquement les neutres chauds (#2B2924, #6B665E, #E4E0D9, #FBFAF8) et le vert (#1F7A4D, #4FBF87 en mode sombre) pour les liens et le premier bouton ; les blocs de code restent toujours sombres.
• Prenez en charge les modes clair et sombre ; ne placez jamais de couleurs claires fixes sur des fonds adaptables.
• Utilisez des coins de 0.5rem et des bordures fines plutôt que des ombres.

Structure

• Accueil (page) : un hero avec l'avatar en image, le rôle en sous-titre, une phrase d'introduction et deux boutons, un élément blog avec la disposition list et « Écrits récents » comme titre, des cards de projet sur deux colonnes et un cta pour le contact.
• Écrits (page) : une courte note sur ce dont vous écrivez et une liste blog de tous les articles avec cette page comme page parente.
• Articles (blog) sous Écrits, les plus récents en premier dans l'arborescence. Chacun commence par un élément article (titre, un résumé de deux phrases et une image de couverture), suivi d'éléments text, heading de niveau 2 et code.
• Pages À propos, Projets, Utilise et Maintenant (page) : commencent par un heading de niveau 1. À propos contient une frise chronologique verticale des emplois, Utilise liste les outils par catégorie et Maintenant indique ce que vous faites ce mois-ci avec la date de la dernière mise à jour.
• Remplissez la configuration folio::profile sur la page d'accueil : nom, titre, entreprise, lieu, une photo carrée, une bio d'une phrase, l'adresse e-mail et les liens de profil.

Composants

• Résumé d'article : deux phrases qui énoncent le problème et ce que le lecteur obtient. Les cartes de liste l'utilisent comme introduction.
• Titres : titres de niveau 2 courts et spécifiques (« Remplissage par lots ») ; les niveaux 3 seulement en dessous. Utilisez-en au moins deux pour que le plan apparaisse.
• Code : un élément code par extrait avec le langage défini, au maximum environ 15 lignes, réel et exécutable.
• Encarts alertes : alertes GitHub ([!NOTE], [!TIP], [!WARNING]) dans les éléments de texte, au maximum un ou deux par article.
• Projets : une carte par projet avec le nom comme titre, le dépôt ou la démo comme lien, une phrase sur ce qu'il fait avec un chiffre (étoiles, installations, utilisateurs), et la stack sous forme de puces de code en ligne sur une ligne séparée, par ex. `PHP` `Laravel`.
• Expérience : éléments de frise avec les étiquettes « 2023 — maintenant », titres « Rôle, Entreprise », une phrase d'impact avec des chiffres et la stack sous forme de puces de code.
• Chiffres-clés : un élément cards avec la disposition figures pour trois chiffres maximum.

Accessibilité

• Conservez le lien d'évitement, les titres sémantiques, le commutateur de mode étiqueté et le contour :focus-visible visible.
• Maintenez le contraste WCAG 2.2 AA dans les deux schémas de couleurs, y compris les jetons de code.
• Rédigez des textes alternatifs significatifs pour les couvertures et les liens de nom après leur cible, jamais « cliquez ici ».

Contenu

Écrivez à la première personne et adressez-vous au lecteur par « vous ». Soyez précis : nommez les versions, les chiffres et les erreurs. Ouvrez les articles par le problème, pas par le contexte, et terminez par ce que vous feriez ensuite. Gardez les titres simples et descriptifs (« Migrations zéro temps d'arrêt sur une table de 400 millions de lignes »). Évitez les mots à la mode, les « simplement », « juste » et les introductions vides.