# peterwaf/pimofy-site architecture

> Architecture diagram of the GitHub repository peterwaf/pimofy-site, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-18). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/peterwaf/pimofy-site
- Repository: https://github.com/peterwaf/pimofy-site

## Overview

1. **Repository type and runtime**
   - This is a **fully static marketing website** for Pimofy Digital.
   - There is **no backend, no build pipeline, and no frontend framework**; everything is served as plain HTML/CSS/JS, making the deployment boundary essentially “static hosting.”

2. **Page-level architecture**
   - The site is organized as a set of standalone HTML pages: `index.html`, `solutions.html`, `data-operations.html`, `capacity-audit.html`, `industries.html`, `resources.html`, `about.html`, `contact.html`, plus supporting content/legal pages like `privacy.html`, `terms.html`, and several article-style pages.
   - Each page is a separate entry point, so navigation is document-based rather than SPA routing.

3. **Primary user journeys**
   - The architecture is conversion-oriented: visitors move from **home → solutions/service pages → contact/audit CTA**.
   - Key funnel pages include the **Data Operations Pod™** detail page, the **Free Operations Capacity Audit™** page, and the **Book a Call / Contact** page.

4. **Content and information structure**
   - The site includes a **resources/blog hub** and multiple long-form article pages such as `hidden-cost-of-bad-data.html` and `why-best-people-shouldnt-do-data-entry.html`.
   - These pages function as SEO/content marketing assets rather than dynamic CMS-rendered content.

5. **Shared presentation layer**
   - `styles.css` is the **single global design system** for the entire site.
   - It centralizes brand tokens, layout rules, responsive behavior, typography, spacing, and animations; the README notes that colors and spacing are driven by CSS variables in `:root`.

6. **Client-side behavior layer**
   - `script.js` is the **only JavaScript module** and acts as the shared interaction controller across all pages.
   - It handles the navigation system, dropdown behavior, mobile menu, FAQ interactions, scroll-reveal animations, and form-related behavior.

7. **Interactive boundaries**
   - Interactivity is intentionally lightweight and browser-native: the site relies on standard DOM behavior plus progressive enhancement.
   - The README indicates graceful fallback behavior for features like `IntersectionObserver`, so core content remains visible even when advanced browser APIs aren’t available.

8. **Assets and media**
   - The `assets/` directory contains the brand and imagery used across the site: `logo.png`, `hero.jpg`, and `team.jpg`.
   - These are static media dependencies; there is no separate asset pipeline or CDN configuration visible in the repo.

9. **External service touchpoints**
   - The only explicit external service in the repo description is **Calendly** on the contact page, paired with a fallback form.
   - That makes the contact page a boundary between the static site and an external scheduling workflow.

10. **SEO and discovery layer**
   - SEO is treated as a first-class architecture concern: each page has unique title/description metadata and canonical URLs.
   - The home page includes Open Graph data and Organization schema, while the Data Operations page includes FAQ schema in JSON-LD.
   - `robots.txt` and `sitemap.xml` support search indexing and crawl control.

11. **Accessibility and performance posture**
   - The site is built to be accessible and fast: semantic landmarks, skip link, focus states, ARIA support for nav/FAQ, and labeled form fields are called out in the README.
   - Performance choices include no framework overhead, a single stylesheet, a deferred script, and font preconnects.

12. **How to diagram it**
   - The cleanest architecture diagram is: **static pages** at the center, **shared CSS/JS** as cross-cutting layers, **assets** as static dependencies, and **Calendly + search engines** as the only meaningful external integrations.
   - There are no internal services, databases, or APIs to model beyond those boundaries.

