# schooloffreelancing/back-office architecture

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

- Interactive diagram: https://gitdiagram.com/schooloffreelancing/back-office
- Repository: https://github.com/schooloffreelancing/back-office

## Overview

1. **Overall shape**
   This repository is a **static, content-driven training portal** rather than an application with a backend. The root is dominated by HTML pages, shared CSS/JS, and third-party front-end plugins. The site’s purpose is to present training information, onboarding steps, policies, and many outbound community/support links.

2. **Primary user-facing boundary**
   The main entry points are `index.html` and the many sibling pages such as `about.html`, `getstart.html`, `faq.html`, `training.html`, `contact.html`, `mentor.html`, `linux.html`, `kyc.html`, and policy/legal pages like `tou.html`, `refund.html`, `security.html`, `impressum.html`, and `notice.html`. These pages form the public site navigation and are the core of the architecture.

3. **Content model**
   The repository is organized as a set of **independent static pages** instead of a single app shell. Pages appear to be manually authored and themed consistently, with repeated structural patterns likely shared through common CSS/JS rather than server-side templates.

4. **Shared presentation layer**
   Styling is centralized in `css/style.css`, with a source map present in `css/maps/style.css.map`. Fonts live under `fonts/`. This is the main UI layer that gives all pages their common branding, layout, and responsive behavior.

5. **Client-side behavior**
   The site’s custom interactivity is concentrated in `js/script.js`. This is likely where navigation behavior, smooth scrolling, animations, form/UI helpers, and page-specific enhancements are wired up. There is no evidence of a backend API; client-side JavaScript is only an enhancement layer.

6. **Front-end plugin subsystem**
   The `plugins/` directory bundles vendor assets such as Bootstrap, jQuery, AOS, Animate.css, Slick, Venobox, MixItUp, and a Google Maps integration. Architecturally, these are supporting UI components used by the static pages for animation, carousel/gallery behavior, filtering, modal/lightbox views, and map display.

7. **External service and community integrations**
   The site is heavily connected to external platforms rather than internal services. The README points to Google Docs session materials, Trello for onboarding, Facebook/WhatsApp/Telegram/Gitter/Slack for communication, and YouTube/social channels for community presence. These links are part of the operational flow of the training program.

8. **Training pipeline as a business flow**
   The README describes a multi-step onboarding process: initial contact, prerequisite check, payment/deposit, then onboarding into training sessions. In architecture terms, this is a **human workflow implemented through static content and external tools**, not a software workflow backed by application code.

9. **Docs and session content**
   The “Session 1” through “Session 90” links in the README point to Google Docs, which function as the actual curriculum artifacts. The repository itself acts as the front door and index for those materials, while the authoritative training content lives outside the repo.

10. **Deployment and automation**
   The repo includes `.github/workflows/` for Jekyll, Node.js, Dependabot, stale issue management, and other housekeeping, plus `.circleci/config.yml`. This indicates CI/CD around a static site: validate/build the site, keep dependencies healthy, and publish to hosting such as GitHub Pages or a similar static target.

11. **Site management and compliance**
   Files like `robots.txt`, `sitemap.xml`, `.htaccess`, `htaccess`, `keybase.txt`, `SECURITY.md`, and GitHub issue templates show operational maturity around discoverability, hosting rules, verification, security reporting, and contributor workflow. These are supporting boundaries around the public site rather than core application logic.

12. **Notable absence**
   There is no clear backend service, database, authentication system, or API layer in this repository. The architecture is therefore best diagrammed as: **browser → static pages/assets → external community/documentation services**, with CI/CD responsible for publishing the static site.

