heleha.com — Diese Website
Konzeption, Planung und technische Umsetzung dieser Website — mit Next.js Static Export, Cloudflare Pages, Privacy-by-Design-Ansatz und vollständiger SEO-Integration. KI-gestützt, aber eigenständig konzipiert, geprüft und vollständig verantwortet.
Zeitaufwand
100+ Stunden
Framework
Next.js 16
Hosting
Cloudflare Pages
Deployment
GitHub → CI/CD
Analytics
Cookiefrei
Status
Laufend
Ausgangslage und Ziel
heleha.com entstand aus dem Wunsch, eigene Projekte sauber zu dokumentieren und nach außen darzustellen — ohne auf Template-Baukästen zurückzugreifen, die kaum Kontrolle über Datenschutz, Performance und Darstellung lassen.
Das Ziel war eine schnelle, datenschutzfreundliche Portfolio-Website mit echtem technischen Fundament: kein Shared-Hosting, kein CMS, kein Cookie-Banner, kein überdimensioniertes Framework — sondern eine statisch generierte Website, die sich auf Cloudflare Pages so verhält, wie sie auf dem lokalen Entwicklungsrechner aussieht.
Die Website ist unter dem Namen Heleha veröffentlicht — aus Hardware, Electricity und Handling. Das Wort „Handling" beschreibt dabei mehr als technische Bedienung: Organisation, Kontrolle, Feinarbeit und die Arbeit, die ein Projekt langfristig am Laufen hält.
Technischer Stack
Statische Seitenausgabe mit `output: export` — keine Server-Laufzeit notwendig, vollständig CDN-kompatibel.
Typsicherheit für alle Komponenten, Metadaten und Hilfsfunktionen — reduziert Flüchtigkeitsfehler erheblich.
Utility-First-Styling direkt im JSX, konsistentes Design-System ohne separate CSS-Dateien.
Globale CDN-Auslieferung, automatisches HTTPS, Redirect-Regeln über `public/_redirects`.
Automatischer Build und Deployment-Trigger bei jedem Push auf den Hauptbranch.
Cookiefreie, DSGVO-konforme Besucherstatistiken — kein Tracking, keine personenbezogenen Daten.
KI-Einsatz: Teile des Codes wurden KI-gestützt entwickelt — unter anderem für Komponenten-Struktur und Tailwind-Klassen. Jede Zeile wurde nachvollzogen, geprüft und bei Bedarf korrigiert. Konzeption, Architekturentscheidungen und Inhalte stammen vollständig aus eigener Hand.
Privacy by Design
Datenschutz war von Anfang an ein Designziel — nicht nachträglich hinzugefügt.
- Keine Cookies — weder für Analytics noch für Formulare
- Kein Tracking von Besuchern oder Nutzerverhalten
- Alle browserbasierte Tools (z. B. Konverter) verarbeiten Daten lokal — keine Serverübertragung
- Cloudflare Web Analytics: aggregierte Statistiken, Privacy-by-Design
- Formularübermittlung ohne Speicherung personenbezogener Daten auf eigenen Servern
- robots.txt und noindex für rechtliche Seiten (Impressum, Datenschutz)
Rechtliche Grundlage: Cloudflare Web Analytics nach Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse). Vollständige Informationen in der Datenschutzerklärung.
SEO & Social Preview
Technische Herausforderungen
Static Export + dynamische OG-Bilder
Next.js `opengraph-image.tsx` erzeugt beim Build statische Bilddateien mit Content-Hash im Dateinamen. Manuelle `/opengraph-image.png`-Referenzen würden 404 liefern — gelöst durch ausschließliche Nutzung der automatischen Next.js-Erkennung ohne explizite URL-Angaben in Metadaten.
Client-Komponenten und Server-Metadata
Seiten mit `useState` (z.B. Kontaktformular) können kein `metadata`-Export haben. Lösung: Extraktion des interaktiven Teils in eine `"use client"`-Komponente, während die Seitenkomponente als Server Component Metadaten exportiert.
Design-Konsistenz über alle Seiten
Ohne Design-System-Tool: Farbpalette, Abstände und Komponenten-Stil manuell konsistent gehalten. Tailwind-Klassen wurden bewusst standardisiert — z.B. einheitliche `rounded-2xl`, `border-slate-200`, `text-slate-600`.
Redirect-Strategie für umbenannte Seiten
Ältere URL-Pfade (/leistungen, /ueber-uns) werden über `public/_redirects` auf 301-Ebene weitergeleitet — bevor Next.js überhaupt greift. Dadurch keine SEO-Verluste bei Umbenennung.
Learnings
- 1KI-gestützte Entwicklung ist effizient — aber nur, wenn man das Ergebnis kritisch prüft, versteht und verantwortet. Jede Zeile Code wurde nachvollzogen und bei Bedarf korrigiert.
- 2Statische Deployments sind robust und günstig zu betreiben, erfordern aber klare Architekturentscheidungen von Anfang an (z.B. kein Server-Side Rendering, keine dynamischen API-Routes).
- 3SEO ist kein einmaliger Schritt, sondern ein laufender Prozess: Metadaten, strukturierte Daten, Sitemap und Social Preview müssen gepflegt werden.
- 4Privacy by Design ist mehr als ein Rechtsbegriff — es ist eine Designentscheidung, die die gesamte technische Architektur beeinflusst.
- 5Wartbarkeit entscheidet über Langzeitwert: saubere Komponentenstruktur und konsistente Benennung zahlen sich nach wenigen Wochen bereits aus.
Du siehst gerade das Ergebnis.
Diese Seite ist nicht nur Projektbeschreibung — sie ist das Projekt selbst. Alles, was hier steht, wurde umgesetzt, geprüft und läuft live auf heleha.com.