Design- & Technik-Update von haustein.in

Modernisierung meiner Portfolio-Webseite

Stillstand ist im Web-Engineering keine Option. Mein Portfolio ist mehr als eine Visitenkarte; es ist mein Testfeld für moderne Web-Architekturen. Um den Anforderungen an Performance, Skalierbarkeit und SEO im Jahr 2026 gerecht zu werden, habe ich die gesamte Infrastruktur neu gedacht.

Vorher mit PHP & Tailwind

haustein.in vorheriges Design.

haustein.in vorheriges Design About.

haustein.in vorheriges Design Projekte.

Nachher mit NextJS und Tailwind

haustein.in neues Design / WIP -> kann sich noch ändern.

Tech-Change: Von Vanilla PHP zu React/NextJS

Während Vanilla PHP jahrelang solide Dienste leistete, erforderte der Wunsch nach einer nahtlosen User Experience und optimiertem Rendering einen Technologiewechsel. Der Umstieg auf Next.js ermöglicht mir den Einsatz von Static Site Generation (SSG).

Vorher: Server-side Rendering bei jedem Request, was wertvolle Millisekunden kostete.

Jetzt: Vorgerenderte HTML-Seiten, die direkt ausgeliefert werden. Das Resultat ist eine "Instant-On"-Erfahrung für den Nutzer. Sollte ich dynamische Daten benötigen, rüste ich einfach via API nach.

SEO-Optimierungen: Die technische Basis

Gutes SEO ist kein Add-on, sondern tief in der Architektur verwurzelt. Inspiriert durch meinen eigenen SEO-Guide für Programmierer, habe ich folgende Hebel umgelegt:

Schema.org (JSON-LD)

Ich nutze strukturierte Daten, um meine Identität maschinenlesbar zu machen. Über ein zentrales Person-Schema verknüpfe ich mein Portfolio mit meinen Tools auf promptbard.de. Durch die Verwendung von sameAs und rel="me" validiere ich meine Identität über verschiedene Domains hinweg.

Semantisches HTML5

Code-Qualität bedeutet hier Informationsarchitektur. Durch den gezielten Einsatz von <main>, <section>, <article> und hierarchisch korrekten Header-Tags (h1-h6) helfe ich Crawlern, die Relevanz meiner Inhalte ohne Raten zu erfassen.

Meta-Management

Dank Next.js Metadata API wird jede Unterseite mit dynamischen, hochoptimierten Meta-Tags und OpenGraph-Bildern versorgt. Das sorgt nicht nur für bessere Rankings, sondern auch für eine professionelle Darstellung beim Teilen in sozialen Netzwerken.

Geschwindigkeit & Core Web Vitals

Geschwindigkeit ist ein Rankingfaktor. Durch Image-Optimierung (WebP/AVIF), Font-Preloading und das Eliminieren von Render-Blocking-Skripten erreiche ich Bestwerte in den Core Web Vitals.

Alter Wert 76...

Neuer Wert 96!

Vorteile

Die Vorteile

Developer Experience: Dank Komponenten-basierter Architektur (React) ist das System wartungsarm und modular erweiterbar.
Identity Sync: Durch die bidirektionale Verlinkung (rel="me") mit Projekten wie promptbard steigt die Autorität meiner gesamten digitalen Präsenz.
Future Proof: Die Trennung von Content (MDX) und Logik erlaubt schnelle Design-Iterationen.

Developer X: Endlich ein Gefühl der Freiheit (erfahre gleich mehr dazu).

Herausforderungen & Nachteile?

Der Wechsel zu einem JavaScript-Framework erhöht die Komplexität. Themen wie Hydration-Errors oder die Konfiguration der .htaccess für statische Exporte (Trailing Slashes!) erfordern tiefes technisches Verständnis, um keine SEO-Einbußen zu erleiden.

Vorsicht beim Next.js-Standardverhalten: Features wie das automatische Pre-fetching der <Link>-Komponente sollten bei der Nutzung von klassischem Webspace (Shared Hosting) deaktiviert werden.

Standardmäßig lädt Next.js alle verknüpften Seiten im Hintergrund, sobald sie im Viewport erscheinen. Auf einem Apache-Server kann dies in kürzester Zeit zu einer massiven Anzahl an Anfragen führen. Sicherheitsmodule wie mod_evasive oder fail2ban interpretieren dieses Verhalten oft als DDoS-Angriff oder Directory-Scraping.

Mir ist genau das beim output: 'export für statische Seiten passiert: Der Server hat meine IP automatisch gesperrt. Die Lösung ist das Setzen von prefetch={false}, um die Kontrolle über das Request-Volumen zu behalten.

Am besten nutzt du einfach einen Wrapper für die <Link>-Component, statt prefetch={false} überall zu ergänzen:

/component/SafeLink.tsxTypeScript

import Link, { LinkProps } from 'next/link';
import { ReactNode } from 'react';

interface SafeLinkProps extends LinkProps { children: ReactNode; className?: string; }

export default function SafeLink({ children, ...props }: SafeLinkProps) {
return (
  <Link {...props} prefetch={false}>
    {children}
  </Link>
);
}

Warum CMS wie WordPress mich ausbremsen

Ich habe mich gegen CMS und somit WordPress für die Modernisierung entschieden. Auf der einen Seite schränken mich klassische Content-Management-Systeme wie WordPress in meiner Arbeitsweise massiv ein. Ich merke, wie ich unproduktiv werde, wenn ich mich durch verschachtelte Menüs klicken oder mich mit störrischen WYSIWYG-Editoren herumschlagen muss.

Ein CMS fühlt sich oft wie ein Fremdkörper in meinem Workflow an. Es zwingt mir eine Struktur auf, die meine Kreativität und Umsetzungsgeschwindigkeit blockiert.

Mein neuer Workflow: Markdown & Full Control

Stattdessen setze ich auf eine Architektur, die sich nahtlos in meine Entwicklungsumgebung einfügt:

Markdown als Standard: Inhalte schreibe ich dort, wo ich auch meinen Code schreibe – in meiner gewohnten IDE. Markdown ist schnell, sauber und versionierbar.
Keine Kompromisse beim Design: Die Fähigkeit, jede Seite mit React und Tailwind CSS exakt nach meinen Vorstellungen anzupassen, macht mich nicht nur schneller, sondern auch entspannter.
Versionierung via Git: Jede Änderung am Inhalt ist ein Commit. Ich habe die volle Historie, kann Branches nutzen und profitiere von einem sauberen Deployment-Prozess.

Markdown MDX in der IDE: Developer X auf Hochtouren.

Für mich bedeutet das: Weniger "Klick-Arbeit" im Backend, mehr Fokus auf das Wesentliche – das Bauen von hochwertiger Software und das Schreiben von fundierten Inhalten mit dynamischen Komponenten. Jetzt habe ich wirklich wieder Spaß am Content.

Fazit

Der Wechsel auf Next.js war kein Selbstzweck. Er ist das Fundament, um meine Projekte als Trusted Entity im Web zu positionieren. Wer heute Software baut, muss versuchen die Sprache der Suchmaschinen fließend zu sprechen.

Gerade für Devs, die sich in CMS-Umgebungen unwohl fühlen, kann sich ein Blick auf einen Static Site Generator lohnen; davon gibt es wirklich viele. Das beste an Next? Sollte ich dynamische Daten von einem Backend brauchen, binde ich sie via Client-side Fetching über eine API ein.