Diese Portfolio-Website

Eine professionelle Portfolio-Website, designed, entwickelt und gepflegt in WordPress – von Grund auf neu aufgebaut mit Twenty Twenty-Five und dem Full Site Editor, mit einer mehrsprachigen EN/DE-Struktur, DSGVO-Konformität, Barrierefreiheit nach WCAG 2.1 AA und einem eigenständig verwalteten Plugin-Stack.

Eigenprojekt · Selbst initiiert · Laufend

Überblick

rothrockportfolio.com — Live-Site

Dieses Portfolio ist sowohl die Arbeit als auch der Beweis der Arbeit – eine WordPress-Site, die eigenständig designed, entwickelt und verwaltet wird und das vollständige Spektrum an CMS-Management-Kompetenzen in einer lebendigen, gepflegten Umgebung zeigt. Es hat eine vollständige Version durchlaufen und wird derzeit als Version zwei neu aufgebaut – mit dem Full Site Editor von WordPress und dem Twenty Twenty-Five Block-Theme.

Versionsgeschichte

V1 – V2

Der Wechsel von Riverbank zu Twenty Twenty-Five ist eine bewusste Entscheidung, mit der aktuellen Entwicklungsrichtung von WordPress mitzugehen – Full Site Editing ist die Zukunft der Plattform, und FSE-Kenntnisse sind direkt relevant für CMS-Management-Stellen. Der Neuaufbau führt außerdem eine zweisprachige EN/DE-Struktur mit Polylang ein, die sowohl den Berliner Markt als auch eine echte technische Kompetenz widerspiegelt.

Designentscheidungen

Struktur und visuelle Ausrichtung

V1 – Riverbank

V2 – Twenty Twenty-Five

Visueller Vergleich – v1 Riverbank vs. v2 Twenty Twenty-Five

• Drei-Säulen-Navigationsstruktur – CMS-Arbeit, Website-Design, Entwicklung – spiegelt die primären Kompetenzbereiche wider, statt generischer Abschnittsbezeichnungen
• Individuelle Farbpalette – gedämpftes Lila, waldgrüner Akzent, Hell- und Dunkelgrau – als benannte Tokens festgelegt, die durchgehend in allen Templates verwendet werden
• Typografie: Fraunces & Epilogue – ausgewähltes Schriftpaar global über Styles angewendet, ersetzt die Standardsystemschriften von Twenty Twenty-Five
• Drei Seitentemplates im Site Editor erstellt – Startseite, Pillar-Seite (gemeinsam für drei Bereiche) und Projektseite (gemeinsam für alle Case Studies)
• Synchronisierte Patterns für wiederkehrende Elemente – Projektkarte, Referenzblock, Meta-Leiste – einmal erstellt und seitenübergreifend wiederverwendet

Plugin Stack

Ausgewählte Tools und ihre Begründung

Jedes Plugin wurde für einen bestimmten Zweck ausgewählt – nichts wird ohne klaren Grund installiert. Der Stack ist bewusst schlank gehalten: 12 Plugins für Sicherheit, SEO, Performance, rechtliche Konformität, Formulare, Inhaltsdarstellung, Analytics und Mehrsprachigkeit.

CMS-Struktur

Wie die Site verwaltet wird

Template-Seite-Struktur

Site Editor Style buch

Polylang-Sprachverwaltung

• Globale Styles im Editor-Design-/Styles-Panel festgelegt – Farbpalette, Typografie und Abstände werden einmal definiert und überall übernommen
• Header und Footer als Template Parts erstellt – einmal bearbeitet, Änderungen wirken sich automatisch auf alle Seiten aus
• Polylang-Sprachpaare auf Seitenebene verknüpft – jede EN-Seite hat eine entsprechende DE-Seite, Sprachumschalter-Block im Header
• Rank Math + Polylang-Integration manuell aktiviert – mehrsprachiges SEO erfordert einen spezifischen Konfigurationsschritt, der nicht automatisch erfolgt
• WPConsent vor allen anderen Skripten konfiguriert – Cookie-Consent muss vor dem Laden von Analytics oder Tracking eingerichtet sein, eine gesetzliche Anforderung in Deutschland

Barrierefreiheit

WCAG 2.1 AA durchgehend

Barrierefreiheit ist kein nachträglich hinzugefügtes Feature – sie ist eine Anforderung, die alle Entscheidungen während des Aufbaus geprägt hat. Die Site trägt im Footer eine WCAG-2.1-AA-Konformitätserklärung, die auf bewussten Entscheidungen auf jeder Ebene basiert.

• „Zum Hauptinhalt springen“-Link im Header – Tastaturnutzende können die Navigation überspringen, ohne jedes Menüelement durchzutabben
• Semantisches HTML durchgehend – Überschriften in logischer Reihenfolge, Landmark-Bereiche (main, nav, footer) korrekt in Block-Templates verwendet
• Farbkontrastverhältnisse nach WCAG 2.1 AA geprüft – alle Text- und interaktiven Elemente bestehen bei allen Schriftgrößen
• Alle Bilder haben beschreibenden Alt-Text – keine dateinamenbasierten Standardtexte, sondern geschriebene Beschreibungen des Dargestellten
• Tastaturnavigation getestet – alle interaktiven Elemente ohne Maus erreichbar und bedienbar

Performance

PageSpeed-Ergebnisse

Die Performance wird über Site Kit by Google überwacht, das PageSpeed-Insights-Werte direkt im WordPress-Dashboard anzeigt. Bildkomprimierung via Smush mit aktiviertem Lazy Loading, WP Super Cache für Seiten-Caching und das schlanke Twenty Twenty-Five Basis-Theme halten die Ladezeiten ohne CDN kurz.

Laufende Pflege