feat: update dependencies and enhance privacy policy

Replace "@vercel/analytics" with "@tryghost/content-api" and add 
"node-fetch" to dependencies. Remove "@vercel/speed-insights" to 
streamline the package. Update robots.txt to dis access to 
"/legal-notice" and "/privacy-policy". Change <p> tags to <div> in 
the Privacy Policy for better structure. Update the last modified 
date in the Legal Notice. Add a new API route for fetching images 
with error handling for missing URL parameters.

app/components/Hero.tsx

@@ -1,48 +1,52 @@
 // app/components/Hero.tsx
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 
 export default function Hero() {
-    const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
 
-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 150); // Delay to start the animation
-    }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 150); // Delay to start the animation
+  }, []);
 
-    return (
-        <div id="about"
-             className={`flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
-            <div
-                className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
-                <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
-                    Hi, I’m Dennis
-                </h1>
-                <h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
-                    Student & Software Engineer
-                </h2>
-                <h3 className="mt-1 text-lg md:text-xl text-gray-600">
-                    Based in Osnabrück, Germany
-                </h3>
-                <p className="mt-6 text-gray-800 text-lg leading-relaxed">
-                    Passionate about technology, coding, and solving real-world problems.
-                    I enjoy building innovative solutions and continuously expanding my knowledge.
-                </p>
-                <p className="mt-4 text-gray-700 text-base">
-                    Currently working on exciting projects that merge creativity with functionality.
-                    Always eager to learn and collaborate!
-                </p>
-            </div>
-            <div className="flex mt-8 md:mt-0 md:ml-12">
-                <Image
-                    src="/images/me.jpg"
-                    alt="Image of Dennis"
-                    width={400}
-                    height={400}
-                    className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
-                />
-            </div>
-        </div>
-    );
-}
+  return (
+    <div
+      id="about"
+      className={`flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
+        <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
+          Hi, I’m Dennis
+        </h1>
+        <h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
+          Student & Software Engineer
+        </h2>
+        <h3 className="mt-1 text-lg md:text-xl text-gray-600">
+          Based in Osnabrück, Germany
+        </h3>
+        <p className="mt-6 text-gray-800 text-lg leading-relaxed">
+          Passionate about technology, coding, and solving real-world problems.
+          I enjoy building innovative solutions and continuously expanding my
+          knowledge.
+        </p>
+        <p className="mt-4 text-gray-700 text-base">
+          Currently working on exciting projects that merge creativity with
+          functionality. Always eager to learn and collaborate!
+        </p>
+      </div>
+      <div className="flex mt-8 md:mt-0 md:ml-12">
+        <Image
+          src="/images/me.jpg"
+          alt="Image of Dennis"
+          width={400}
+          height={400}
+          className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
+          priority={true}
+          style={{ width: "auto", height: "400px" }}
+        />
+      </div>
+    </div>
+  );
+}

app/components/Projects.tsx

@@ -1,70 +1,81 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 
 interface Project {
-    id: string;
-    title: string;
-    description: string;
-    slug: string;
+  slug: string;
+  id: string;
+  title: string;
+  feature_image: string;
+  visibility: string;
+  published_at: string;
+  updated_at: string;
+  html: string;
+  reading_time: number;
+  meta_description: string;
 }
 
 export default function Projects() {
-    const [projects, setProjects] = useState<Project[]>([]);
-    const [isVisible, setIsVisible] = useState(false);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
 
-    useEffect(() => {
-        const fetchProjects = async () => {
-            try {
-                const response = await fetch('/api/projects');
-                try {
-                    if (!response.ok) {
-                        throw new Error("Failed to fetch projects");
-                    }
-                } catch (error) {
-                    console.error("Failed to fetch projects:", error);
-                }
-                const projectsData = await response.json();
-                setProjects(projectsData);
-                setTimeout(() => {
-                    setIsVisible(true);
-                }, 250); // Delay to start the animation after Hero
-            } catch (error) {
-                console.error("Failed to fetch projects:", error);
-            }
-        };
-        fetchProjects().then(r => r);
-    }, []);
-    const numberOfProjects = projects.length;
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const response = await fetch("/api/fetchAllProjects");
+        if (!response.ok) {
+          throw new Error("Failed to fetch projects from Ghost");
+        }
+        const projectsData = await response.json();
+        setProjects(projectsData.posts);
 
-    return (
-        <section id="projects" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
-            <h2 className="text-3xl font-bold text-center text-gray-800">
-                Projects
-            </h2>
-            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-                {projects.map((project, index) => (
-                    <Link key={project.id} href={`/Projects/${project.slug}`} className="cursor-pointer">
-                        <div className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-                             style={{animationDelay: `${index * 0.1}s`}}>
-                            <h3 className="text-2xl font-bold text-gray-800">
-                                {project.title}
-                            </h3>
-                            <p className="mt-2 text-gray-500">
-                                {project.description}
-                            </p>
-                        </div>
-                    </Link>
-                ))}
-                <div className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-                     style={{animationDelay: `${(numberOfProjects + 1) * 0.1}s`}}>
-                    <h3 className="text-2xl font-bold text-gray-800">
-                        More to come
-                    </h3>
-                    <p className="mt-2 text-gray-500">
-                        ...
-                    </p>
-                </div>
+        setTimeout(() => {
+          setIsVisible(true);
+        }, 250); // Delay to start the animation after Hero
+      } catch (error) {
+        console.error("Failed to fetch projects:", error);
+      }
+    };
+    fetchProjects();
+  }, []);
+
+  console.log(projects.at(0)?.feature_image);
+
+  const numberOfProjects = projects.length;
+  return (
+    <section
+      id="projects"
+      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+        {projects.map((project, index) => (
+          <Link
+            key={project.id}
+            href={{
+              pathname: `/Projects/${project.slug}`,
+              query: { project: JSON.stringify(project) },
+            }}
+            className="cursor-pointer"
+          >
+            <div
+              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+              style={{ animationDelay: `${index * 0.1}s` }}
+            >
+              <h3 className="text-2xl font-bold text-gray-800">
+                {project.title}
+              </h3>
+              <p className="mt-2 text-gray-500">{project.meta_description}</p>
             </div>
-        </section>
-    );
-}
+          </Link>
+        ))}
+        <div
+          className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+          style={{ animationDelay: `${(numberOfProjects + 1) * 0.1}s` }}
+        >
+          <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
+          <p className="mt-2 text-gray-500">...</p>
+        </div>
+      </div>
+    </section>
+  );
+}