04 System Architecture

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

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

Cross-references