feat: major UI/UX overhaul, snippets system, and performance fixes

app/[locale]/projects/page.tsx

@@ -46,29 +46,34 @@ export default async function ProjectsPage({
     if (fetched) {
       directusProjects = fetched.map(p => ({
         ...p,
-        id: parseInt(p.id) || 0,
+        id: typeof p.id === 'string' ? (parseInt(p.id) || 0) : p.id,
       })) as ProjectListItem[];
     }
   } catch (err) {
     console.error("Directus projects fetch failed:", err);
   }
 
-  const localizedDb = dbProjects.map((p) => {
+  const localizedDb: ProjectListItem[] = dbProjects.map((p) => {
     const trPreferred = p.translations?.find((t) => t.locale === locale && (t?.title || t?.description));
     const trDefault = p.translations?.find(
       (t) => t.locale === p.defaultLocale && (t?.title || t?.description),
     );
     const tr = trPreferred ?? trDefault;
-    const { translations: _translations, ...rest } = p;
     return {
-      ...rest,
+      id: p.id,
+      slug: p.slug,
       title: tr?.title ?? p.title,
       description: tr?.description ?? p.description,
+      tags: p.tags,
+      category: p.category,
+      date: p.date,
+      createdAt: p.createdAt.toISOString(),
+      imageUrl: p.imageUrl,
     };
   });
 
   // Merge projects, prioritizing DB ones if slugs match
-  const allProjects: any[] = [...localizedDb];
+  const allProjects: ProjectListItem[] = [...localizedDb];
   const dbSlugs = new Set(localizedDb.map(p => p.slug));
   
   for (const dp of directusProjects) {