# 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

    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:

    :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`:

    // 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

    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]]