add data explorers to services

Author: nicucalcea

src/data/cv.json

@@ -9252,7 +9252,9 @@
       "startDate": "2025-12-01",
       "endDate": "",
       "description": "OpenLobbying collects, cleans and standardises UK lobbying registers so you can explore how corporations shape policy.",
-      "url": "https://openlobbying.org/"
+      "url": "https://openlobbying.org/",
+      "category": "data-explorer",
+      "img": "openlobbying.gif"
     },
     {
       "name": "OpenMoney.md",
@@ -9262,7 +9264,9 @@
       "highlights": [
         "Open data platform for transparency in Moldova"
       ],
-      "url": "https://openmoney.md/"
+      "url": "https://openmoney.md/",
+      "category": "data-explorer",
+      "img": "openmoney.gif"
     },
     {
       "name": "Augmenta",

src/data/img/openlobbying.gif

@@ -26,6 +26,11 @@
     category: "interactive";
     img?: string;
   };
+  type Project = (typeof cvData.projects)[number];
+  type DataExplorerProject = Project & {
+    category: "data-explorer";
+    img?: string;
+  };
   type ImageModule = { default: string };
 
   const articleImages = import.meta.glob("../../../../data/img/*", {
@@ -40,6 +45,10 @@
     (publication): publication is InteractivePublication =>
       publication.category === "interactive",
   );
+  const dataExplorers = cvData.projects.filter(
+    (project): project is DataExplorerProject =>
+      project.category === "data-explorer",
+  );
 
   const getArticleImage = (imageName?: string) =>
     imageName ? (articleImages[`../../../../data/img/${imageName}`]?.default ?? "") : "";
@@ -77,6 +86,16 @@
         }) satisfies ImageCardData,
     ),
   );
+  const dataExplorerCards = $derived(
+    dataExplorers.map(
+      (project) =>
+        ({
+          title: project.name,
+          image: getArticleImage(project.img),
+          href: project.url,
+        }) satisfies ImageCardData,
+    ),
+  );
 </script>
 
 <section class="work section-block-tight" id="work">
@@ -98,7 +117,15 @@
         <ImageCard {card} />
       {/each}
 
-      <ServiceCard card={serviceCards[2]} />
+      <ServiceCard card={serviceCards[3]} />
+
+      <div class="span-2">
+        <ServiceCard card={serviceCards[2]} large />
+      </div>
+
+      {#each dataExplorerCards as card}
+        <ImageCard {card} />
+      {/each}
     </div>
   </div>
 </section>

src/data/img/openmoney.gif

@@ -2,16 +2,30 @@
   import {
     ArrowRight,
     ChartNoAxesCombined,
+    Database,
     FileSearch,
     GraduationCap,
   } from "@lucide/svelte";
   import type { ServiceCardData } from "$lib/data/site";
   import CardShell from "./CardShell.svelte";
 
+  type ServiceCardIcon =
+    | "file-search"
+    | "chart-no-axes-combined"
+    | "database"
+    | "graduation-cap";
+
   let { card, large = false }: { card: ServiceCardData; large?: boolean } =
     $props();
 
   const external = $derived(card.href.startsWith("http"));
+  const iconComponents = {
+    "file-search": FileSearch,
+    "chart-no-axes-combined": ChartNoAxesCombined,
+    database: Database,
+    "graduation-cap": GraduationCap,
+  } satisfies Record<ServiceCardIcon, typeof FileSearch>;
+  const Icon = $derived(iconComponents[card.icon as ServiceCardIcon]);
 </script>
 
 <CardShell
@@ -24,13 +38,7 @@
 >
   <div class="content">
     <div>
-      {#if card.icon === "file-search"}
-        <FileSearch size={36} class="icon" />
-      {:else if card.icon === "chart-no-axes-combined"}
-        <ChartNoAxesCombined size={36} class="icon" />
-      {:else}
-        <GraduationCap size={36} class="icon" />
-      {/if}
+      <Icon size={36} class="icon" />
       <h3>{card.title}</h3>
       <p>{card.description}</p>
     </div>

src/lib/components/sections/home/HomeWork.svelte

@@ -8,7 +8,11 @@ export type NavItem = {
 export type ServiceCardData = {
   title: string;
   description: string;
-  icon: "file-search" | "chart-no-axes-combined" | "graduation-cap";
+  icon:
+    | "file-search"
+    | "chart-no-axes-combined"
+    | "database"
+    | "graduation-cap";
   href: string;
   variant?: "accent";
   label?: string;

src/lib/components/ui/cards/ServiceCard.svelte

@@ -73,6 +73,13 @@ export const enMessages: LocaleMessages = {
         icon: "chart-no-axes-combined",
         cta: "Let's talk about your vision",
       },
+      {
+        title: "Data explorers",
+        description:
+          "Searchable databases and public-interest lookup tools that turn messy records into something people can actually use.",
+        icon: "database",
+        cta: "Plan a data product",
+      },
       {
         title: "Training",
         description:

src/lib/data/site.ts

@@ -74,6 +74,13 @@ export const roMessages: LocaleMessages = {
         icon: "chart-no-axes-combined",
         cta: "Hai sa discutam despre viziunea ta",
       },
+      {
+        title: "Exploratoare de date",
+        description:
+          "Baze de date cautabile si instrumente de consultare de interes public care transforma registre haotice in produse utile.",
+        icon: "database",
+        cta: "Planifica un produs de date",
+      },
       {
         title: "Training",
         description: