Die Entwicklung dieser Website

Unternehmer möchten erkennen, ob ich bei ihrem Problem helfen kann. Technische Verantwortliche brauchen genügend Details, um meinen Beitrag einzuschätzen. Die Startseite stellt mein Angebot vor. Unter „Projekte“ beschreibe ich ausgewählte Arbeiten und die eingesetzten Technologien; „Über mich“ erklärt meinen beruflichen Hintergrund und meine Arbeitsweise.

Bei jedem Projekt unterscheide ich zwischen dem Zweck der Anwendung und meinem eigenen Beitrag. So können Leser meine Erfahrung anhand konkreter Arbeit einschätzen und bei Interesse die Entscheidungen dahinter in einer ausführlichen Projektbeschreibung nachvollziehen.

Gemeinsame Komponenten und Design-Tokens halten Typografie, Abstände und Farben über die Seiten hinweg konsistent. Violett sorgt für Wiedererkennung und gliedert die Inhalte; Türkis kennzeichnet Links und primäre Aktionen. Tastaturfokus, mobile Navigation und Formularhinweise folgen derselben Gestaltung.

Animationen geben der Website Charakter, ohne für das Verständnis nötig zu sein. Inhalte erscheinen in zusammengehörigen Gruppen. Links auf andere Seiten führen dagegen direkt ans Ziel, statt wie Scrollen innerhalb der aktuellen Seite zu wirken. Die Inhalte bleiben ohne Animation lesbar; die Einstellung für reduzierte Bewegung schaltet dekorative Animationen ab.

Nach einem fehlgeschlagenen Versand sollte niemand seine Anfrage neu schreiben müssen. Das Formular prüft die Eingaben, erhält sie bei einem Versandfehler und erklärt, was passiert ist. Lässt sich der Versand nicht bestätigen, wird auch das deutlich – mit direkter E-Mail als Alternative.

Serverseitige Validierung und Spamschutz sind von der Brevo-E-Mail-Anbindung getrennt. Tests prüfen ungültige Eingaben, Versandfehler und Zeitüberschreitungen, ohne echte Nachrichten zu versenden. Diese Trennung begrenzt auch den Aufwand eines späteren Anbieterwechsels.

Next.js und React bilden die Anwendungsstruktur, mit vorgerenderten Seiten und gezielten Interaktionen im Browser. Typisierte Seiteninhalte und Markdown-Artikel liegen in Git, sodass ich Inhalts- und Codeänderungen gemeinsam prüfen kann. Das passt zu einer Website, die ich selbst pflege; ein Redaktionsteam könnte einen anderen Veröffentlichungsablauf benötigen.

Englische und deutsche Inhalte haben eigene URLs; der Sprachwechsel führt zur entsprechenden Seite. Gemeinsame Komponenten und Veröffentlichungsregeln sowie zusammen gepflegte Übersetzungen helfen, Inhalt und Verhalten in beiden Sprachen konsistent weiterzuentwickeln.

Typprüfungen und Unit-Tests prüfen Inhaltsmodelle und Anwendungslogik. Browsertests decken Navigation, Sprachwechsel und die Zustände des Kontaktformulars ab; automatisierte Prüfungen auf Barrierefreiheitsprobleme ergänzen sie. Layout, Animationen und Tastaturbedienung prüfe ich zusätzlich im Browser. GitHub Actions führt die automatisierten Prüfungen aus; lokale Hooks prüfen vor einem Commit Formatierung und Lint-Regeln.

KI-Unterstützung beim Programmieren war Teil des Entwicklungsprozesses. Ich habe Anforderungen und Gestaltungsentscheidungen vorgegeben, das Ergebnis durch Code- und Browser-Reviews schrittweise verbessert und bleibe für die ausgelieferte Software verantwortlich. Versionierte Änderungen und gezielte Prüfungen machen diese Arbeit nachvollziehbar.

Die Website wird bei Netlify unter janisschanbacher.com gehostet. Die Neuentwicklung umfasst kanonische URLs, seitenspezifische Metadaten, strukturierte Daten und eine Sitemap mit ausschließlich veröffentlichten Inhalten. Für alte Links gibt es klare Regeln: eine Weiterleitung, wenn ein passender Ersatz existiert, andernfalls eine echte 404- oder 410-Antwort für entfernte Inhalte.

So entsteht eine übersichtliche Website, deren Inhalte, Oberfläche und Kontaktfunktion sich mit neuen Projekten und Artikeln weiterentwickeln lassen.