← Zurück zum Portfolio

johnedmondson.dev v2 — Diese Website

Eine zweisprachige Portfolio- und Schreib-Website auf Next.js-Basis, mit Atomic-Design-Komponentenbibliothek und dateibasiertem CMS.

Die Startseite dieser Website, aufgenommen aus dem aktuellen Build.
Rolle
Design & Engineering
Jahr
2026

Stack

  • Next.js
  • TypeScript
  • Sass/SCSS
  • React

Warum ein Neuaufbau?

Version eins hat ihren Zweck erfüllt, aber mir fehlten drei Dinge: ein echter Ort für längere Texte, sauberer Deutsch/Englisch-Support und eine Komponentenbibliothek, die so organisiert ist, wie ich über Interfaces denke.

Architektur

  • Next.js App Router mit Sprach-Routen (/en, /de) und Cookie-basierter Middleware-Weiterleitung
  • Atomic Design — Atoms, Molecules, Organisms und Templates, jeweils mit eigenen SCSS-Modulen
  • Dateibasiertes CMS — Beiträge sind JSON-Dokumente, bearbeitet über ein lokales /admin-Interface; Veröffentlichen ist ein Git-Commit, die Produktivseite bleibt komplett statisch und ohne Datenbank
  • Ein abhängigkeitsfreier Markdown-Renderer für die Beitragsinhalte

Zwei Arten von Beiträgen

Portfolio-Stücke bekommen ein bildstarkes Template mit einem fixierten Projekt-Steckbrief — Kunde, Rolle, Jahr, Stack, Links. Texte bekommen eine fokussierte, aufs Lesen optimierte Spalte. Gleiches Inhaltsmodell, zwei Darstellungen.