# thepsychologysquare/the-psychology-square architecture

> Architecture diagram of the GitHub repository thepsychologysquare/the-psychology-square, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thepsychologysquare/the-psychology-square
- Repository: https://github.com/thepsychologysquare/the-psychology-square

## Overview

This is a small static practice website, with separate pages for the practice and two named profiles, plus an admin area. The sampled script adds a generated availability-style grid, updates the footer year, and reveals selected elements on scroll. The HTML pages, admin configuration, and images were not sampled, so their links and detailed content are uncertain; the graph avoids asserting page navigation or CMS behavior beyond what the tree supports.

Main entry points: [`index.html`](https://github.com/thepsychologysquare/the-psychology-square/blob/main/index.html) (Practice page), [`script.js`](https://github.com/thepsychologysquare/the-psychology-square/blob/main/script.js) (Page interactions), [`sehar.html`](https://github.com/thepsychologysquare/the-psychology-square/blob/main/sehar.html) (Sehar profile), [`sohail.html`](https://github.com/thepsychologysquare/the-psychology-square/blob/main/sohail.html) (Sohail profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Practice website"]
  node_home["Practice page<br/>[index.html]"]
  node_sehar["Sehar profile<br/>[sehar.html]"]
  node_sohail["Sohail profile<br/>[sohail.html]"]
  node_images["Site images"]
  node_behavior["Page interactions<br/>[script.js]"]
  node_styles["Site styling<br/>[styles.css]"]
end

subgraph group_admin["Admin area"]
  node_adminpage["Admin interface<br/>[index.html]"]
  node_adminconfig["Admin configuration<br/>[config.yml]"]
end

node_visitor(("Site visitor"))
node_adminuser(("Admin user"))

node_visitor -->|"views"| node_home
node_visitor -->|"views"| node_sehar
node_visitor -->|"views"| node_sohail
node_behavior -->|"updates DOM"| node_home
node_adminuser -->|"opens"| node_adminpage

click node_home "https://github.com/thepsychologysquare/the-psychology-square/blob/main/index.html"
click node_sehar "https://github.com/thepsychologysquare/the-psychology-square/blob/main/sehar.html"
click node_sohail "https://github.com/thepsychologysquare/the-psychology-square/blob/main/sohail.html"
click node_images "https://github.com/thepsychologysquare/the-psychology-square/tree/main/images"
click node_behavior "https://github.com/thepsychologysquare/the-psychology-square/blob/main/script.js"
click node_styles "https://github.com/thepsychologysquare/the-psychology-square/blob/main/styles.css"
click node_adminpage "https://github.com/thepsychologysquare/the-psychology-square/blob/main/admin/index.html"
click node_adminconfig "https://github.com/thepsychologysquare/the-psychology-square/blob/main/admin/config.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_home,node_sehar,node_sohail,node_images,node_behavior,node_styles,node_adminuser toneBlue
class node_adminpage,node_adminconfig toneAmber
class node_visitor toneIndigo
```

## Components

### Practice website

- [Practice page](https://github.com/thepsychologysquare/the-psychology-square/blob/main/index.html): `index.html`
- [Sehar profile](https://github.com/thepsychologysquare/the-psychology-square/blob/main/sehar.html): `sehar.html`
- [Sohail profile](https://github.com/thepsychologysquare/the-psychology-square/blob/main/sohail.html): `sohail.html`
- [Site images](https://github.com/thepsychologysquare/the-psychology-square/tree/main/images): `images`
- [Page interactions](https://github.com/thepsychologysquare/the-psychology-square/blob/main/script.js): `script.js`
- [Site styling](https://github.com/thepsychologysquare/the-psychology-square/blob/main/styles.css): `styles.css`

### Admin area

- [Admin interface](https://github.com/thepsychologysquare/the-psychology-square/blob/main/admin/index.html): `admin/index.html`
- [Admin configuration](https://github.com/thepsychologysquare/the-psychology-square/blob/main/admin/config.yml): `admin/config.yml`

### Other components

- **Site visitor**
- **Admin user**

## Connections

- Site visitor → Practice page: views
- Site visitor → Sehar profile: views
- Site visitor → Sohail profile: views
- Page interactions → Practice page: updates DOM
- Admin user → Admin interface: opens