feat: Add book ratings and reviews managed via Directus CMS

Adds a new "Read Books" section below "Currently Reading" in the About
page. Book reviews with star ratings and comments are fetched from a
Directus CMS collection (book_reviews) and displayed with the existing
liquid design system. Includes i18n support (EN/DE), show more/less
toggle, and graceful fallback when the CMS collection does not exist yet.

https://claude.ai/code/session_017E8W9CcHFM5WQVHw74JP34

app/api/book-reviews/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getBookReviews } from '@/lib/directus';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+/**
+ * GET /api/book-reviews
+ *
+ * Loads Book Reviews from Directus CMS
+ *
+ * Query params:
+ *   - locale: en or de (default: en)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const locale = searchParams.get('locale') || 'en';
+
+    const reviews = await getBookReviews(locale);
+
+    if (reviews && reviews.length > 0) {
+      return NextResponse.json({
+        bookReviews: reviews,
+        source: 'directus'
+      });
+    }
+
+    return NextResponse.json({
+      bookReviews: null,
+      source: 'fallback'
+    });
+
+  } catch (error) {
+    console.error('Error loading book reviews:', error);
+    return NextResponse.json(
+      {
+        bookReviews: null,
+        error: 'Failed to load book reviews',
+        source: 'error'
+      },
+      { status: 500 }
+    );
+  }
+}

app/components/About.tsx

@@ -7,6 +7,7 @@ import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 import CurrentlyReading from "./CurrentlyReading";
+import ReadBooks from "./ReadBooks";
 
 // Type definitions for CMS data
 interface TechStackItem {
@@ -389,6 +390,14 @@ const About = () => {
             >
               <CurrentlyReading />
             </motion.div>
+
+            {/* Read Books with Ratings */}
+            <motion.div
+              variants={fadeInUp}
+              className="mt-6"
+            >
+              <ReadBooks />
+            </motion.div>
           </motion.div>
         </div>
       </div>

app/components/ReadBooks.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
+
+interface BookReview {
+  id: string;
+  hardcover_id?: string;
+  book_title: string;
+  book_author: string;
+  book_image?: string;
+  rating: number;
+  review?: string;
+  finished_at?: string;
+}
+
+const StarRating = ({ rating }: { rating: number }) => {
+  return (
+    <div className="flex gap-0.5">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <Star
+          key={star}
+          size={14}
+          className={
+            star <= rating
+              ? "text-amber-500 fill-amber-500"
+              : "text-stone-300"
+          }
+        />
+      ))}
+    </div>
+  );
+};
+
+const ReadBooks = () => {
+  const locale = useLocale();
+  const t = useTranslations("home.about.readBooks");
+  const [reviews, setReviews] = useState<BookReview[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState(false);
+
+  const INITIAL_SHOW = 3;
+
+  useEffect(() => {
+    const fetchReviews = async () => {
+      try {
+        const res = await fetch(
+          `/api/book-reviews?locale=${encodeURIComponent(locale)}`,
+          { cache: "default" }
+        );
+
+        if (!res.ok) {
+          throw new Error("Failed to fetch");
+        }
+
+        const data = await res.json();
+        if (data.bookReviews) {
+          setReviews(data.bookReviews);
+        } else {
+          setReviews([]);
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV === "development") {
+          console.error("Error fetching book reviews:", error);
+        }
+        setReviews([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchReviews();
+  }, [locale]);
+
+  if (loading || reviews.length === 0) {
+    return null;
+  }
+
+  const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW);
+  const hasMore = reviews.length > INITIAL_SHOW;
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-4">
+        <BookCheck size={18} className="text-stone-600 flex-shrink-0" />
+        <h3 className="text-lg font-bold text-stone-900">
+          {t("title")} ({reviews.length})
+        </h3>
+      </div>
+
+      {/* Book Reviews */}
+      {visibleReviews.map((review, index) => (
+        <motion.div
+          key={review.id}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{
+            duration: 0.6,
+            delay: index * 0.1,
+            ease: [0.25, 0.1, 0.25, 1],
+          }}
+          whileHover={{
+            scale: 1.02,
+            transition: { duration: 0.4, ease: "easeOut" },
+          }}
+          className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-teal/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm hover:border-liquid-mint/50 hover:from-liquid-mint/20 hover:via-liquid-sky/15 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
+        >
+          {/* Background Blob */}
+          <motion.div
+            className="absolute -bottom-8 -left-8 w-28 h-28 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 rounded-full blur-2xl"
+            animate={{
+              scale: [1, 1.15, 1],
+              opacity: [0.3, 0.45, 0.3],
+            }}
+            transition={{
+              duration: 8,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: index * 0.5,
+            }}
+          />
+
+          <div className="relative z-10 flex flex-col sm:flex-row gap-4 items-start">
+            {/* Book Cover */}
+            {review.book_image && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
+                className="flex-shrink-0"
+              >
+                <div className="relative w-20 h-30 sm:w-22 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
+                  <img
+                    src={review.book_image}
+                    alt={review.book_title}
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
+                </div>
+              </motion.div>
+            )}
+
+            {/* Book Info */}
+            <div className="flex-1 min-w-0">
+              <h4 className="text-base font-bold text-stone-900 mb-0.5 line-clamp-2">
+                {review.book_title}
+              </h4>
+              <p className="text-sm text-stone-600 mb-2 line-clamp-1">
+                {review.book_author}
+              </p>
+
+              {/* Rating */}
+              <div className="flex items-center gap-2 mb-2">
+                <StarRating rating={review.rating} />
+                <span className="text-xs text-stone-500 font-medium">
+                  {review.rating}/5
+                </span>
+              </div>
+
+              {/* Review Text */}
+              {review.review && (
+                <p className="text-sm text-stone-700 leading-relaxed line-clamp-3 italic">
+                  &ldquo;{review.review}&rdquo;
+                </p>
+              )}
+
+              {/* Finished Date */}
+              {review.finished_at && (
+                <p className="text-xs text-stone-400 mt-2">
+                  {t("finishedAt")}{" "}
+                  {new Date(review.finished_at).toLocaleDateString(
+                    locale === "de" ? "de-DE" : "en-US",
+                    { year: "numeric", month: "short" }
+                  )}
+                </p>
+              )}
+            </div>
+          </div>
+        </motion.div>
+      ))}
+
+      {/* Show More / Show Less */}
+      {hasMore && (
+        <motion.button
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          onClick={() => setExpanded(!expanded)}
+          className="w-full flex items-center justify-center gap-1.5 py-2.5 text-sm font-medium text-stone-600 hover:text-stone-800 rounded-lg border-2 border-dashed border-stone-200 hover:border-stone-300 transition-colors duration-300"
+        >
+          {expanded ? (
+            <>
+              {t("showLess")} <ChevronUp size={16} />
+            </>
+          ) : (
+            <>
+              {t("showMore", { count: reviews.length - INITIAL_SHOW })}{" "}
+              <ChevronDown size={16} />
+            </>
+          )}
+        </motion.button>
+      )}
+    </div>
+  );
+};
+
+export default ReadBooks;

lib/directus.ts

@@ -422,6 +422,71 @@ export async function getHobbies(locale: string): Promise<Hobby[] | null> {
   }
 }
 
