cv studio Portfolio

Tea Log

Eine performante Webseite, die auf eine Notion-Datenbank aufgebaut wurde – mit redaktionellem Feed, filterbarer Datenbank und kuratierten Detailseiten.

Kunde Tea Log
Link tealog.net
Technologie Astro, Notion API, HTML/CSS, JavaScript
Leistungen Website, Notion-Integration, Feed & Recherche
Über das Projekt

Wer uns kennt, weiß, dass wir gerne Tee trinken. Im Speziellen chinesischen Puerh – und im noch Spezielleren auf die klassische chinesische Art, die Gong Fu Cha heißt. Eine ganz kleine Tonkanne (ca. 100 ml), viele kurze Aufgüsse (10–30 Sekunden), und man hört nur das Rauschen des Wasserkessels über dem Kocher. Ein tägliches Ritual, eine stille Stunde im Tageslauf – der Moment, in dem viele wunderbare Inspirationen entstehen. Eine davon war, die Notizen über die vielen Tees, die wir bereits probiert haben, mit anderen Menschen zu teilen. Denn es ist gar nicht so einfach, hier in Europa an wirklich hochwertigen Tee zu kommen, wenn man die Regionen und Produzenten noch nicht kennt.

Funktionen im Detail

Notion-Inhalte als eigene Web-Oberfläche

Die Oberfläche ist bewusst reduziert: wenig Navigation, klare Typografie, schnelle Ladezeiten – trotzdem durchsuchbar, mit Detailseiten und teilbaren Filter-URLs. Technisch stützt sich alles auf eine Notion-Datenbank: Einträge in der App pflegen, Astro zieht per API und baut die öffentliche Seite regelmäßig neu. Wer Notion schon nutzt, bekommt damit eine eigene Web-Marke – ohne Inhalte doppelt zu pflegen.

  1. Start / Log

    Redaktioneller Feed statt statischer Startseite

    Statt klassischer Navigation wechseln Besucher:innen zwischen einem chronologischen Log und einer strukturierten Browse-Ansicht – beide gespeist aus derselben Notion-Datenbank.

    Tea Log – Log-Feed mit Browse-Umschaltung
    Log-Feed mit Umschaltung zwischen Feed und Browse
  2. Browse / Datenbank

    Filterbare Recherche-Oberfläche

    Die Browse-Ansicht macht aus der Notion-Datenbank eine durchsuchbare Sammlung – mit Filtern, Sortierung und URL-Zuständen, die sich teilen und wiederherstellen lassen.

    Tea Log – Browse-Ansicht mit Filtern und Teekarten
    Browse-Ansicht mit Suche, Filtern und Teekarten
  3. Detailseite

    Kuratierte Einzelseiten aus Notion

    Jeder Tee erhält eine eigene Detailseite – mit Hero-Bild, strukturierten Notion-Feldern und Inhalten, die gezielt für die Web-Lesbarkeit aufbereitet sind.

    Tea Log – Detailseite mit Hero-Bild und Sidebar
    Detailseite mit kuratiertem Content und Metadaten-Sidebar
Ähnliches vorhaben?

Schreib uns.

hello@cv-studio.at