update

app/projects/[slug]/page.tsx

@@ -25,18 +25,25 @@ const ProjectDetail = () => {
   const slug = params.slug as string;
   const [project, setProject] = useState<Project | null>(null);
 
-  // Load project from localStorage by slug
+  // Load project from API by slug
   useEffect(() => {
-    const savedProjects = localStorage.getItem('portfolio-projects');
-    if (savedProjects) {
-      const projects = JSON.parse(savedProjects);
-      const foundProject = projects.find((p: Project) => 
-        p.title.toLowerCase().replace(/[^a-z0-9]+/g, '-') === slug
-      );
-      if (foundProject) {
-        setProject(foundProject);
+    const loadProject = async () => {
+      try {
+        const response = await fetch(`/api/projects/search?slug=${slug}`);
+        if (response.ok) {
+          const data = await response.json();
+          if (data.projects && data.projects.length > 0) {
+            setProject(data.projects[0]);
+          }
+        } else {
+          console.error('Failed to fetch project from API');
+        }
+      } catch (error) {
+        console.error('Error loading project:', error);
       }
-    }
+    };
+
+    loadProject();
   }, [slug]);
 
   if (!project) {