aimeos/pagible-themes-folio

Folio Theme Design System

Ausrichtung

Baue eine persönliche Website wie die besten Entwickler-Blogs und Portfolios (leerob.com, overreacted.io, brittanychiang.com, antfu.me): eine Person, eine Stimme, und das Schreiben steht an erster Stelle. Die Seite soll sich wie ein gut geführtes Notizbuch anfühlen, ruhig und schnell, ohne Ablenkung vom Text. Zeige, was die Person gebaut und gelernt hat, mit konkreten Zahlen und Code. Verwende keine Stockfotos von Menschen, keine Marketingbehauptungen und keine dekorativen Effekte.

Grundlagen

• Verwende ausschließlich das Markup und die Klassen, die von ./theme/views/ sowie den Layouts article, blog, code, text, blog und der View main des Themes bereitgestellt werden.
• Verwende die systemeigenen Schriftarten Sans-Serif, Serif und Monospace sowie die vorhandenen --pico-* Variablen.
• Verwende warme Neutraltöne (#2B2924, #6B665E, #E4E0D9, #FBFAF8) und Grün (#1F7A4D, #4FBF87 im Dunkelmodus) ausschließlich für Links und den ersten Button; Codeblöcke bleiben stets dunkel.
• Unterstütze hellen und dunklen Modus; platziere niemals feste helle Farben auf thematisierbaren Hintergründen.
• Verwende 0.5rem Ecken und dünne Rahmen anstelle von Schatten.

Struktur

• Startseite (page): eine hero mit dem Avatar als Bild, der Rolle als Untertitel, einem Ein-Satz-Vorstellungstext und zwei Buttons, ein blog-Element mit dem Layout list und dem Titel „Neueste Beiträge“, zweispaltige Projekt-cards und ein cta für Kontakt.
• Schreiben (page): eine kurze Notiz, worüber du schreibst, und eine blog-Liste aller Beiträge mit dieser Seite als übergeordneter Seite.
• Beiträge (blog) unterhalb von „Schreiben“, neueste zuerst im Baum. Jeder Beitrag beginnt mit einem article-Element (Titel, ein Zwei-Satz-Einleitung und ein Titelbild), gefolgt von text, heading (Ebene 2) und code-Elementen.
• Über mich, Projekte, Verwendetes und Jetzt-Seiten (page) beginnen mit einer Überschrift der Ebene 1. „Über mich“ enthält eine vertical Zeitleiste der Jobs, „Verwendetes“ listet Werkzeuge nach Kategorie auf und „Jetzt“ sagt, was du diesen Monat machst, mit dem Datum der letzten Aktualisierung.
• Fülle die folio::profile Konfiguration auf der Startseite aus: Name, Berufsbezeichnung, Unternehmen, Standort, ein quadratisches Foto, ein Ein-Satz-Lebenslauf, die E-Mail-Adresse und Profil-Links.

Komponenten

• Beitragseinleitung: zwei Sätze, die das Problem und den Nutzen für den Leser nennen. Die Listenkarten verwenden sie als Einleitung.
• Überschriften: kurze, spezifische Überschriften der Ebene 2 („Backfill in Batches“); Ebene 3 nur unter ihnen. Verwende mindestens zwei, damit die Gliederung sichtbar wird.
• Code: ein code-Element pro Schnipsel mit der gesetzten Sprache, maximal etwa 15 Zeilen, echt und ausführbar.
• Hervorhebungen: GitHub-Alerts ([!NOTE], [!TIP], [!WARNING]) in Textelementen, höchstens ein oder zwei pro Beitrag.
• Projekte: eine Karte pro Projekt mit dem Namen als Titel, dem Repository oder der Demo als Link, einem Satz, was es tut, mit einer Zahl (Sterne, Installationen, Benutzer), und dem Stack als Inline-Code-Pills in einer separaten Zeile, z.B. `PHP` `Laravel`.
• Erfahrung: Zeitleisteneinträge mit „2023 – heute“-Labels, „Rolle, Unternehmen“-Titeln, einem Satz über die Wirkung mit Zahlen und dem Stack als Code-Pills.
• Abbildungen: ein cards-Element mit dem Layout figures für maximal drei Schlüsselzahlen.

Barrierefreiheit

• Behalte den Skip-Link, semantische Überschriften, den beschrifteten Modus-Umschalter und die sichtbare :focus-visible Umrandung bei.
• Halte den WCAG 2.2 AA Kontrast in beiden Farbschemata ein, einschließlich Code-Token.
• Schreibe aussagekräftige Alt-Texte für Cover und Namenslinks nach ihrem Ziel, niemals „hier klicken“.

Inhalt

Schreibe in der Ich-Perspektive und sprich den Leser mit „du“ an. Sei konkret: nenne die Versionen, Zahlen und Fehler. Eröffne Beiträge mit dem Problem, nicht mit Hintergrundinformationen, und beende sie damit, was du als nächstes tun würdest. Halte Titel schlicht und beschreibend („Zero-Downtime-Migrationen bei einer Tabelle mit 400 Mio. Zeilen“). Vermeide Buzzwörter, „einfach“, „nur“ und Füll-Einleitungen.