added project links to gallery, changed project info for flowdesk

components/ProjectCard.tsx

@@ -148,6 +148,8 @@ export default function ProjectCard({ project, visible, selected = false, setSel
        {contentRef.current && project.images && project.images.length > 0 && (
         <SimpleGallery images={project.images} videos={project.videos} title={project.title} />        
       )}
+
+      <div v-if={project.link} style={{display: "flex", gap: 12, flexWrap: "wrap", marginTop: 16}}>
         <Link
         className="expand-on-hover-button"
         style={{
@@ -163,6 +165,23 @@ export default function ProjectCard({ project, visible, selected = false, setSel
           width: "10em",
           borderRadius: "var(--radius-md)",
         }} href={"/project/"+project.slug} >See More</Link>
+
+          <Link
+        className="expand-on-hover-button"
+        style={{
+          fontFamily: "var(--mono)",
+          fontSize: 15,
+          color: "var(--fg)",
+          border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+          backgroundColor: "var(--bg)",
+          height: "3em",
+          alignContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          width: "10em",
+          borderRadius: "var(--radius-md)",
+        }} target="_blank" href={project.link} >Link</Link>
+        </div>
       </div>
     );
       }

data/content.ts

@@ -95,39 +95,54 @@ export const PROJECTS: Project[] = [{
     description: "Flowdesk is a microservices platform for breaking down complex business processes into guided workflows with a focus on collapsing the gap between a novice agent and an expert one.",
     details: `# Flowdesk: A Flow-based support platform designed for event-based organizations. 
 
-## 'It's not just "make the UI simpler" but "make a day-one hire perform like a veteran on this task, every time."'
-
 <br/>
-<br/>
+<blockquote>It's not just "make the UI simpler" but "make a day-one hire perform like a veteran on this task, every time."
-
-### Overview  
-
-Flowdesk is a microservices platform for breaking down complex business processes into guided workflows with a focus on collapsing the gap between a novice agent and an expert one.
-
-The short of it is: Two agents doing the same check-in shouldn't take 90 seconds and 6 minutes. Flowdesk as a product seeks to compress that spread in variance.
-
-As an objective it is measurable, demonstrable, and directly tied to money (labor cost, queue length, guest satisfaction, throughput per desk). **The metric is time-to-task and its variance - not just the average.**
-
-It's not just "easy software. It's not just "make the UI simpler". It's "make a day-one hire perform like a veteran on this task, every time."
-
-
-
-
-## Private Repository
-
-This is a real product that is in use by a real organization. The source code is not public, but the platform is available for licensing.
-Please contact me for more information or exceptions to this.
-
-
-<blockquote>A welcome screen using the default theme.
 <a target="_blank" href="/img/projects/fam/example-welcome.png">
 <img src="/img/projects/fam/example-welcome.png" alt="Alt text" width="600"/>
 </a>
 </blockquote>
   
 
-<blockquote>A short video of the platform's operation.
+<br/>
-  <video width="640" height="360" controls>
+
+## App Overview  
+
+Flowdesk is a microservices platform for breaking down complex business processes into guided workflows. The focus here is on collapsing the gap in time it takes to perform tasks between a novice agent and an expert one.
+
+The even shorter version: Two agents doing the same check-in shouldn't take 90 seconds and 6 minutes. Flowdesk as a product seeks to compress that spread in variance.
+
+As an objective it is measurable, demonstrable, and directly tied to money (labor cost, queue length, guest satisfaction, throughput per desk). **The metric is time-to-task and its variance - not just the average.**
+
+It's not just "easy software. It's not just "make the UI simpler". It's "make a day-one hire perform like a veteran on this task, every time."
+
+<a target="_blank" href="https://flowdesk.hwilliams.dev">Preview: Flowdesk Development Site</a>
+
+
+
+<blockquote>State driven navigation and visual consistency between controls make complex tasks feel easier.
+<a target="_blank" href="/img/projects/fam/example-step-2.png">
+<img src="/img/projects/fam/example-step-2.png" alt="Alt text" width="800"/>
+</a>
+</blockquote>
+  
+
+## Private Repository
+
+This is a real product that is in development. The source code is not public, but the platform may soon be available as a service or for licensing.
+Please contact me for more information or exceptions to this. 
+
+
+<blockquote>A step demonstrating input components.
+<a target="_blank" href="/img/projects/fam/example-step.png">
+<img src="/img/projects/fam/example-step.png" alt="Alt text" width="800"/>
+</a>
+</blockquote>
+  
+
+<blockquote>A short video of the platform's operation. This is a custom implemntation of the architecture for a specific event.
+The platform is highly configurable and can be used for many different business processes.
+
+  <video width="1000" controls>
     <source src="/img/projects/fam/runthrough.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
@@ -278,10 +293,10 @@ in the guest identification system and have out-of-the box modular support in fl
 A real-world solution for event staff and volunteer management.
   `,
     tags: ["Vue", "Node.JS", "Event-Management", "Real-Time", "Full-Stack"],
-    link: "private",
+    link: "https://flowdesk.hwilliams.dev",
     year: "2026",
-    images: [ "img/projects/fam/example-welcome.png", "img/projects/fam/example-step-in-flow.png"],
+    images: [ "img/projects/fam/example-welcome.png", "img/projects/fam/example-step-2.png", "img/projects/fam/example-step.png"],
-    videos: [ "img/projects/fam/runthrough.mp4" ]
+    //videos: [ "img/projects/fam/runthrough.mp4" ]
 },{
     id: 2,
     slug: "clean-space",

styles/markdown-container.css

@@ -35,26 +35,49 @@
 
     blockquote {
         width: 100%;
-        text-align: center;
+
+        text-align: justify;
         font-family: var(--sans);
-        font-size: 12;
+        font-size: 15;
+        word-wrap: break-word;        
         line-height: 2;
+
         color: var(--muted);
         background-color: var(--bg-raised);
-        padding: 0.5em;
+
-        border-radius: var(--radius-md);
+
+        margin-bottom: 2em;
+
+        padding-top: 1em;
+        padding-bottom: 1em;
+        padding-left: 5%;
+        padding-right: 5%;
+        
+        border-radius: var(--radius-md);      
+        border-top: 0.05em solid var(--border-subtle);
+        border-right: 0.05em solid var(--border-subtle);
+
         box-shadow: var(--shadow-md);
+
         display: flex;
         flex-direction: column-reverse;
-        margin-bottom: 2em;
+        font-weight: 500;
-        
+
     }
 
     blockquote img {
-        border-radius: var(--radius-sm);
+        border-radius: var(--radius-md);
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        width: 100%;
+        border: 0.05em dashed var(--border-subtle);   
     }
+
     blockquote video {
         align-self: center;
+        width: 100%;
+         border: 0.05em dashed var(--border-strong);   
+         margin-bottom: 0.75em;
     }
 
     ul {
@@ -85,7 +108,7 @@
     }
 
     img {
-        max-width: 80vw;
+        max-width: 80vw;    
     }
 
     video {