# christopher-mulenga/mulenga-corps architecture

> Architecture diagram of the GitHub repository christopher-mulenga/mulenga-corps, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/christopher-mulenga/mulenga-corps
- Repository: https://github.com/christopher-mulenga/mulenga-corps

## Overview

Mulenga Corps is a responsive, accessible six-page institutional website about services for people with visual impairments. Visitors explore organisational information, departments, articles and work, then can use the contact page to enquire or participate. The README documents client-side form validation and asynchronous submission to Formspree, plus a portfolio lightbox and scroll-triggered effects. Relationships below rely on README documentation; source excerpts were unavailable, so implementation details beyond that documentation are omitted.

Main entry points: [`assets/css/style.css`](https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/css/style.css) (Design system), [`portfolio.html`](https://github.com/christopher-mulenga/mulenga-corps/blob/main/portfolio.html) (Portfolio), [`contact.html`](https://github.com/christopher-mulenga/mulenga-corps/blob/main/contact.html) (Contact), [`index.html`](https://github.com/christopher-mulenga/mulenga-corps/blob/main/index.html) (Home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Website pages"]
  node_home["Home<br/>[index.html]"]
  node_about["About<br/>[about.html]"]
  node_services["Services<br/>[services.html]"]
  node_articles["Articles<br/>[articles.html]"]
  node_portfolio["Portfolio<br/>[portfolio.html]"]
  node_contact["Contact<br/>[contact.html]"]
end

subgraph group_presentation["Visual design"]
  node_styles["Design system<br/>[style.css]"]
end

subgraph group_interaction["Interactions"]
  node_form["Contact form<br/>[main.js]"]
  node_lightbox["Portfolio lightbox<br/>[main.js]"]
  node_scroll["Scroll effects<br/>[main.js]"]
end

node_visitor(("Visitor"))
node_formspree["Formspree"]

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_about
node_visitor -->|"opens"| node_services
node_visitor -->|"opens"| node_articles
node_visitor -->|"opens"| node_portfolio
node_visitor -->|"opens"| node_contact
node_home -->|"uses"| node_styles
node_about -->|"uses"| node_styles
node_services -->|"uses"| node_styles
node_articles -->|"uses"| node_styles
node_portfolio -->|"uses"| node_styles
node_contact -->|"uses"| node_styles
node_contact -->|"validates and submits"| node_form
node_form -->|"submits asynchronously"| node_formspree
node_portfolio -->|"opens gallery"| node_lightbox
node_scroll -->|"reveals content"| node_home

click node_home "https://github.com/christopher-mulenga/mulenga-corps/blob/main/index.html"
click node_about "https://github.com/christopher-mulenga/mulenga-corps/blob/main/about.html"
click node_services "https://github.com/christopher-mulenga/mulenga-corps/blob/main/services.html"
click node_articles "https://github.com/christopher-mulenga/mulenga-corps/blob/main/articles.html"
click node_portfolio "https://github.com/christopher-mulenga/mulenga-corps/blob/main/portfolio.html"
click node_contact "https://github.com/christopher-mulenga/mulenga-corps/blob/main/contact.html"
click node_styles "https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/css/style.css"
click node_form "https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/js/main.js"
click node_lightbox "https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/js/main.js"
click node_scroll "https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/js/main.js"

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_home,node_about,node_services,node_articles,node_portfolio,node_contact toneBlue
class node_styles toneAmber
class node_form,node_lightbox,node_scroll toneMint
class node_visitor,node_formspree toneIndigo
```

## Components

### Website pages

- [Home](https://github.com/christopher-mulenga/mulenga-corps/blob/main/index.html): `index.html`
- [About](https://github.com/christopher-mulenga/mulenga-corps/blob/main/about.html): `about.html`
- [Services](https://github.com/christopher-mulenga/mulenga-corps/blob/main/services.html): `services.html`
- [Articles](https://github.com/christopher-mulenga/mulenga-corps/blob/main/articles.html): `articles.html`
- [Portfolio](https://github.com/christopher-mulenga/mulenga-corps/blob/main/portfolio.html): `portfolio.html`
- [Contact](https://github.com/christopher-mulenga/mulenga-corps/blob/main/contact.html): `contact.html`

### Visual design

- [Design system](https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/css/style.css): `assets/css/style.css`

### Interactions

- [Contact form](https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/js/main.js): `assets/js/main.js`
- [Portfolio lightbox](https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/js/main.js): `assets/js/main.js`
- [Scroll effects](https://github.com/christopher-mulenga/mulenga-corps/blob/main/assets/js/main.js): `assets/js/main.js`

### Other components

- **Visitor**
- **Formspree**

## Connections

- Visitor → Home: opens (evidence: `README.md`)
- Visitor → About: opens (evidence: `README.md`)
- Visitor → Services: opens (evidence: `README.md`)
- Visitor → Articles: opens (evidence: `README.md`)
- Visitor → Portfolio: opens (evidence: `README.md`)
- Visitor → Contact: opens (evidence: `README.md`)
- Home → Design system: uses (evidence: `README.md`)
- About → Design system: uses (evidence: `README.md`)
- Services → Design system: uses (evidence: `README.md`)
- Articles → Design system: uses (evidence: `README.md`)
- Portfolio → Design system: uses (evidence: `README.md`)
- Contact → Design system: uses (evidence: `README.md`)
- Contact → Contact form: validates and submits (evidence: `README.md`)
- Contact form → Formspree: submits asynchronously (evidence: `README.md`)
- Portfolio → Portfolio lightbox: opens gallery (evidence: `README.md`)
- Scroll effects → Home: reveals content (evidence: `README.md`)