hwilliams/hwilliams-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added project pages, updated page for FAM.

Browse Source
This commit is contained in:
Hunter W.
2026-06-08 22:25:39 -04:00
parent 0b161f3e2d
commit 89e5c2364c
27 changed files with 1860 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
data/content.ts
View File

@@ -93,20 +93,98 @@ export const PROJECTS: Project[] = [{
slug: "flowbased-agent-management",
title: "Flow-Based Agent Management platform",
description: "The Flow-based Agent Managemment (FAM) platform is a real-world example of an Agent support tool designed to streamline high-volume in-person Agent to Guest interactions in various scenarios.",
details: `The source for this project is private, but I am happy to
discuss the architecture and design decisions in detail during
an interview.
details: `# Flow-based Agent Management platform (FAM)
This application was deployed for a major convention in May 2026, where it achieved a pretty wild amount of success:
- Single day registration of over 10,000 guests with an average processing time of about 45 seconds.
- No single guest wait time greater than 10 minutes.
The previous year at the same convention with the same attendance levels experienced major wait times, and physical lines that extended around multiple floors of a large convention space. Some
attendees waited in line for hours.
The platform consists of a Vue 3 frontend and a configurable backend interface.
It features a dynamic UX emphasized flow-based interface that allows agents to navigate complex tasks efficiently, and with minimal training.
A real-world solution for event staff and volunteer management.
The Flow-based Agent Managemment (FAM) platform is designed to streamline high-volume in-person Agent to Guest interactions using the concept of workflows.
<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>
## Private Repository
This project was tailored to the needs of a large organization. As such, and naturally so — the source for this project is private.
I am happy to discuss the architecture and design decisions made for this project in detail during an interview.
<blockquote>A short video of the platform's operation.
<video width="640" height="360" controls>
<source src="/img/projects/fam/runthrough.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</blockquote>
## Summary
In the context of <b>FAM</b>, an \`interaction\` is the behavior that occurs between a guest and an agent.
An \`agent\` is a real-person (and most often a representative of some business) whom is interacting with a \`guest\` in order to exchange information or complete some task.
A front-desk employee at a hotel checking in a guest is an easy to reach example. The ticketing/admission agents at an event might be another.
These agent to guest interactions are what drive an organization on the ground.
These interactions might occur at high volumes and might be sustained throughout normal business operation. In such cases,
the amount of time spent completing tasks and exchanging information might have a very high impact on a business' operations.
FAM supports breaking these interactions down into streamlined, consistent, efficient, repeatable, and flexible
workflows.
<blockquote>Not every interaction will be the same. Some guests might have additional service needs.
<a target="_blank" href="/img/projects/fam/reference-1.png">
<img src="/img/projects/fam/reference-1.png" alt="A workflow, and a workload." width="800"/>
</a>
</blockquote>
There is a minimum amount of time that it takes an agent to complete a task in any software, and there is a reasonable maximum amount of time that might be spent on
unusual circumstances or perhaps lost to the 'growing pains' of inexperienced staff or imperfect systems.
FAM tries to shorten the duration of agent to guest interactions without reducing the quality of the interaction through purpose-built UX-first guided workflows. Task identification from business analysis are made into functional workflows that support reducing the time taken to complete tasks while also addressing the variability in
how much time that it takes to complete these tasks.
<blockquote>The FAM platform runs on a vue/nuxt stack. Here's a part of the app structure in a diagram, without exposing too much.
<a target="_blank" href="/img/projects/fam/reference-1.png">
<img src="/img/projects/fam/workflow.png" alt="Workflow architecture" width="800"/>
</a>
</blockquote>
A step can contain any type of work, and can be used in multiple workflows. An identification step for a check-in process using the default template might look like such:
<blockquote>The general look and feel of a step in a workflow.
<a target="_blank" href="/img/projects/fam/example-step.png">
<img src="/img/projects/fam/example-step.png" alt="Example Step" width="800"/>
</a>
</blockquote>
In this picture, a guest has had their ID card scanned and their profile information is displayed. The area with a marching border on the right side integrates an external barcode scanner in order to
read information on the back of US driver's license. This information is compared with that on the left, and discrepencies are highlighted in yellow. Checking the acknowledgement box at the bottom moves
the workflow into the next step.
## Implementation
This platform was implemented as a solution for in-person registration, VIP registration, pre-event mailouts, and entitlements fulfillment for an Atlanta-based organization's yearly convention for May 2026, where it achieved significant success:
The setup consists of a Vue 3 frontend and a configurable backend interface. This particular implementation utilized a Perl catalyst backend. Standard 2D barcode scanning devices and RFID tag readers were used
in the guest identification system and have out-of-the box modular support in flows created on the platform.
<pre>Some Stats:</pre>
- Single day registration of over 10,000 guests with an average processing time of about 45 seconds.
- Previous year: ~2 minutes.
- No single guest wait time greater than 10 minutes.
- Previous year had lines that wrapped around the entire building and there were stories of four hour waits.
<blockquote>A testament
<a target="_blank" href="/img/projects/fam/stats-2026-1.png">
<img src="/img/projects/fam/stats-2026-1.png" alt="Example Step" width="800"/>
</a>
</blockquote>
A real-world solution for event staff and volunteer management.
`,
tags: ["Vue", "Node.JS", "Event-Management", "Real-Time", "Full-Stack"],
link: "private",
@@ -130,3 +208,22 @@ export const PROJECTS: Project[] = [{
link: "https://git.hwilliams.dev/hwilliams/hwilliams-dev",
year: "2026",
}];
import { remark } from "remark";
import remarkParse from "remark-parse";
import rehypeRaw from "rehype-raw";
import rehypeStringify from "rehype-stringify";
import remarkRehype from "remark-rehype";
export async function getProjectDetails(slug: string) {
const p = PROJECTS.find((v)=>v.slug == slug);
if (!p || !p.details) return null;
const re = await remark()
.use(remarkParse)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeStringify).process(p.details);
return re?.toString();
}