aimeos/pagible

Folio-Theme-Designsystem

Richtung

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 Website soll sich wie ein gut geführtes Notizbuch anfühlen, leise und schnell, ohne dass etwas mit dem Text konkurriert. 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 nur das Markup und die Klassen aus ./theme/views/ sowie die Layouts article, blog, code, text, blog und main des Themes.
• Verwende die System-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 dunklen Modus) nur für Links und den ersten Button; Code-Blöcke bleiben immer dunkel.
• Unterstütze hellen und dunklen Modus; platziere niemals feste helle Farben auf thematisierbaren Hintergründen.
• Verwende Ecken mit 0.5rem und dünne Ränder anstelle von Schatten.

Aufbau

• Startseite (page): ein hero mit dem Avatar als Bild, der Rolle als Untertitel, einem Ein-Satz-Einführung und zwei Buttons, ein blog-Element mit dem Layout list und „Aktuelle Beiträge“ als Titel, 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 beginnt mit einem article-Element (Titel, ein zweisätziger Vorspann und ein Titelbild), gefolgt von text, Ebene-2-heading- und code-Elementen.
• Seiten Über mich, Projekte, Nutzt und Jetzt (page) beginnen mit einer Ebene-1-heading. Über mich enthält eine vertical-Zeitleiste mit Jobs, Nutzt listet Werkzeuge nach Kategorie auf und Jetzt sagt, was du in diesem Monat tust, mit dem Datum der letzten Aktualisierung.
• Fülle die folio::profile-Konfiguration auf der Startseite: Name, Jobtitel, Unternehmen, Ort, ein quadratisches Foto, eine Ein-Satz-Biografie, die E-Mail-Adresse und Profillinks.

Komponenten

• Beitragsvorspann: zwei Sätze, die das Problem und das Ergebnis für den Leser nennen. Die Listenkarten verwenden ihn als Einleitung.
• Überschriften: kurze, spezifische Ebene-2-Überschriften („Backfill in Batches“); Ebene 3 nur darunter. Verwende mindestens zwei, damit die Gliederung erscheint.
• Code: ein code-Element pro Snippet mit gesetzter Sprache, höchstens etwa 15 Zeilen, echt und ausführbar.
• Callouts: GitHub-Alarme ([!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 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 — jetzt“-Labels, „Rolle, Firma“-Titeln, einem Satz über die Auswirkung mit Zahlen und dem Stack als Code-Pills.
• Figuren: ein cards-Element mit dem Layout figures für höchstens drei Schlüsselzahlen.

Barrierefreiheit

• Behalte den Skip-Link, semantische Überschriften, den beschrifteten Moduswechsel und den sichtbaren :focus-visible-Umriss 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 ersten Person und sprich den Leser mit „du“ an. Sei konkret: nenne die Versionen, Zahlen und Fehler. Eröffne Beiträge mit dem Problem, nicht mit Hintergrundwissen, und endet mit dem, was du als Nächstes tun würdest. Halte Titel einfach und beschreibend („Zero-Downtime-Migrationen auf einer 400M-Zeilen-Tabelle“). Vermeide Buzzwords, „einfach“, „nur“ und Füll-Intros.