backend/public/src/datasources/projects.rs

@@ -1,4 +1,4 @@
-use sqlx::{FromRow, Pool, Postgres, Row};
+use sqlx::{Pool, Postgres};
 
 use crate::routes::projects::Project;
 
@@ -7,7 +7,7 @@ impl ProjectsDatasource {
     pub async fn get_all(pool: &Pool<Postgres>) -> Result<Vec<Project>, sqlx::Error> {
         sqlx::query_as!(
             Project,
-            "SELECT project_id, title, repo, summary, tech, wip, created_at FROM projects p WHERE deleted_at IS NULL ORDER BY p.created_at DESC"
+            "SELECT project_id, title, repo, summary, description, tech, wip, created_at FROM projects p WHERE deleted_at IS NULL ORDER BY p.created_at DESC"
         )
         .fetch_all(pool)
         .await

backend/public/src/routes/projects.rs

@@ -9,6 +9,7 @@ pub struct Project {
     pub title: String,
     pub repo: Option<String>,
     pub summary: String,
+    pub description: Option<String>,
     pub tech: String,
     pub wip: Option<bool>,
     #[serde(serialize_with = "serialize_datetime")]
@@ -66,5 +67,3 @@ impl ProjectsRoute {
         }
     }
 }
-
-

flake.nix

@@ -76,8 +76,10 @@
           RUST_BACKTRACE = "1";
           RUST_SRC_PATH = "${pkgs.rustToolchain}/lib/rustlib/src/rust/library";
           PKG_CONFIG_PATH = "${pkgs.openssl.dev}/lib/pkgconfig";
-          # ZELLIJ_CONFIG_FILE = "config.kdl";
-          # PATH = "$PATH:$HOME/.local/share/nvim/mason/bin/deno";
+          NIX_LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath [
+            pkgs.stdenv.cc.cc
+          ];
+          NIX_LD = pkgs.lib.fileContents "${pkgs.stdenv.cc}/nix-support/dynamic-linker";
         };
       };
     });

frontend/Dockerfile

@@ -4,10 +4,10 @@ RUN apk add bash
 
 # USER deno
 
-RUN deno cache --reload deno.json
-
 COPY . .
 
+RUN deno cache --reload deno.json
+
 RUN bash -c 'deno cache main.ts'
 
 RUN bash -c 'deno task build'

frontend/fresh.gen.ts

@@ -15,7 +15,9 @@ import * as $projects_index from "./routes/projects/index.tsx";
 import * as $rss_index from "./routes/rss/index.tsx";
 import * as $sitemap_index from "./routes/sitemap/index.tsx";
 import * as $Counter from "./islands/Counter.tsx";
+import * as $Portal from "./islands/Portal.tsx";
 import * as $ProjectCard from "./islands/ProjectCard.tsx";
+import * as $ProjectModal from "./islands/ProjectModal.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -35,7 +37,9 @@ const manifest = {
   },
   islands: {
     "./islands/Counter.tsx": $Counter,
+    "./islands/Portal.tsx": $Portal,
     "./islands/ProjectCard.tsx": $ProjectCard,
+    "./islands/ProjectModal.tsx": $ProjectModal,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

frontend/islands/Portal.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import type { ComponentChildren } from "preact";
+
+type PortalProps = {
+  into?: string | HTMLElement;
+  children: ComponentChildren;
+};
+
+export function Portal({ into = "body", children }: PortalProps) {
+  const [host, setHost] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    let target: HTMLElement | null = null;
+    if (typeof into === "string") {
+      target = into === "body" ? document.body : document.querySelector(into);
+    } else {
+      target = into;
+    }
+
+    if (!target) target = document.body;
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "preact-portal-root";
+    target.appendChild(wrapper);
+    setHost(wrapper);
+
+    return () => {
+      if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+      setHost(null);
+    };
+  }, [into]);
+
+  if (!host) return null;
+  return createPortal(children, host);
+}

