fix: cleanup book reviews HTML and improve about layout

Stripped HTML tags from book reviews, added a grid layout for About section on desktop, and fixed hobby icon mapping.

app/api/book-reviews/route.ts

@@ -26,6 +26,10 @@ export async function GET(request: NextRequest) {
 
     const reviews = await getBookReviews(locale);
     
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`[API] Book Reviews geladen für ${locale}:`, reviews?.length || 0);
+    }
+
     if (reviews && reviews.length > 0) {
       return NextResponse.json({
         bookReviews: reviews,

app/components/About.tsx

@@ -160,7 +160,8 @@ const About = () => {
     Shield,
     Activity,
     Lightbulb,
-    Gamepad2
+    Gamepad2,
+    Gamepad
   };
 
   // Fallback Hobbies
@@ -296,7 +297,7 @@ const About = () => {
               >
                 {t("techStackTitle")}
               </motion.h3>
-              <div className="grid grid-cols-1 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 {techStack.map((stack, idx) => (
                   <motion.div
                     key={`${stack.category}-${idx}`}
@@ -346,8 +347,10 @@ const About = () => {
               </div>
             </div>
 
-            {/* Hobbies */}
+            {/* Hobbies & Reading Grid */}
-            <div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* Hobbies Column */}
+              <div className="space-y-6">
                 <motion.h3
                   variants={fadeInUp}
                   className="text-xl font-bold text-stone-900 mb-4"
@@ -383,21 +386,19 @@ const About = () => {
                 </div>
               </div>
 
+              {/* Reading Column */}
+              <div className="space-y-6">
                 {/* Currently Reading */}
-            <motion.div
+                <motion.div variants={fadeInUp}>
-              variants={fadeInUp}
-              className="mt-8"
-            >
                   <CurrentlyReading />
                 </motion.div>
 
-            {/* Read Books with Ratings */}
+                {/* Read Books */}
-            <motion.div
+                <motion.div variants={fadeInUp}>
-              variants={fadeInUp}
-              className="mt-6"
-            >
                   <ReadBooks />
                 </motion.div>
+              </div>
+            </div>
           </motion.div>
         </div>
       </div>

app/components/ReadBooks.tsx

@@ -35,6 +35,12 @@ const StarRating = ({ rating }: { rating: number }) => {
   );
 };
 
+const stripHtml = (html: string) => {
+  if (typeof window === 'undefined') return html; // Fallback for SSR
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  return doc.body.textContent || "";
+};
+
 const ReadBooks = () => {
   const locale = useLocale();
   const t = useTranslations("home.about.readBooks");
@@ -75,8 +81,12 @@ const ReadBooks = () => {
     fetchReviews();
   }, [locale]);
 
-  if (loading || reviews.length === 0) {
+  if (loading) {
-    return null;
+    return <div className="text-stone-400 text-sm animate-pulse">Lade Buch-Bewertungen...</div>;
+  }
+
+  if (reviews.length === 0) {
+    return null; // Hier kannst du temporär "Keine Bücher gefunden" reinschreiben zum Testen
   }
 
   const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW);
@@ -169,7 +179,7 @@ const ReadBooks = () => {
               {/* Review Text (Optional) */}
               {review.review && (
                 <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
-                  &ldquo;{review.review}&rdquo;
+                  &ldquo;{stripHtml(review.review)}&rdquo;
                 </p>
               )}
 

lib/directus.ts

@@ -444,7 +444,7 @@ export async function getBookReviews(locale: string): Promise<BookReview[] | nul
     query {
       book_reviews(
         filter: { status: { _eq: "published" } }
-        sort: ["-finished_at", "-date_created"]
+        sort: ["-finished_at"]
       ) {
         id
         hardcover_id