Main entry points: [`index.html`](https://github.com/peterwaf/pimofy-site/blob/main/index.html) (Home), [`resources.html`](https://github.com/peterwaf/pimofy-site/blob/main/resources.html) (Resources), [`data-operations.html`](https://github.com/peterwaf/pimofy-site/blob/main/data-operations.html) (Data Ops), [`styles.css`](https://github.com/peterwaf/pimofy-site/blob/main/styles.css) (Styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Pages"]
  node_index["Home<br/>landing page<br/>[index.html]"]
  node_solutions["Solutions<br/>service page<br/>[solutions.html]"]
  node_data_operations["Data Ops<br/>service detail"]
  node_capacity_audit["Audit<br/>offer page"]
  node_contact["Contact<br/>lead capture<br/>[contact.html]"]
  node_resources["Resources<br/>content hub<br/>[resources.html]"]
  node_about["About<br/>company page<br/>[about.html]"]
  node_industries["Industries<br/>industry page<br/>[industries.html]"]
  node_hidden_cost["Bad Data<br/>article"]
  node_best_people["Best People<br/>article"]
  node_dedicated_pod_results["Pod Results<br/>article"]
  node_outsourcing_capacity["Capacity Buy<br/>article"]
  node_protect_capacity["Protect Capacity<br/>article"]
  node_saas_capacity["SaaS Capacity<br/>article"]
  node_privacy["Privacy<br/>legal page<br/>[privacy.html]"]
  node_terms["Terms<br/>legal page<br/>[terms.html]"]
end

subgraph group_shared["Shared layer"]
  node_styles["Styles<br/>css system<br/>[styles.css]"]
  node_script["Script<br/>interaction layer<br/>[script.js]"]
end

subgraph group_seo["SEO ops"]
  node_robots["Robots<br/>crawl policy<br/>[robots.txt]"]
  node_sitemap["Sitemap<br/>index map<br/>[sitemap.xml]"]
end

subgraph group_assets["Assets"]
  node_logo["Logo<br/>brand asset"]
  node_hero["Hero image<br/>image asset"]
  node_team["Team image<br/>image asset"]
end

subgraph group_external["External"]
  node_calendly(("Calendly<br/>scheduling service"))
  node_search(("Search engines<br/>discovery target"))
end

node_index -->|"nav"| node_solutions
node_index -->|"nav"| node_data_operations
node_index -->|"cta"| node_capacity_audit
node_index -->|"cta"| node_contact
node_index -->|"nav"| node_resources
node_index -->|"nav"| node_about
node_index -->|"nav"| node_industries
node_solutions -->|"detail"| node_data_operations
node_solutions -->|"cta"| node_capacity_audit
node_solutions -->|"cta"| node_contact
node_data_operations -->|"cta"| node_contact
node_data_operations -->|"cta"| node_capacity_audit
node_capacity_audit -->|"cta"| node_contact
node_contact -->|"book"| node_calendly
node_resources -->|"article"| node_hidden_cost
node_resources -->|"article"| node_best_people
node_resources -->|"article"| node_dedicated_pod_results
node_resources -->|"article"| node_outsourcing_capacity
node_resources -->|"article"| node_protect_capacity
node_resources -->|"article"| node_saas_capacity
node_robots -->|"crawl"| node_search
node_sitemap -->|"discover"| node_search
node_index -.->|"uses"| node_styles
node_solutions -.->|"uses"| node_styles
node_data_operations -.->|"uses"| node_styles
node_capacity_audit -.->|"uses"| node_styles
node_contact -.->|"uses"| node_styles
node_resources -.->|"uses"| node_styles
node_about -.->|"uses"| node_styles
node_industries -.->|"uses"| node_styles
node_index -.->|"uses"| node_script
node_solutions -.->|"uses"| node_script
node_data_operations -.->|"uses"| node_script
node_capacity_audit -.->|"uses"| node_script
node_contact -.->|"uses"| node_script
node_resources -.->|"uses"| node_script
node_index -.->|"media"| node_logo
node_index -.->|"media"| node_hero
node_about -.->|"media"| node_team
node_data_operations -.->|"media"| node_hero
node_capacity_audit -.->|"media"| node_hero

click node_index "https://github.com/peterwaf/pimofy-site/blob/main/index.html"
click node_solutions "https://github.com/peterwaf/pimofy-site/blob/main/solutions.html"
click node_data_operations "https://github.com/peterwaf/pimofy-site/blob/main/data-operations.html"
click node_capacity_audit "https://github.com/peterwaf/pimofy-site/blob/main/capacity-audit.html"
click node_contact "https://github.com/peterwaf/pimofy-site/blob/main/contact.html"
click node_resources "https://github.com/peterwaf/pimofy-site/blob/main/resources.html"
click node_about "https://github.com/peterwaf/pimofy-site/blob/main/about.html"
click node_industries "https://github.com/peterwaf/pimofy-site/blob/main/industries.html"
click node_hidden_cost "https://github.com/peterwaf/pimofy-site/blob/main/hidden-cost-of-bad-data.html"
click node_best_people "https://github.com/peterwaf/pimofy-site/blob/main/why-best-people-shouldnt-do-data-entry.html"
click node_dedicated_pod_results "https://github.com/peterwaf/pimofy-site/blob/main/dedicated-data-operations-pod-results.html"
click node_outsourcing_capacity "https://github.com/peterwaf/pimofy-site/blob/main/outsourcing-buying-capacity-not-labor.html"
click node_protect_capacity "https://github.com/peterwaf/pimofy-site/blob/main/protect-team-capacity-as-you-scale.html"
click node_saas_capacity "https://github.com/peterwaf/pimofy-site/blob/main/saas-capacity-problem.html"
click node_privacy "https://github.com/peterwaf/pimofy-site/blob/main/privacy.html"
click node_terms "https://github.com/peterwaf/pimofy-site/blob/main/terms.html"
click node_styles "https://github.com/peterwaf/pimofy-site/blob/main/styles.css"
click node_script "https://github.com/peterwaf/pimofy-site/blob/main/script.js"
click node_robots "https://github.com/peterwaf/pimofy-site/blob/main/robots.txt"
click node_sitemap "https://github.com/peterwaf/pimofy-site/blob/main/sitemap.xml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index,node_solutions,node_data_operations,node_capacity_audit,node_contact,node_resources,node_about,node_industries,node_hidden_cost,node_best_people,node_dedicated_pod_results,node_outsourcing_capacity,node_protect_capacity,node_saas_capacity,node_privacy,node_terms toneBlue
class node_styles,node_script toneAmber
class node_robots,node_sitemap toneMint
class node_logo,node_hero,node_team toneRose
class node_calendly,node_search toneIndigo
```

## Components

### Pages

Standalone marketing, service, content, and legal entry points.

- [Home](https://github.com/peterwaf/pimofy-site/blob/main/index.html): landing page · Primary entry point and conversion hub. · `index.html`
- [Solutions](https://github.com/peterwaf/pimofy-site/blob/main/solutions.html): service page · Overview of offerings and service paths. · `solutions.html`
- [Data Ops](https://github.com/peterwaf/pimofy-site/blob/main/data-operations.html): service detail · Core Data Operations Pod™ offering page. · `data-operations.html`
- [Audit](https://github.com/peterwaf/pimofy-site/blob/main/capacity-audit.html): offer page · Free Operations Capacity Audit™ funnel page. · `capacity-audit.html`
- [Contact](https://github.com/peterwaf/pimofy-site/blob/main/contact.html): lead capture · Book-a-call and contact conversion page. · `contact.html`
- [Resources](https://github.com/peterwaf/pimofy-site/blob/main/resources.html): content hub · Blog and SEO content hub. · `resources.html`
- [About](https://github.com/peterwaf/pimofy-site/blob/main/about.html): company page · Brand, team, and credibility page. · `about.html`
- [Industries](https://github.com/peterwaf/pimofy-site/blob/main/industries.html): industry page · Industry positioning and use cases. · `industries.html`
- [Bad Data](https://github.com/peterwaf/pimofy-site/blob/main/hidden-cost-of-bad-data.html): article · SEO article on the cost of poor data. · `hidden-cost-of-bad-data.html`
- [Best People](https://github.com/peterwaf/pimofy-site/blob/main/why-best-people-shouldnt-do-data-entry.html): article · SEO article on avoiding data entry bottlenecks. · `why-best-people-shouldnt-do-data-entry.html`
- [Pod Results](https://github.com/peterwaf/pimofy-site/blob/main/dedicated-data-operations-pod-results.html): article · Outcome-focused article for the data pod offering. · `dedicated-data-operations-pod-results.html`
- [Capacity Buy](https://github.com/peterwaf/pimofy-site/blob/main/outsourcing-buying-capacity-not-labor.html): article · Article on buying capacity versus labor. · `outsourcing-buying-capacity-not-labor.html`
- [Protect Capacity](https://github.com/peterwaf/pimofy-site/blob/main/protect-team-capacity-as-you-scale.html): article · Article on preserving team capacity while scaling. · `protect-team-capacity-as-you-scale.html`
- [SaaS Capacity](https://github.com/peterwaf/pimofy-site/blob/main/saas-capacity-problem.html): article · Article on the capacity problem in SaaS. · `saas-capacity-problem.html`
- [Privacy](https://github.com/peterwaf/pimofy-site/blob/main/privacy.html): legal page · Privacy policy. · `privacy.html`
- [Terms](https://github.com/peterwaf/pimofy-site/blob/main/terms.html): legal page · Terms of service. · `terms.html`

### Shared layer

Global presentation and interaction code reused across pages.

- [Styles](https://github.com/peterwaf/pimofy-site/blob/main/styles.css): css system · Global design system and responsive presentation layer. · `styles.css`
- [Script](https://github.com/peterwaf/pimofy-site/blob/main/script.js): interaction layer · Shared client-side navigation and UI behavior. · `script.js`

### SEO ops

Crawl and discovery files that support indexing and metadata.

- [Robots](https://github.com/peterwaf/pimofy-site/blob/main/robots.txt): crawl policy · Search crawler directives. · `robots.txt`
- [Sitemap](https://github.com/peterwaf/pimofy-site/blob/main/sitemap.xml): index map · Discovery map for site URLs. · `sitemap.xml`

### Assets

Static brand and imagery dependencies.

- **Logo**: brand asset · Site logo used across pages.
- **Hero image**: image asset · Primary marketing image.
- **Team image**: image asset · Team and credibility image.

### External

Third-party service touchpoints and discovery targets.

- **Calendly**: scheduling service · External booking workflow from the contact page.
- **Search engines**: discovery target · External indexing and organic discovery channel.

## Connections

- Home → Solutions: nav · Primary path into services.
- Home → Data Ops: nav · Key service detail journey.
- Home → Audit: cta · Conversion path to the audit offer.
- Home → Contact: cta · Direct lead capture path.
- Home → Resources: nav · Content and SEO discovery path.
- Home → About: nav · Credibility and company context.
- Home → Industries: nav · Industry positioning path.
- Solutions → Data Ops: detail · Main solution branch.
- Solutions → Audit: cta · Offer to assess fit and capacity gaps.
- Solutions → Contact: cta · Lead handoff from service overview.
- Data Ops → Contact: cta · Book a call after reviewing the offer.
- Data Ops → Audit: cta · Audit as the lower-friction next step.
- Audit → Contact: cta · Schedule after audit interest.
- Contact → Calendly: book · External scheduling integration.
- Resources → Bad Data: article · SEO article entry.
- Resources → Best People: article · SEO article entry.
- Resources → Pod Results: article · SEO article entry.
- Resources → Capacity Buy: article · SEO article entry.
- Resources → Protect Capacity: article · SEO article entry.
- Resources → SaaS Capacity: article · SEO article entry.
- Robots → Search engines: crawl · Guides crawler access.
- Sitemap → Search engines: discover · Supports organic discovery.
- Home → Styles: uses · Global styling dependency.
- Solutions → Styles: uses · Global styling dependency.
- Data Ops → Styles: uses · Global styling dependency.
- Audit → Styles: uses · Global styling dependency.
- Contact → Styles: uses · Global styling dependency.
- Resources → Styles: uses · Global styling dependency.
- About → Styles: uses · Global styling dependency.
- Industries → Styles: uses · Global styling dependency.
- Home → Script: uses · Shared interaction layer.
- Solutions → Script: uses · Shared interaction layer.
- Data Ops → Script: uses · Shared interaction layer.
- Audit → Script: uses · Shared interaction layer.
- Contact → Script: uses · Shared interaction layer.
- Resources → Script: uses · Shared interaction layer.
- Home → Logo: media · Brand asset dependency.
- Home → Hero image: media · Hero imagery dependency.
- About → Team image: media · Team imagery dependency.
- Data Ops → Hero image: media · Marketing imagery dependency.
- Audit → Hero image: media · Marketing imagery dependency.