feat: implement project fetching and markdown rendering for enhanced project display

app/components/Projects.tsx

@@ -8,16 +8,24 @@ interface Project {
     id: string;
     title: string;
     description: string;
-    link: string;
+    slug: string;
 }
 
 export default function Projects() {
     const [projects, setProjects] = useState<Project[]>([]);
 
     useEffect(() => {
-        fetch("/data/projects.json")
-            .then((res) => res.json())
-            .then((data) => setProjects(data));
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch('/api/projects');
+                const projectsData = await response.json();
+                setProjects(projectsData);
+            } catch (error) {
+                console.error("Failed to fetch projects:", error);
+            }
+        };
+
+        fetchProjects();
     }, []);
 
     return (
@@ -29,7 +37,7 @@ export default function Projects() {
                 {projects.map((project) => (
                     <Link
                         key={project.id}
-                        href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
+                        href={`/Projects/${project.slug}`}
                         className="cursor-pointer"
                     >
                         <div
@@ -44,9 +52,8 @@ export default function Projects() {
                             </p>
                         </div>
                     </Link>
-
                 ))}
             </div>
         </section>
     );
-}
+}