aimeos/pagible-themes-folio

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 personne, une voix, et l'écrit en premier. Le site doit donner l'impression d'un carnet bien tenu, calme et rapide, sans rien qui rivalise avec le texte. Montrez ce que la personne a construit et appris avec des chiffres concrets et du code. N'utilisez pas de photos libres de droits de personnes, d'affirmations marketing ni d'effets décoratifs.

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 les tons neutres chauds (#2B2924, #6B665E, #E4E0D9, #FBFAF8) et le vert (#1F7A4D, #4FBF87 en mode sombre) uniquement 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 thématisables.
• Utilisez des coins de 0.5rem et des bordures fines au lieu d'ombres.

Structure

• Accueil (page) : un hero avec l'avatar comme image, le rôle comme sous-titre, une introduction d'une phrase et deux boutons, un élément blog avec la disposition list et "Écrits récents" comme titre, des cards de projets 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 chapô 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 du poste, entreprise, lieu, une photo carrée, une biographie d'une phrase, l'adresse e-mail et les liens de profil.

Composants

• Chapô 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 ("Remplir par lots") ; niveau 3 uniquement 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.
• Encadrés : alertes GitHub ([!NOTE], [!TIP], [!WARNING]) dans les éléments textuels, 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 pastilles de code en ligne sur une ligne séparée, par exemple `PHP` `Laravel`.
• Expérience : éléments de frise chronologique avec des étiquettes "2023 — maintenant", des titres "Rôle, Entreprise", une phrase d'impact avec des chiffres et la stack sous forme de pastilles de code.
• Chiffres clés : un élément cards avec la disposition figures pour trois chiffres clés au maximum.

Accessibilité

• Préservez 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 jeux 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

Rédigez à la première personne et adressez-vous au lecteur par "vous". Soyez précis : nommez les versions, les chiffres et les erreurs. Commencez 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 sans interruption sur une table de 400 millions de lignes"). Évitez les mots à la mode, "simplement", "juste" et les introductions de remplissage.