---
project: freedom-road-ministries
file: 04_system_architecture
tags: [frm, architecture, html, ionos]
---

# Freedom Road Ministries — System Architecture

> *Vanilla HTML/CSS/JS · static site · deployed to IONOS or equivalent shared hosting.*

---

## Stack

| Layer | Choice |
|---|---|
| Frontend | Vanilla HTML5 + CSS3 + minimal vanilla JS |
| Backend | None (static site · no server-side processing) |
| Hosting | IONOS shared hosting (recommended · matches Sandi's stack) OR Hostinger OR Vercel |
| CDN | Hosting provider's built-in (no Cloudflare layer needed for this scale) |
| Build | None (no build step · files served as-is) |
| Forms | None currently (contact handled via email link) |
| Analytics | None initially (Clark adds Google Analytics or Plausible if he wants) |

---

## Folder structure

```
freedomroadministries.org/
├── index.html                  ← homepage · hero · welcome · 3 pillars
├── mission.html                ← Isaiah 49:22 anchor + board of advisors
├── story.html                  ← Clark's 47-year testimony
├── music.html                  ← Hebrew worship + Shabbat blessings + Yeshua haMashiach
├── jerusalem.html              ← Vision · Eastern Gate · 8 reasons · prophecy
├── resources.html              ← 64 Aliyah Scriptures · 8 Things · Esther Fast · Tallit
├── sitemap.xml                 ← all 6 pages with priority + changefreq
├── robots.txt                  ← User-agent + Sitemap directive
├── css/
│   └── styles.css              ← single stylesheet · all 6 pages share
├── js/
│   └── site.js                 ← mobile nav toggle · dropdowns · smooth scroll
└── assets/
    ├── hero-jesus-descending.png
    ├── valley-mount-zion.png
    ├── ps122.png
    ├── Tallit.png
    ├── stocks.png
    └── docs/                   ← future PDFs/DOCX downloads
```

---

## Page architecture diagram

```mermaid
graph TB
    Home[index.html<br/>Home + Featured Scriptures] --> Mission[mission.html]
    Home --> Story[story.html]
    Home --> Jerusalem[jerusalem.html]
    Home --> Music[music.html]
    Home --> Resources[resources.html]

    Jerusalem --> J1[#vision]
    Jerusalem --> J2[#map]
    Jerusalem --> J3[#scriptures]
    Jerusalem --> J4[#crusades]
    Jerusalem --> J5[#prophecy1879]
    Jerusalem --> J6[#support]
    Jerusalem --> J7[#prerogatives]

    Resources --> R1[#aliyah-scriptures]
    Resources --> R2[#eight-things]
    Resources --> R3[#story-pdf]
    Resources --> R4[#esther-fast]
    Resources --> R5[#tallit]
    Resources --> R6[#external-links]

    style Home fill:#0038B8,color:#fff
    style Mission fill:#2D6A4F,color:#fff
    style Story fill:#8B5E3C,color:#fff
    style Jerusalem fill:#203A56,color:#fff
    style Music fill:#2D6A4F,color:#fff
    style Resources fill:#8B5E3C,color:#fff
```

---

## CSS architecture

Single `styles.css` shared by all 6 pages. Token-based:

```css
:root {
  /* Israeli flag-anchored palette */
  --israeli-blue: #0038B8;
  --forest-green: #2D6A4F;
  --rust-brown:   #8B5E3C;
  --red-emphasis: #B22222;
  --deep-blue:    #203A56;
  --cream:        #F6F1E6;
  --cream-dark:   #EFE7D5;

  /* Type */
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'Source Sans 3', -apple-system, sans-serif;

  /* Spacing · radius · shadow */
  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 2px 12px rgba(0,0,0,.08);
}
```

Component classes: `.section`, `.section-sm`, `.callout-band`, `.card`, `.card-blue`, `.card-stone`, `.scripture`, `.resource-grid`, `.btn`, `.btn-primary`, `.btn-secondary`.

---

## JavaScript architecture

Minimal `site.js`:

```javascript
// 1. Mobile nav toggle (.nav-toggle button reveals .nav)
// 2. Dropdown menus (.dropdown · .dropdown-menu)
// 3. Smooth scroll for in-page anchors
// 4. Active-nav highlight based on current URL
// 5. Footer year auto-fill (#year span)
```

No frameworks. No build. No bundler. ~100 lines.

---

## SEO architecture

Per page (already deployed):
- `<title>` and `<meta name="description">` unique per page
- `<link rel="canonical">` per page
- `<meta property="og:type|og:title|og:description|og:url|og:image|og:locale">` per page
- `<meta name="twitter:card|twitter:title|twitter:description|twitter:image">` per page
- `<meta name="theme-color" content="#0038B8">` (Israeli blue mobile chrome)
- `index.html` has additional JSON-LD Organization schema

Plus `sitemap.xml` (6 URLs · priority + changefreq) and `robots.txt` pointing at sitemap.

---

## Deployment flow

```mermaid
flowchart LR
    A[Local edit] --> B[Local file:// preview]
    B --> C{Looks good?}
    C -->|no| A
    C -->|yes| D[Cross-browser test]
    D --> E[Lighthouse audit]
    E --> F{Score 90+?}
    F -->|no| A
    F -->|yes| G[Upload via cPanel<br/>File Manager]
    G --> H[Verify live URL 200]
    H --> I[Spot-check 2-3 pages]
    I --> J[Notify Clark]

    style J fill:#3D7A4E,stroke:#1F4D4A,color:#fff
```

---

## What this site is NOT

- Not a CMS (no admin panel · Clark edits via Sandi)
- Not a PHP app (no backend · no DB)
- Not a SPA (no React · Vue · Angular)
- Not a build-step site (no Vite · Webpack · Next.js)
- Not a WordPress install
- Not behind Cloudflare (initially)

If Clark wants any of these later, that's a new engagement scope.

---

## Cross-references

- [[02_action_plan]]
- [[03_sop_library]] SOP-04 · SOP-07
- [[../../../../sandi-system-engine/_skills/freedom-road-deploy/SKILL.md]]