+// Book Review Types
+export interface BookReview {
+  id: string;
+  hardcover_id?: string;
+  book_title: string;
+  book_author: string;
+  book_image?: string;
+  rating: number; // 1-5
+  review?: string; // Translated review text
+  finished_at?: string;
+}
+
+/**
+ * Get Book Reviews from Directus with translations
+ */
+export async function getBookReviews(locale: string): Promise<BookReview[] | null> {
+  const directusLocale = toDirectusLocale(locale);
+
+  const query = `
+    query {
+      book_reviews(
+        filter: { status: { _eq: "published" } }
+        sort: ["-finished_at", "-date_created"]
+      ) {
+        id
+        hardcover_id
+        book_title
+        book_author
+        book_image
+        rating
+        finished_at
+        translations(filter: { languages_code: { code: { _eq: "${directusLocale}" } } }) {
+          review
+        }
+      }
+    }
+  `;
+
+  try {
+    const result = await directusRequest(
+      '',
+      { body: { query } }
+    );
+
+    const reviews = (result as any)?.book_reviews;
+    if (!reviews || reviews.length === 0) {
+      return null;
+    }
+
+    return reviews.map((item: any) => ({
+      id: item.id,
+      hardcover_id: item.hardcover_id || undefined,
+      book_title: item.book_title,
+      book_author: item.book_author,
+      book_image: item.book_image || undefined,
+      rating: typeof item.rating === 'number' ? item.rating : parseInt(item.rating) || 0,
+      review: item.translations?.[0]?.review || undefined,
+      finished_at: item.finished_at || undefined,
+    }));
+  } catch (error) {
+    console.error(`Failed to fetch book reviews (${locale}):`, error);
+    return null;
+  }
+}
+
 // Projects Types
 export interface Project {
   id: string;

messages/de.json

@@ -63,6 +63,12 @@
       "currentlyReading": {
         "title": "Aktuell am Lesen",
         "progress": "Fortschritt"
+      },
+      "readBooks": {
+        "title": "Gelesen",
+        "finishedAt": "Beendet",
+        "showMore": "{count} weitere",
+        "showLess": "Weniger anzeigen"
       }
     },
     "projects": {

messages/en.json

@@ -64,6 +64,12 @@
       "currentlyReading": {
         "title": "Currently Reading",
         "progress": "Progress"
+      },
+      "readBooks": {
+        "title": "Read",
+        "finishedAt": "Finished",
+        "showMore": "{count} more",
+        "showLess": "Show less"
       }
     },
     "projects": {