Project Management

Contributor Guide

This site is built to grow with the team. Most updates are a one-line edit to a data file — no web design needed. Here's how everything fits together.

How the site is organized

Each section (Change Log, Spec Sheets, SOPs, Templates) reads its content from a matching file in the data/ folder. The pages render automatically from those files, so you add content by editing data — not by building pages.

  • data/tools.js — the tiles on the home launchpad
  • data/change-log.js — project change log entries
  • data/spec-sheets.js — spec sheet library
  • data/sops.js — standard operating procedures
  • data/templates.js — templates library

Add or update content

  1. Open the data file for the section you want to change (see the list above).
  2. Copy an existing { … } block, paste it, and edit the fields. Keep the comma between blocks.
  3. For documents (specs, SOPs, templates), paste the SharePoint link into the url field. The files stay in SharePoint — the site just links to them.
  4. Delete the sample: true line once an entry is real, so the "Sample" flag goes away.
  5. Save, commit, and the page updates automatically.

Example: adding an SOP

{
  title: "Risk Review Procedure",
  category: "Monitoring",
  version: "1.0",
  updated: "2026-06-09",
  owner: "Jordan Chancey",
  desc: "How project risks are identified, scored, and reviewed.",
  url: "https://missionmobilemed.sharepoint.com/…",
},

The new SOP appears on the SOPs page immediately, is searchable, and gets a filter chip for its category.

Add a brand new section

When the team needs a whole new area (for example, a vendor directory), the pattern is:

  1. Create a new data file in data/ (copy one of the existing ones as a starting point).
  2. Create a new HTML page (copy sops.html, rename it, update the title and the list container's id).
  3. Register the renderer for the new id in assets/js/render.js.
  4. Add the page to the navigation in assets/js/app.js (the PM_SITE.nav list) and a tile in data/tools.js.

The navigation and footer are defined once in assets/js/app.js and injected on every page, so a nav change updates the whole site.

Branding

Colors and fonts follow the 2026 Mission Mobile Medical Brand Guidelines and are defined as variables at the top of assets/css/styles.css (Mission Blue #00aeef, Black, Soft Grey; Outfit for headings, Inter for body). To use the official logo, drop it in as assets/img/logo.svg and it will appear in the header automatically.

Hosting & portability

The site is plain HTML, CSS, and JavaScript with no build step, so it can be hosted on any internal web host or static host. It was also structured to port into HubSpot CMS later: the header, main, and footer map to the HubSpot base template, and each data-driven section can become a HubSpot module.

Tip: if you open the pages by double-clicking the files and content doesn't load, serve the folder over a simple local web server instead. The README has a one-line command.