Main entry points: [`index.html`](https://github.com/schooloffreelancing/back-office/blob/master/index.html) (Home), [`training.html`](https://github.com/schooloffreelancing/back-office/blob/master/training.html) (Training), [`about.html`](https://github.com/schooloffreelancing/back-office/blob/master/about.html) (About), [`.github/workflows/jekyll.yml`](https://github.com/schooloffreelancing/back-office/blob/master/.github/workflows/jekyll.yml) (CI/CD)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public_pages["Public pages"]
  node_index["Home<br/>landing page<br/>[index.html]"]
  node_about["About<br/>content page<br/>[about.html]"]
  node_start["Get started<br/>onboarding page<br/>[getstart.html]"]
  node_support["Get support<br/>support page<br/>[getsupport.html]"]
  node_training["Training<br/>program page<br/>[training.html]"]
  node_mentor["Mentor<br/>community page<br/>[mentor.html]"]
  node_faq["FAQ<br/>help page<br/>[faq.html]"]
  node_policy["Policies<br/>legal pages<br/>[tou.html]"]
  node_contact["Contact<br/>[contact.html]"]
  node_legal["Compliance<br/>legal page<br/>[impressum.html]"]
end

subgraph group_presentation["Presentation layer"]
  node_style["Site CSS<br/>stylesheet<br/>[style.css]"]
  node_script["Site JS<br/>client script<br/>[script.js]"]
end

subgraph group_vendor["Vendor plugins"]
  node_bootstrap["Bootstrap<br/>ui framework"]
  node_aos["AOS<br/>animation plugin"]
  node_slick["Slick<br/>carousel plugin"]
  node_venobox["Venobox<br/>lightbox plugin"]
  node_mixitup["MixItUp<br/>filter plugin"]
  node_gmap["Google Map<br/>map plugin<br/>[gmap.js]"]
end

subgraph group_ops["Automation and ops"]
  node_ci["CI/CD<br/>automation<br/>[jekyll.yml]"]
end

subgraph group_external["External services"]
  node_docs["Session docs<br/>external docs"]
  node_community["Community tools<br/>external platforms"]
end

node_index -->|"nav"| node_about
node_index -->|"nav"| node_start
node_index -->|"nav"| node_training
node_index -->|"nav"| node_support
node_index -->|"nav"| node_faq
node_index -->|"nav"| node_contact
node_index -->|"uses"| node_style
node_about -->|"uses"| node_style
node_start -->|"uses"| node_script
node_training -->|"uses"| node_script
node_contact -->|"uses"| node_bootstrap
node_contact -->|"uses"| node_gmap
node_training -->|"uses"| node_aos
node_training -->|"uses"| node_slick
node_about -->|"uses"| node_venobox
node_about -->|"uses"| node_mixitup
node_support -.->|"links to"| node_community
node_start -.->|"links to"| node_docs
node_training -.->|"links to"| node_docs
node_ci -.->|"builds"| node_index
node_ci -.->|"checks"| node_style
node_ci -.->|"checks"| node_script
node_policy -->|"related"| node_legal
node_index -->|"nav"| node_policy

click node_index "https://github.com/schooloffreelancing/back-office/blob/master/index.html"
click node_about "https://github.com/schooloffreelancing/back-office/blob/master/about.html"
click node_start "https://github.com/schooloffreelancing/back-office/blob/master/getstart.html"
click node_support "https://github.com/schooloffreelancing/back-office/blob/master/getsupport.html"
click node_training "https://github.com/schooloffreelancing/back-office/blob/master/training.html"
click node_mentor "https://github.com/schooloffreelancing/back-office/blob/master/mentor.html"
click node_faq "https://github.com/schooloffreelancing/back-office/blob/master/faq.html"
click node_policy "https://github.com/schooloffreelancing/back-office/blob/master/tou.html"
click node_contact "https://github.com/schooloffreelancing/back-office/blob/master/contact.html"
click node_legal "https://github.com/schooloffreelancing/back-office/blob/master/impressum.html"
click node_style "https://github.com/schooloffreelancing/back-office/blob/master/css/style.css"
click node_script "https://github.com/schooloffreelancing/back-office/blob/master/js/script.js"
click node_bootstrap "https://github.com/schooloffreelancing/back-office/tree/master/plugins/bootstrap"
click node_aos "https://github.com/schooloffreelancing/back-office/tree/master/plugins/aos"
click node_slick "https://github.com/schooloffreelancing/back-office/tree/master/plugins/slick"
click node_venobox "https://github.com/schooloffreelancing/back-office/tree/master/plugins/venobox"
click node_mixitup "https://github.com/schooloffreelancing/back-office/tree/master/plugins/mixitup"
click node_gmap "https://github.com/schooloffreelancing/back-office/blob/master/plugins/google-map/gmap.js"
click node_ci "https://github.com/schooloffreelancing/back-office/blob/master/.github/workflows/jekyll.yml"

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_about,node_start,node_support,node_training,node_mentor,node_faq,node_policy,node_contact,node_legal toneBlue
class node_style,node_script toneAmber
class node_bootstrap,node_aos,node_slick,node_venobox,node_mixitup,node_gmap toneMint
class node_ci toneRose
class node_docs,node_community toneIndigo
```

## Components

### Public pages

Static entry points and content pages for training, onboarding, support, and policy.

- [Home](https://github.com/schooloffreelancing/back-office/blob/master/index.html): landing page · Primary site entry point. · `index.html`
- [About](https://github.com/schooloffreelancing/back-office/blob/master/about.html): content page · General site and program overview. · `about.html`
- [Get started](https://github.com/schooloffreelancing/back-office/blob/master/getstart.html): onboarding page · Initial onboarding and next steps. · `getstart.html`
- [Get support](https://github.com/schooloffreelancing/back-office/blob/master/getsupport.html): support page · Help and support entry point. · `getsupport.html`
- [Training](https://github.com/schooloffreelancing/back-office/blob/master/training.html): program page · Training program overview. · `training.html`
- [Mentor](https://github.com/schooloffreelancing/back-office/blob/master/mentor.html): community page · Mentorship and guidance information. · `mentor.html`
- [FAQ](https://github.com/schooloffreelancing/back-office/blob/master/faq.html): help page · Frequently asked questions. · `faq.html`
- [Policies](https://github.com/schooloffreelancing/back-office/blob/master/tou.html): legal pages · Terms, refund, security, notice, and related policy pages. · `tou.html`
- [Contact](https://github.com/schooloffreelancing/back-office/blob/master/contact.html): contact page · Public contact and outreach page. · `contact.html`
- [Compliance](https://github.com/schooloffreelancing/back-office/blob/master/impressum.html): legal page · Impressum and legal disclosure information. · `impressum.html`

### Presentation layer

Shared site styling and client-side behavior.

- [Site CSS](https://github.com/schooloffreelancing/back-office/blob/master/css/style.css): stylesheet · Shared visual styling for all pages. · `css/style.css`
- [Site JS](https://github.com/schooloffreelancing/back-office/blob/master/js/script.js): client script · Shared client-side behaviors and enhancements. · `js/script.js`

### Vendor plugins

Bundled third-party UI assets used by the static pages.

- [Bootstrap](https://github.com/schooloffreelancing/back-office/tree/master/plugins/bootstrap): ui framework · Core responsive layout and components. · `plugins/bootstrap`
- [AOS](https://github.com/schooloffreelancing/back-office/tree/master/plugins/aos): animation plugin · Scroll-triggered animation support. · `plugins/aos`
- [Slick](https://github.com/schooloffreelancing/back-office/tree/master/plugins/slick): carousel plugin · Slider and carousel functionality. · `plugins/slick`
- [Venobox](https://github.com/schooloffreelancing/back-office/tree/master/plugins/venobox): lightbox plugin · Modal image and media viewing. · `plugins/venobox`
- [MixItUp](https://github.com/schooloffreelancing/back-office/tree/master/plugins/mixitup): filter plugin · Client-side filtering and sorting. · `plugins/mixitup`
- [Google Map](https://github.com/schooloffreelancing/back-office/blob/master/plugins/google-map/gmap.js): map plugin · Map integration for embedded location views. · `plugins/google-map/gmap.js`

### Automation and ops

Build, publishing, and site-management files.

- [CI/CD](https://github.com/schooloffreelancing/back-office/blob/master/.github/workflows/jekyll.yml): automation · GitHub Actions and CircleCI workflows for build and site maintenance. · `.github/workflows/jekyll.yml`

### External services

Off-repo documentation and community platforms linked from the site.

- **Session docs**: external docs · Training curriculum and session materials hosted outside the repository.
- **Community tools**: external platforms · Chat, issue tracking, and social channels used in the training workflow.

## Connections

- Home → About: nav · Primary site navigation.
- Home → Get started: nav · Entry into onboarding flow.
- Home → Training: nav · Program overview path.
- Home → Get support: nav · Help and support access.
- Home → FAQ: nav · Common questions.
- Home → Contact: nav · Contact access.
- Home → Site CSS: uses · Shared branding and layout.
- About → Site CSS: uses · Shared branding and layout.
- Get started → Site JS: uses · Shared interactivity and UI helpers.
- Training → Site JS: uses · Shared interactivity and UI helpers.
- Contact → Bootstrap: uses · Responsive UI components.
- Contact → Google Map: uses · Location/map embed.
- Training → AOS: uses · Scroll animations.
- Training → Slick: uses · Carousel or slider UI.
- About → Venobox: uses · Media/lightbox display.
- About → MixItUp: uses · Filtering or sorting UI.
- Get support → Community tools: links to · Outbound support and communication channels.
- Get started → Session docs: links to · Training session materials live externally.
- Training → Session docs: links to · Curriculum references external docs.
- CI/CD → Home: builds · Static site publishing and validation.
- CI/CD → Site CSS: checks · Asset build and site validation.
- CI/CD → Site JS: checks · Asset build and site validation.
- Policies → Compliance: related · Policy and disclosure pages form the compliance boundary.
- Home → Policies: nav · Access to terms and policy pages.