frontend/islands/ProjectCard.tsx

@@ -1,4 +1,20 @@
+import { useState } from "preact/hooks";
+import { Portal } from "./Portal.tsx";
+import { type ModalAction, ProjectModal } from "./ProjectModal.tsx";
+
 export const ProjectCard = function ProjectCard(props: ProjectProps) {
+  const [open, setOpen] = useState(false);
+
+  const modalButtons: Array<ModalAction> = [
+    {
+      label: "Open repository",
+      onClick: () => {
+        if (props.repo) globalThis.open(props.repo, "_blank");
+      },
+      variant: "primary",
+    },
+  ];
+
   return (
     <div
       class={`md:m-8 group space-y-1 rounded-md ${
@@ -13,25 +29,27 @@ export const ProjectCard = function ProjectCard(props: ProjectProps) {
             }
           : {}
       }
-      onClick={() => props.repo && open(props.repo, "_blank")}
+      onClick={() => {
+        // clicking the card (not the link) opens the modal
+        console.log("opened portal");
+        setOpen(true);
+      }}
     >
       <div class="flex items-center justify-between">
         <h2 class="text-lg text-white font-black uppercase">
-          <a href={props.repo} target="_blank">
+          <a
+            href={props.repo}
+            target="_blank"
+            onClick={(e) => {
+              // clicking the link should not open the modal
+              e.stopPropagation();
+            }}
+          >
             {props.title}
           </a>
         </h2>
         <div class="bg-[#585b70] text-[#a6adc8] text-xs font-bold uppercase px-2.5 py-0.5 rounded-full">
-          {props.repo && (
-            <a
-              class="hover:underline"
-              href={props.repo}
-              target="_blank"
-              onClick={(e) => e.stopPropagation()}
-            >
-              Active
-            </a>
-          )}
+          {props.repo && <span>Active</span>}
           {!props.repo && !props.wip && <span>Dead</span>}
           {props.wip && <span>WIP</span>}
         </div>
@@ -42,6 +60,25 @@ export const ProjectCard = function ProjectCard(props: ProjectProps) {
       <p class="whitespace-pre-wrap text-sm font-semibold text-[#a6adc8]">
         {props.tech}
       </p>
+
+      {open && !props.wip ? (
+        <Portal into="body">
+          <ProjectModal
+            title={props.title}
+            onClose={() => setOpen(false)}
+            actions={modalButtons}
+          >
+            <div class="space-y-3">
+              <p class="text-sm text-gray-800 dark:text-gray-200">
+                {props.description}
+              </p>
+              <p class="text-xs font-mono text-gray-600 dark:text-gray-300">
+                Technologies used: {props.tech}
+              </p>
+            </div>
+          </ProjectModal>
+        </Portal>
+      ) : null}
     </div>
   );
 };
@@ -50,6 +87,7 @@ type ProjectProps = {
   title: string;
   repo?: string;
   summary: string;
+  description?: string;
   tech: string;
   wip?: boolean;
 };

frontend/islands/ProjectModal.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+
+export type ModalAction = {
+  label: string;
+  onClick: () => void;
+  variant?: "primary" | "secondary" | "link";
+};
+
+type ModalProps = {
+  title?: string;
+  /**
+   * Called after the modal has finished its exit animation.
+   * The Modal will run the exit animation internally and then call onClose().
+   */
+  onClose: () => void;
+  children: ComponentChildren;
+  ariaLabel?: string;
+  actions?: ModalAction[]; // rendered in footer; each button will be given flex-1 so buttons fill the width together
+  /**
+   * Optional: duration (ms) of enter/exit animation. Defaults to 200.
+   * Keep this in sync with the CSS transition-duration classes used below.
+   */
+  animationDurationMs?: number;
+};
+
+export const ProjectModal = function ProjectModal({
+  title,
+  onClose,
+  children,
+  ariaLabel,
+  actions,
+  animationDurationMs = 200,
+}: ModalProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const closingRef = useRef(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setIsVisible(true));
+
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        startCloseFlow();
+      }
+    }
+    document.addEventListener("keydown", onKey);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener("keydown", onKey);
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const footerActions: ModalAction[] =
+    actions && actions.length > 0
+      ? [
+          ...actions,
+          {
+            label: "Close",
+            onClick: startCloseFlow,
+            variant: "secondary",
+          },
+        ]
+      : [{ label: "Close", onClick: startCloseFlow, variant: "primary" }];
+
+  function startCloseFlow() {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setIsVisible(false);
+    timeoutRef.current = globalThis.setTimeout(() => {
+      timeoutRef.current = null;
+      onClose();
+    }, animationDurationMs);
+  }
+
+  const panelBase =
+    "relative z-10 max-w-lg w-full bg-white dark:bg-[#1f2937] rounded-lg shadow-xl p-6 mx-4 transform transition-all";
+  const panelVisible = "opacity-100 translate-y-0 scale-100";
+  const panelHidden = "opacity-0 translate-y-2 scale-95";
+  const backdropBase =
+    "absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity";
+  const backdropVisible = "opacity-100";
+  const backdropHidden = "opacity-0";
+
+  const renderActionButton = (action: ModalAction) => {
+    const base =
+      "flex-1 w-full px-4 py-2 rounded-md font-semibold focus:outline-none";
+    const styles =
+      action.variant === "primary"
+        ? "bg-[#94e2d5] text-black hover:brightness-95 border-b-4 border-b-[#364153] shadow-xl"
+        : action.variant === "link"
+          ? "bg-transparent text-[#075985] underline"
+          : "bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:brightness-95 border-b-4 border-b-[#94e2d5] shadow-xl";
+
+    return (
+      <button
+        key={action.label}
+        onClick={action.onClick}
+        class={`${base} ${styles}`}
+        type="button"
+      >
+        {action.label}
+      </button>
+    );
+  };
+
+  return (
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center"
+      aria-modal="true"
+      role="dialog"
+      aria-label={ariaLabel ?? title ?? "Modal dialog"}
+    >
+      <div
+        style={{ transitionDuration: `${animationDurationMs}ms` }}
+        class={`${backdropBase} ${
+          isVisible ? backdropVisible : backdropHidden
+        }`}
+      />
+      <div
+        style={{ transitionDuration: `${animationDurationMs}ms` }}
+        class={`${panelBase} ${isVisible ? panelVisible : panelHidden}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div class="flex items-start justify-between">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            {title}
+          </h3>
+          <button
+            onClick={startCloseFlow}
+            aria-label="Close modal"
+            class="ml-4 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 p-1"
+            type="button"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div class="mt-4 text-sm text-gray-700 dark:text-gray-300">
+          {children}
+        </div>
+
+        <div class="mt-6">
+          <div class="flex gap-3 w-full">
+            {footerActions.map(renderActionButton)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/routes/projects/index.tsx

@@ -6,6 +6,7 @@ interface ProjectData {
   title: string;
   repo?: string;
   summary: string;
+  description?: string;
   tech: string;
   wip?: boolean;
   created_at: string;
@@ -43,12 +44,16 @@ export default function Projects({ data }: PageProps<ProjectData>) {
           challenges that keep me busy when I'm not doing "real work" stuff!
         </p>
         <div class="grid grid-cols-1 sm:grid-cols-2">
-          {projects.map((project: any) => {
+          {projects.map((project: ProjectData) => {
             return (
               <ProjectCard
                 title={project.title}
                 repo={project.repo ?? undefined}
                 summary={project.summary}
+                description={
+                  project.description ??
+                  "No description found. Perhaps you should check out the repository instead!"
+                }
                 tech={project.tech}
                 wip={project.wip ?? true}
               />