# adeena-falah/techblog architecture

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

- Interactive diagram: https://gitdiagram.com/adeena-falah/techblog
- Repository: https://github.com/adeena-falah/techblog

## Overview

TechBlog is a small static blog site. Its visible runtime behavior is a browser script that highlights the current navigation link, updates the footer year, adds card hover effects, logs page/card information, and provides a function that searches card titles. The HTML and CSS files are present, but their contents and wiring to the script were not sampled, so those connections are not asserted.

Main entry points: [`app.js`](https://github.com/adeena-falah/techblog/blob/main/app.js) (Page interactions), [`index.html`](https://github.com/adeena-falah/techblog/blob/main/index.html) (Blog page), [`about.html`](https://github.com/adeena-falah/techblog/blob/main/about.html) (About page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Blog Frontend"]
  node_index["Blog page<br/>[index.html]"]
  node_about["About page<br/>[about.html]"]
  node_script["Page interactions<br/>[app.js]"]
  node_styles["Site styles<br/>[style.css]"]
  node_matches["Title matches<br/>[app.js]"]
end

node_visitor(("Site visitor"))
node_dom["Browser DOM"]

node_visitor -->|"visits"| node_index
node_visitor -->|"visits"| node_about
node_script -->|"reads and updates"| node_dom
node_script -->|"returns search results"| node_matches

click node_index "https://github.com/adeena-falah/techblog/blob/main/index.html"
click node_about "https://github.com/adeena-falah/techblog/blob/main/about.html"
click node_script "https://github.com/adeena-falah/techblog/blob/main/app.js"
click node_styles "https://github.com/adeena-falah/techblog/blob/main/style.css"
click node_matches "https://github.com/adeena-falah/techblog/blob/main/app.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_index,node_about,node_script,node_styles,node_matches,node_dom toneBlue
class node_visitor toneIndigo
```

## Components

### Blog Frontend

- [Blog page](https://github.com/adeena-falah/techblog/blob/main/index.html): `index.html`
- [About page](https://github.com/adeena-falah/techblog/blob/main/about.html): `about.html`
- [Page interactions](https://github.com/adeena-falah/techblog/blob/main/app.js): `app.js`
- [Site styles](https://github.com/adeena-falah/techblog/blob/main/style.css): `style.css`
- [Title matches](https://github.com/adeena-falah/techblog/blob/main/app.js): `app.js`

### Other components

- **Site visitor**
- **Browser DOM**

## Connections

- Site visitor → Blog page: visits
- Site visitor → About page: visits
- Page interactions → Browser DOM: reads and updates
- Page interactions → Title matches: returns search results