fix: resolve rich text rendering and data mapping issues

Hardened rich text conversion logic to handle malformed Tiptap documents and added null checks for CMS data in About section.

app/components/About.tsx

@@ -118,8 +118,8 @@ const About = () => {
           description="Tools & Technologies"
           header={
             <div className="flex flex-wrap gap-2 p-2 overflow-y-auto max-h-40 scrollbar-hide">
-              {techStack.length > 0 ? (
-                techStack.flatMap(cat => cat.items.map((item: any) => (
+              {techStack && techStack.length > 0 ? (
+                techStack.flatMap(cat => cat.items?.map((item: any) => (
                   <motion.span 
                     key={item.id}
                     whileHover={{ scale: 1.05 }}
@@ -184,7 +184,7 @@ const About = () => {
           description="Beyond the screen"
           header={
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
-              {hobbies.length > 0 ? hobbies.map((hobby, i) => {
+              {hobbies && hobbies.length > 0 ? hobbies.map((hobby, i) => {
                 const Icon = iconMap[hobby.icon] || Lightbulb;
                 return (
                   <motion.div 

lib/richtext.ts

@@ -10,7 +10,23 @@ import Highlight from "@tiptap/extension-highlight";
 import { FontFamily } from "@/lib/tiptap/fontFamily";
 
 export function richTextToSafeHtml(doc: JSONContent): string {
-  const raw = generateHTML(doc, [
+  if (!doc || typeof doc !== "object" || Object.keys(doc).length === 0) {
+    return "";
+  }
+
+  // Ensure type is present to satisfy Tiptap requirement
+  const typedDoc = { ...doc };
+  if (!typedDoc.type) {
+    typedDoc.type = "doc";
+  }
+
+  // Ensure content is an array
+  if (!typedDoc.content) {
+    typedDoc.content = [];
+  }
+
+  try {
+    const raw = generateHTML(typedDoc, [
       StarterKit,
       Underline,
       Link.configure({
@@ -67,5 +83,10 @@ export function richTextToSafeHtml(doc: JSONContent): string {
         },
       },
     });
+  } catch (error) {
+    if (process.env.NODE_ENV === "development") {
+      console.error("Error generating HTML from rich text:", error);
+    }
+    return "";
+  }
 }
-