Aa
#F7F4F0
#F0EDE8
#E4DFD8
#9E9890
#181614
Web · Design · Code
2026

Portfolio Website

Konzeption und Umsetzung meiner eigenen Portfolio-Website. Von der Interaktionslogik über das Cursor-System bis zur Typografie — alles selbst gebaut.

Diese Website habe ich von Grund auf selbst konzipiert und umgesetzt — Design, Interaktionslogik und Code. Die Programmierung erfolgte mithilfe von KI (Claude Code), was schnelles Prototyping und iterative Verbesserung ermöglichte. Die Entscheidungen dahinter, was gebaut wird, wie es sich anfühlt, was weggelassen wird, sind alle meine eigenen.

Stack

  • Next.js 14 — App Router, statische Generierung für Projektseiten
  • TypeScript — durchgehend typsicher
  • Tailwind CSS v3 — eigene Design-Tokens, fluide Typskala
  • Framer Motion v11 — Spring-Physics, AnimatePresence, useScroll

Interaktion

  • Magnetische Buttons mit Falloff-Mathematik
  • Kontextsensitiver Cursor (default, hover-text, hover-card)
  • Scroll-Fortschrittsbalken mit Spring-Glättung
  • Abschnittsindikator mit IntersectionObserver

Design

Warmes Off-White (#F7F4F0) als Basis, Near-Black (#181614) als Text. Plus Jakarta Sans. Keine ablenkenden Effekte — Inhalt first.

Next.jsTypeScriptTailwind CSSFramer MotionSelbst gebautKI-unterstützt