export type MoreSection = {
title?: string;
text: string;
}
export type SocialLink = {
label: string;
url: string;
icon: "gh" | "li" | "x" | "dev";
};
export type ContactMethod = {
masked: boolean;
label: string;
icon: string;
}
/** A gallery image: either a bare url, or a url with metadata. */
export type GalleryImage = string | {
src: string;
/** Used as the image's alt text and tooltip. */
description?: string;
};
export function imageSrc(image: GalleryImage): string {
return typeof image === "string" ? image : image.src;
}
export function imageDescription(image: GalleryImage): string | undefined {
return typeof image === "string" ? undefined : image.description;
}
export type Project = {
id: number;
slug: string;
title: string;
description: string;
details?: string;
tags: string[];
images?: GalleryImage[];
videos?: string[];
link: string;
year: string;
};
export type Mod = {
id: number;
title: string;
description: string;
link: string;
linkLabel?: string;
version?: string;
tags?: string[];
};
export type ModdedGame = {
id: number;
slug: string;
title: string;
platform?: string;
description?: string;
mods: Mod[];
};
export const PROFILE = {
name: "Hunter",
title: "Software Engineer",
email: "contact@hwilliams.dev",
portrait: "img/portrait.jpg",
bio: `Hi there. I consider myself a problem solver type and the adventurous sort. Lets take it apart, see how it works — then we have some options:
build something completely different out of it, take it to it's genuine limits, or just change a few things about it.
Looking for work. See below.`,
moreSections: [
{
title:"A little more about me",
text: `
I'm an associate level (~1yr) software engineer with full-stack development experience across a variety of frameworks and languages including Vue,
React, Next.JS, Nuxt, Node.JS, Express, Flask, FastAPI, Gunicorn, and more. Graduated with a B.S. in May of 2025. Last seen at USAN building AWS deployed apps. `
},
{
title:"What do I do right now?",
text: "I'm building Flowdesk! Check it out on my projects page. I also build mods for video games such as Palworld, Space Engineers and Rimworld, and run webservers for various modding tools — like the U4ESS Object Explorer. I don't post my projects on github as much anymore to avoid being free training for AI, but my old stuff is still there and you can find any new open source projects of mine at git.hwilliams.dev/hwilliams."
},
{
title:"My goals",
text: `Land the perfect user experience every time. \n \n Nothing makes me happier than seeing someone enjoy the experience they have using the things I make, and the way that happens is by practicing
development techniques that make a good user experience. I love to hear things like 'Your app makes it easy!', 'Your app feels good to use!', and 'Wow, it used to be difficult to do this!'.
`
},
{
title:"Footnote",
text: `If you've found this page trying to answer a question about my mods, please feel free to reach out.
`
}
] satisfies MoreSection[],
moreSectionsStart: 1,
links: [
{ label: "GitHub", url: "https://github.com/FerrenF", icon: "gh" },
{ label: "LinkedIn", url: "https://www.linkedin.com/in/hwilliamsf/", icon: "li" }
] satisfies SocialLink[],
contactMethods: [{
masked: true,
label: "contact@hwilliams.dev",
icon: "email"
}
] satisfies ContactMethod[]
};
export const SITE = {
title: "Hunter W. - Software Engineer",
description: "SWE Looking for work",
source: {
label: "Git",
link: "https://git.hwilliams.dev/hwilliams/hwilliams-dev"
}
};
export const PROJECTS: Project[] = [{
id: 1,
slug: "workflows-app",
title: "Flowdesk: Hit the ground running",
description: "Flowdesk is a microservices platform for breaking down complex business processes into guided visual workflows. Includes an SSO system, administration panel, database and API, and front-end.",
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."
## App Overview
Flowdesk is a set of microservices that acts as a platform for breaking down complex business processes into guided workflows. It's designed for event-based organizations, such as those that run
conferences, festivals, or other large scale events. Guest check-in/out, agent management, membership tracking, and many other critical tasks are given a consistent and streamlined workflow that
just feels good to use.
The approach that Flowdesk takes is trying to collapse the gap in time it takes to perform tasks between a novice agent and an expert one. 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). **It's all about 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."
Preview: Flowdesk Development Site
## 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.
A real-world solution for event staff and volunteer management.
`,
tags: ["Vue", "Node.JS", "Event-Management", "Real-Time", "Full-Stack", "Microservices", "SSO", "Rest API"],
link: "https://flowdesk.hwilliams.dev",
year: "2026",
images: [
{ src: "img/projects/flowdesk/flowdesk-preview-summary-1.png", description: "Flowdesk overview: your organization, your people, your process" },
{ src: "img/projects/flowdesk/prototype-live-screenshot.png", description: "Live registration flow: guest information and ID verification step" },
{ src: "img/projects/flowdesk/demo-screenshot-loggedout-flow.png", description: "Guided workflow as seen by a logged-out user" },
{ src: "img/projects/flowdesk/demo-screenshot-loggedin-flow.png", description: "Guided workflow as seen by a logged-in agent" },
{ src: "img/projects/flowdesk/demo-screenshot-editor-1.png", description: "Workflow editor" },
{ src: "img/projects/flowdesk/demo-screenshot-org-manage.png", description: "Organization management" },
{ src: "img/projects/flowdesk/demo-screenshot-org-details-sponsor.png", description: "Organization details: sponsorship" },
{ src: "img/projects/flowdesk/demo-screenshot-org-details-invite.png", description: "Organization details: member invites" },
{ src: "img/projects/flowdesk/demo-screenshot-message-inbox-empty.png", description: "Message inbox" },
{ src: "img/projects/flowdesk/demo-screenshot-admin-org-manage.png", description: "Admin panel: organization management" },
{ src: "img/projects/flowdesk/demo-screenshot-admin-tickets-manage.png", description: "Admin panel: ticket management" },
{ src: "img/projects/flowdesk/demo-screenshot-admin-message-manage.png", description: "Admin panel: message management" },
{ src: "img/projects/flowdesk/prototype-feedback-screenshot.png", description: "Event staff feedback after the prototype's first convention deployment" },
],
//videos: [ "img/projects/fam/runthrough.mp4" ]
},{
id: 2,
slug: "clean-space",
title: "Clean Space",
description: "Clean Space is a proof of concept and in-development tool for (Space Engineers) Torch server owners featuring client and server side plugin hashing, identification, and filtering controls.",
tags: ["C#", ".NET", "WPF", "Netcode", "Security"],
link: "https://github.com/FerrenF/CleanSpace",
year: "2025",
images: [
"img/projects/clean/cleanspace.png",
"img/projects/clean/ss1.png",
"img/projects/clean/ss2.png",
"img/projects/clean/ss3.png"],
},{
id: 3,
slug: "ue4ss-explorer",
title: "Unreal: UE4SS Object Explorer",
description: "The UE4SS Object explorer implements a byte-level parser to organize unreal engine object dumps into visual data structures.",
tags: ["Nuxt", "Vue", "TypeScript", "Node"],
link: "https://ue4ss-explorer.gimme.pet",
year: "2026",
images: [ "img/projects/uoe/example.png"],
},{
id: 4,
slug: "personal-portfolio",
title: "Personal Portfolio Website",
description: "This very website! Built with Next.JS, React, and TypeScript. Featuring a custom CMS and a lot of custom-built components and hooks.",
tags: ["Next.JS", "React", "TypeScript", "Vercel"],
link: "https://git.hwilliams.dev/hwilliams/hwilliams-dev",
year: "2026",
}];
export const MOD_GAMES: ModdedGame[] = [{
id: 1,
slug: "palworld",
title: "Palworld",
platform: "UE4SS / Dedicated server",
description: "Server-side tooling and quality-of-life changes for dedicated Palworld servers.",
mods: [{
id: 1,
title: "PalUI Extension",
description: "A collection of UI enhancements for Palworld, focused on manipulating the existing UI instead of adding complex new elements.",
link: "https://plz.gimme.pet/ferren/PalUIExtension",
linkLabel: "Git",
version: "0.0.3",
tags: ["Client", "Unreal Engine", "Palworld", "UE4SS", "C++", "UI", "Injection"],
}]
}
];
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();
}