Jacek Rudnicki — Lebenslauf & Werk

Das Projekt in einem Absatz

Dies ist ein persönliches Projekt — die Website meines Vaters, Prof. dr hab. n. med. Jacek Rudnicki: Pädiater und Neonatologe, Professor an der Pommerschen Medizinischen Universität in Stettin, zugleich Komponist, Autor von mehr als einem Dutzend Büchern und Songtexter. Die Aufgabe war leicht zu formulieren und schwer gut zu lösen: eine einzige Single-Page-Seite, die eine wissenschaftliche und eine künstlerische Laufbahn gleichzeitig tragen muss, ohne wie zwei aneinandergeheftete Visitenkarten zu wirken.

Eine Person, zwei Biografien

Der Lebenslauf-Abschnitt beginnt mit vier Chips — „Pädiater & Neonatologe", „Professor an der PUM", „Komponist", „Autor & Künstler" — denn keine einzelne Berufsbezeichnung trägt diese Laufbahn. Die folgende Biografie ist in sechs Absätze gegliedert, jeder zu einem anderen Strang: Ausbildung und die militärmedizinische Akademie, Leitung der Klinik für Neugeborenen-Pathologie und Auslandsstipendien, Forschungsthemen (neonatale Enzephalopathie, Stammzellen in der Neonatologie, das Verhältnis von Medizin, Philosophie und Kunst), Bücher und Liedtexte für mehrere Bands sowie für Juliusz Machulskis Film V.I.P., Musikpreise und satirische Pressezeichnungen und schließlich kleine, persönliche Details — lange Haare, weil das während des Studiums an der Militärmedizinischen Akademie unmöglich war; eine Fliege nach dem Vorbild eines Onkels. Dieser letzte Satz steht dort bewusst: ein Lebenslauf ohne Platz für solche Details wäre für diese Person schlicht unwahr.

Fünfzehn Bücher, kein CMS

Jedes Buch ist ein Eintrag in einem JavaScript-Array — Titel, Cover, Dateipfad — dargestellt als Karte, deren Cover beim Hover ein Download-Abzeichen zeigt. Die Datei wird direkt heruntergeladen (download, target="_blank", rel="noopener noreferrer") aus einem statischen Ordner. Ein weiteres Buch hinzuzufügen bedeutet eine Zeile in einer Datendatei und ein PDF in einen Ordner zu legen — keine Datenbank, kein Admin-Panel, denn für die Seite eines einzelnen Autors, der Inhalte nie selbst im Alltag verwalten wird, wäre das mehr Architektur, als das Problem braucht.

Vorträge, die erst sortiert werden mussten

Dreiundzwanzig Präsentationen aus Jahren des Lehrens — von Neonatologie über Soziologie bis „Kunst auf Doping" — in PPTX, PPTM und DOCX. Die Komponente erkennt den Dateityp allein an der Erweiterung des Pfads und weist ihm ein Icon und eine Chip-Farbe zu (Orange für Präsentationen, Blau für Dokumente) — kein separates Metadatenfeld, da die Erweiterung diese Information bereits trägt. Eine Suchleiste filtert die Liste live nach Titel (useMemo), und das Raster zeigt standardmäßig nur die ersten Einträge — die Anzahl hängt von der Bildschirmbreite ab (3 auf dem Smartphone, 4 auf dem Tablet, 6 auf dem Desktop, über useMediaQuery mit den Breakpoints von MUI) — mit einem „Mehr anzeigen"-Button, der genau angibt, wie viele Einträge noch verborgen sind. Das Wieder-Einklappen scrollt sanft zurück an den Anfang des Abschnitts, damit eine lange Vortragsliste die Besucherin nie irgendwo in der Mitte der Seite zurücklässt.

Eine Galerie als eigene Sammlung, kein Lebenslauf-Anhängsel

Porträts, Zeichnungen und Fotografien, gefiltert nach Kategorie über ein einziges allPhotos-Array mit einem category-Feld je Eintrag. Ein Klick auf ein Vorschaubild öffnet eine Vollbildansicht über yet-another-react-lightbox — eine Bibliothek, kein eigener Code für Tastatursteuerung, Gesten oder Pfeiltasten-Navigation, denn genau das ist die Art von Funktion, die sich für eine persönliche Visitenkartenseite nicht lohnt, von Grund auf selbst zu schreiben.

Selbstgebautes i18n statt einer Bibliothek

Drei Sprachen — Polnisch, Englisch, Deutsch — als ein verschachteltes JavaScript-Objekt und ein kleiner React-Context mit einer t-Funktion. Statt i18next oder react-intl ein paar Dutzend Zeilen eigener Code, denn die Seite hat einen festen, im Voraus bekannten Satz an Texten statt dynamisch geladener Inhalte. Ein interessantes Detail: Manche Werte in diesem Objekt sind gar keine Strings, sondern Funktionen — expand nimmt eine Zahl entgegen und liefert einen fertigen Text wie „Mehr anzeigen (5)", und noResults nimmt die eingegebene Suche entgegen und liefert „Keine Vorträge gefunden für…" — eine einfache Art der Interpolation, ohne zu einem vollständigen Pluralisierungssystem zu greifen, das bei drei Sprachen und einer Handvoll dynamischer Meldungen schlicht nicht gebraucht wird.

Ein Header, der weiß, wann er sich zurückhält

Die Navigation ist über dem Vollbild-Hero-Foto transparent, gewinnt aber nach dem Scrollen (useScrollTrigger mit einem Schwellenwert von 100px) einen halbtransparenten dunklen Hintergrund und schrumpft von 80 auf 60 Pixel Höhe — eine subtile, aber bewusste Entscheidung: Die Navigation soll nicht visuell mit dem Foto konkurrieren, bevor die Besucherin tatsächlich mit dem Scrollen des Inhalts begonnen hat.

Kontakt ohne implizite Rangfolge

Vier Kontaktkanäle — E-Mail, Telefon, YouTube, eine Empik-Publikationssuche — dargestellt als vier gleichwertige runde Icons, ohne Aufteilung in „primär" und „sekundär". Das ist Absicht: Manche Besucher landen auf dieser Seite, nachdem sie ein Buch gelesen haben, und suchen den YouTube-Kanal oder eine weitere Publikation, keinen geschäftlichen Kontakt — daher verdient keiner der vier Kanäle einen bevorzugten Platz.

Was dieses Projekt tatsächlich gelehrt hat

Die stärkste Lektion dieser Seite: Nicht jedes Projekt braucht eine Architektur, die für eine Größenordnung ausgelegt ist, die es nie erreichen wird. Fünfzehn Bücher und dreiundzwanzig Vorträge als statische Dateien in einem JavaScript-Array sind keine Abkürzung aus Zeitmangel — es ist eine Lösung, die bewusst auf die Größe des Problems zugeschnitten ist: ein Autor, selten wechselnde Inhalte, kein Bedarf an einem CMS oder einer Datenbank. Das, was ich wiederholen würde: bevor man zu einer Bibliothek oder einem Architekturmuster greift, fragen, ob genau dieses Projekt jemals auf eine Größe wachsen wird, die das rechtfertigt — und wenn nicht, sind ein paar Dutzend Zeilen eigener Code die bessere Antwort als eine Abhängigkeit, die man pflegen muss.