feat: Add Directus setup scripts for collections, fields, and relations

- Created setup-directus-collections.js to automate the creation of tech stack collections, fields, and relations in Directus.
- Created setup-directus-hobbies.js for setting up hobbies collection with translations.
- Created setup-directus-projects.js for establishing projects collection with comprehensive fields and translations.
- Added setup-tech-stack-directus.js to populate tech_stack_items with predefined data.

app/components/About.tsx

@@ -35,6 +35,8 @@ const About = () => {
   const locale = useLocale();
   const t = useTranslations("home.about");
   const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
+  const [techStackFromCMS, setTechStackFromCMS] = useState<any[] | null>(null);
+  const [hobbiesFromCMS, setHobbiesFromCMS] = useState<any[] | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -56,36 +58,110 @@ const About = () => {
     })();
   }, [locale]);
 
-  const techStack = [
+  // Load Tech Stack from Directus
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(`/api/tech-stack?locale=${encodeURIComponent(locale)}`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data?.techStack && data.techStack.length > 0) {
+            setTechStackFromCMS(data.techStack);
+          }
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV === 'development') {
+          console.log('Tech Stack from Directus not available, using fallback');
+        }
+      }
+    })();
+  }, [locale]);
+
+  // Load Hobbies from Directus
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(`/api/hobbies?locale=${encodeURIComponent(locale)}`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data?.hobbies && data.hobbies.length > 0) {
+            setHobbiesFromCMS(data.hobbies);
+          }
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV === 'development') {
+          console.log('Hobbies from Directus not available, using fallback');
+        }
+      }
+    })();
+  }, [locale]);
+
+  // Fallback Tech Stack (from messages/en.json, messages/de.json)
+  const techStackFallback = [
     {
+      key: 'frontend',
       category: t("techStack.categories.frontendMobile"),
       icon: Globe,
       items: ["Next.js", "Tailwind CSS", "Flutter"],
     },
     {
+      key: 'backend',
       category: t("techStack.categories.backendDevops"),
       icon: Server,
       items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
     },
     {
+      key: 'tools',
       category: t("techStack.categories.toolsAutomation"),
       icon: Wrench,
       items: ["Git", "CI/CD", "n8n", t("techStack.items.selfHostedServices")],
     },
     {
+      key: 'security',
       category: t("techStack.categories.securityAdmin"),
       icon: Shield,
       items: ["CrowdSec", "Suricata", "Mailcow"],
     },
   ];
 
-  const hobbies: Array<{ icon: typeof Code; text: string }> = [
+  // Map icon names from Directus to Lucide components
+  const iconMap: Record<string, any> = {
+    Globe,
+    Server,
+    Code,
+    Wrench,
+    Shield,
+    Activity,
+    Lightbulb,
+    Gamepad2
+  };
+
+  // Fallback Hobbies
+  const hobbiesFallback: Array<{ icon: typeof Code; text: string }> = [
     { icon: Code, text: t("hobbies.selfHosting") },
     { icon: Gamepad2, text: t("hobbies.gaming") },
     { icon: Server, text: t("hobbies.gameServers") },
     { icon: Activity, text: t("hobbies.jogging") },
   ];
 
+  // Use CMS Hobbies if available, otherwise fallback
+  const hobbies = hobbiesFromCMS 
+    ? hobbiesFromCMS.map((hobby: any) => ({
+        icon: iconMap[hobby.icon] || Code,
+        text: hobby.title
+      }))
+    : hobbiesFallback;
+
+  // Use CMS Tech Stack if available, otherwise fallback
+  const techStack = techStackFromCMS 
+    ? techStackFromCMS.map((cat: any) => ({
+        key: cat.key,
+        category: cat.name,
+        icon: iconMap[cat.icon] || Code,
+        items: cat.items.map((item: any) => item.name)
+      }))
+    : techStackFallback;
+
   return (
     <section
       id="about"