Über diese Website

Das Portfolio wird aus kleinen Templates und strukturiertem JSON als vollständige HTML5-Dokumente erzeugt. Ein Builder mit der Python-3-Standardbibliothek schreibt jede Sprachfassung im Voraus; der Browser setzt die Website nicht erst zur Laufzeit zusammen.

Ausgeliefert wird der main-Branch über GitHub Pages. Hinter dem Portfolio stehen weder CMS noch Anwendungsframework, Datenbank oder serverseitige Anwendung.

Laufzeit

HTML5 · CSS · Vanilla JavaScript

Build

Python 3 · JSON · HTML-Vorlagen

Hosting

GitHub Pages

Englisch, traditionelles Chinesisch (Hongkong), vereinfachtes Chinesisch, Japanisch, Deutsch, Französisch und Russisch werden als getrennte statische Fassungen mit kanonischen URLs und hreflang-Verweisen und sprachspezifischen Metadaten gebaut.

Literarische Quelltexte unterliegen strengeren Regeln als gewöhnliche UI-Texte. Wo festgelegt, ist traditionelles Chinesisch kanonisch; vereinfachte literarische Fassungen werden nur schriftkonvertiert und per Quellhash geprüft, während eigene Tests die Zeilen- und Strophenstruktur der Übersetzungen prüfen.

Locales

en-GB · zh-Hant-HK · zh-Hans · ja · de · fr · ru

Literatur

OpenCC-Helfer · Quell-Hashes · Zeilenstruktur

Metadaten

canonical · hreflang · Open Graph

Das Layout nutzt CSS Grid, subgrid, container queries, logical properties, custom properties und flüssige clamp()-Größen. Media queries bleiben konservative Fallbacks; wo container queries unterstützt werden, reagiert ein Modul auf seine eigene verfügbare Breite.

Die Schriften werden als WOFF2 selbst gehostet. EB Garamond trägt überwiegend den lateinischen Fließtext, Courier Prime und Cousine die Metadaten, Shippori Mincho traditionelles Chinesisch und Japanisch, Noto Serif SC vereinfachtes Chinesisch; eine winzige I.Ming-Teilmenge schließt verbliebene Hongkonger Glyphenlücken. Die CJK-Subsets werden mit fontTools und Brotli neu gebaut; die Noto-Quelle ist per Commit und SHA-256 fixiert.

Layout

Grid · subgrid · Container Queries · logische Eigenschaften

Schriften

EB Garamond · Courier Prime · Cousine · Shippori Mincho · Noto Serif SC · I.Ming

Farbschema

hell/dunkel · prefers-color-scheme

Semantische Bereiche, eine Hauptüberschrift, Sprunglinks, sichtbarer Tastaturfokus, ausgeschriebene Sprachnamen und verlässliche Touch-Ziele gehören zur Grundstruktur. Systemeinstellungen für reduzierte Bewegung, höheren Kontrast und erzwungene Farben werden berücksichtigt.

Ein dauerhaftes Lesemenü kann serifenlose Schrift, größere Schrift, mehr Abstände, kürzere Zeilen, ein vereinfachtes Layout, weniger Bewegung und höheren Kontrast aktivieren. Diese Optionen sind progressive Erweiterungen und bleiben lokal im Browser.

Leseoptionen

serifenlos · größere Schrift · Abstände · Zeilenbreite · einfaches Layout · Bewegung · Kontrast

Speicher

nur localStorage

Prüfung

eigener Strukturaudit · axe-core Browseraudit

Fotografien und Forschungsabbildungen verwenden picture/srcset mit WebP- und JPEG-Varianten, expliziten Abmessungen und responsiven Größenangaben. Das erste Bild wird priorisiert; weiter unten liegende Medien werden verzögert geladen und asynchron dekodiert.

Abschnitte unterhalb des ersten Viewports können content-visibility nutzen. View Transitions und scroll-linked motion bleiben optionale progressive Erweiterungen; bei reduzierter Bewegung werden Animationen abgeschaltet.

Bilder

picture · srcset · WebP · JPEG

Laden

feste Abmessungen · verzögertes Laden · asynchrones Dekodieren

progressives CSS

content-visibility · View Transitions · Scroll-Timelines

Im Repository wird geprüft, ob generierte Seiten aktuell sind, Locale-Schemata übereinstimmen, literarische Strukturen stabil bleiben, semantische Bereiche und Bedienelemente vollständig sind, lokale Links und Fragmente aufgelöst werden können, Bilder Alternativtext besitzen und JavaScript syntaktisch gültig ist.

Die Browser-QA ergänzt Geometrieprüfungen in mehreren Sprachen und bei verschiedenen Viewport-Breiten, axe-core-Audits und HTML-Validierung. In GitHub Actions laufen bei Pushes und Pull Requests zuerst die leichten Prüfungen und danach die Browser-Suite; GitHub Pages veröffentlicht die statischen Dateien unabhängig davon aus main.

Repository-Prüfungen

Build-Stand · Mehrsprachigkeit · Barrierefreiheit · Links/Assets · JS-Syntax

Browser-QA

Playwright · axe-core · html-validate

Auslieferung

GitHub Actions · GitHub Pages