# jalemgrapani/jalemgrapani.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/jalemgrapani/jalemgrapani.github.io
- Repository: https://github.com/jalemgrapani/jalemgrapani.github.io

## Overview

This repository is a portfolio of independent web projects, rather than one application with a shared runtime. A visitor can open the portfolio landing page and explore standalone demos, including a PHP watch shop and a point-of-sale interface with PHP category and product endpoints. The tree also shows separate café, travel, and themed interactive projects. Sampled source confirms the watch shop’s page routing and the POS endpoints’ database access; wiring among the other demos, and between the POS frontend and backend, was not shown.

Main entry points: [`projects/A01/index.php`](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/index.php) (Shop router), [`projects/A04/FE/index.html`](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/FE/index.html) (POS interface), [`projects/A04/BE/categories.php`](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/categories.php) (Category endpoint), [`projects/A04/BE/products.php`](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/products.php) (Product endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio site"]
  node_portfolio_page["Portfolio page<br/>[index.html]"]
end

subgraph group_watch["Watch shop"]
  node_watch_router["Shop router<br/>[index.php]"]
  node_watch_catalog["Watch catalog<br/>[outlet.php]"]
  node_brand_catalogs["Brand catalogs"]
  node_store_info["Store information<br/>[stores.php]"]
  node_contact_form["Contact form<br/>[contact.php]"]
  node_cart_view["Cart view<br/>[cart.php]"]
  node_shop_footer["Shop footer<br/>[footer.php]"]
end

subgraph group_pos["Point of sale"]
  node_pos_frontend["POS interface<br/>[index.html]"]
  node_pos_categories["Category endpoint<br/>[categories.php]"]
  node_pos_products["Product endpoint<br/>[products.php]"]
  node_pos_connection[("Database connection<br/>[connect.php]")]
end

subgraph group_web_demos["Web demos"]
  node_cafe_demo["Cafe demo<br/>[index.html]"]
  node_travel_demo["Travel demo<br/>[index.html]"]
  node_web_demo_a02["Web demo A02<br/>[index.html]"]
  node_web_demo_w01["Web demo W01<br/>[index.html]"]
  node_web_demo_w02["Web demo W02<br/>[index.html]"]
  node_web_demo_w03["Web demo W03<br/>[index.html]"]
end

subgraph group_interactive["Interactive demos"]
  node_champion_demo["Champion browser<br/>[champions.html]"]
  node_search_demo["Search demo<br/>[search.html]"]
  node_view_demo["View demo<br/>[view.html]"]
  node_game_demo["Game landing<br/>[index.html]"]
  node_parallax_demo["Parallax demo<br/>[index.html]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens"| node_portfolio_page
node_watch_router -->|"includes page"| node_watch_catalog
node_watch_router -->|"includes page"| node_brand_catalogs
node_watch_router -->|"includes footer"| node_shop_footer
node_pos_categories -->|"loads connection"| node_pos_connection
node_pos_products -->|"loads connection"| node_pos_connection
node_pos_frontend -.->|"possible API use"| node_pos_categories
node_pos_frontend -.->|"possible API use"| node_pos_products

click node_portfolio_page "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/index.html"
click node_watch_router "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/index.php"
click node_watch_catalog "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/outlet.php"
click node_brand_catalogs "https://github.com/jalemgrapani/jalemgrapani.github.io/tree/main/projects/A01/shared"
click node_store_info "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/stores.php"
click node_contact_form "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/contact.php"
click node_cart_view "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/cart.php"
click node_shop_footer "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/shared/footer.php"
click node_pos_frontend "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/FE/index.html"
click node_pos_categories "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/categories.php"
click node_pos_products "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/products.php"
click node_pos_connection "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/connect.php"
click node_cafe_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A03/index.html"
click node_travel_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A05/index.html"
click node_web_demo_a02 "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A02/index.html"
click node_web_demo_w01 "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W01/index.html"
click node_web_demo_w02 "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W02/index.html"
click node_web_demo_w03 "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W03/index.html"
click node_champion_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W04/champions.html"
click node_search_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W04/search.html"
click node_view_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W04/view.html"
click node_game_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W05/index.html"
click node_parallax_demo "https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W06/index.html"

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_portfolio_page toneBlue
class node_watch_router,node_watch_catalog,node_brand_catalogs,node_store_info,node_contact_form,node_cart_view,node_shop_footer toneAmber
class node_pos_frontend,node_pos_categories,node_pos_products,node_pos_connection toneMint
class node_cafe_demo,node_travel_demo,node_web_demo_a02,node_web_demo_w01,node_web_demo_w02,node_web_demo_w03 toneRose
class node_champion_demo,node_search_demo,node_view_demo,node_game_demo,node_parallax_demo,node_visitor toneIndigo
```

## Components

### Portfolio site

- [Portfolio page](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/index.html): `index.html`

### Watch shop

- [Shop router](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/index.php): `projects/A01/index.php`
- [Watch catalog](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/outlet.php): `projects/A01/pages/outlet.php`
- [Brand catalogs](https://github.com/jalemgrapani/jalemgrapani.github.io/tree/main/projects/A01/shared): `projects/A01/shared`
- [Store information](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/stores.php): `projects/A01/pages/stores.php`
- [Contact form](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/contact.php): `projects/A01/pages/contact.php`
- [Cart view](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/pages/cart.php): `projects/A01/pages/cart.php`
- [Shop footer](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A01/shared/footer.php): `projects/A01/shared/footer.php`

### Point of sale

- [POS interface](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/FE/index.html): `projects/A04/FE/index.html`
- [Category endpoint](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/categories.php): `projects/A04/BE/categories.php`
- [Product endpoint](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/products.php): `projects/A04/BE/products.php`
- [Database connection](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A04/BE/connect.php): `projects/A04/BE/connect.php`

### Web demos

- [Cafe demo](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A03/index.html): `projects/A03/index.html`
- [Travel demo](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A05/index.html): `projects/A05/index.html`
- [Web demo A02](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/A02/index.html): `projects/A02/index.html`
- [Web demo W01](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W01/index.html): `projects/W01/index.html`
- [Web demo W02](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W02/index.html): `projects/W02/index.html`
- [Web demo W03](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W03/index.html): `projects/W03/index.html`

### Interactive demos

- [Champion browser](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W04/champions.html): `projects/W04/champions.html`
- [Search demo](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W04/search.html): `projects/W04/search.html`
- [View demo](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W04/view.html): `projects/W04/view.html`
- [Game landing](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W05/index.html): `projects/W05/index.html`
- [Parallax demo](https://github.com/jalemgrapani/jalemgrapani.github.io/blob/main/projects/W06/index.html): `projects/W06/index.html`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens
- Shop router → Watch catalog: includes page (evidence: `projects/A01/index.php`)
- Shop router → Brand catalogs: includes page (evidence: `projects/A01/index.php`)
- Shop router → Shop footer: includes footer (evidence: `projects/A01/index.php`)
- Category endpoint → Database connection: loads connection (evidence: `projects/A04/BE/categories.php`)
- Product endpoint → Database connection: loads connection (evidence: `projects/A04/BE/products.php`)
- POS interface → Category endpoint: possible API use
- POS interface → Product endpoint: possible API use