# berdummy55-svg/portofolio architecture

> Architecture diagram of the GitHub repository berdummy55-svg/portofolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/berdummy55-svg/portofolio
- Repository: https://github.com/berdummy55-svg/portofolio

## Overview

This is a lightweight manga-reading website: readers browse a dynamically populated gallery, choose a manga and chapter, then read chapter pages in scroll or ebook mode. The repository contains the reader logic and a service worker; the README describes Cloudflare R2 content and an admin/worker upload capability whose implementation is not present in the tree. Edges for undocumented page-to-page navigation are omitted; the R2 and upload relationships follow the README or sampled reader source.

Main entry points: [`project1/reader.js`](https://github.com/berdummy55-svg/portofolio/blob/main/project1/reader.js) (Reading controls), [`index.html`](https://github.com/berdummy55-svg/portofolio/blob/main/index.html) (Manga gallery), [`project1/manga1/manga.html`](https://github.com/berdummy55-svg/portofolio/blob/main/project1/manga1/manga.html) (Manga details), [`sw.js`](https://github.com/berdummy55-svg/portofolio/blob/main/sw.js) (Offline cache)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browse["Browse"]
  node_gallery["Manga gallery<br/>[index.html]"]
  node_manga_detail["Manga details<br/>[manga.html]"]
end

subgraph group_reading["Read manga"]
  node_chapter_reader["Reader page<br/>[reader.html]"]
  node_reader_logic["Reading controls<br/>[reader.js]"]
  node_styling["Site styling<br/>[style.css]"]
end

subgraph group_delivery["Content delivery"]
  node_catalog[("Manga catalog")]
  node_chapter_images[("Chapter images")]
  node_r2["Cloudflare R2"]
  node_service_worker["Offline cache<br/>[sw.js]"]
  node_admin["Admin panel"]
  node_upload_worker["Upload worker"]
end

node_reader(("Reader"))

node_reader -->|"browses"| node_gallery
node_gallery -.->|"opens manga"| node_manga_detail
node_manga_detail -.->|"opens chapter"| node_chapter_reader
node_reader_logic -->|"fetches metadata"| node_catalog
node_reader_logic -->|"loads pages"| node_chapter_images
node_catalog -->|"stored in"| node_r2
node_chapter_images -->|"stored in"| node_r2
node_service_worker -->|"caches assets"| node_r2
node_admin -.->|"submits uploads"| node_upload_worker
node_upload_worker -.->|"uploads content"| node_r2

click node_gallery "https://github.com/berdummy55-svg/portofolio/blob/main/index.html"
click node_manga_detail "https://github.com/berdummy55-svg/portofolio/blob/main/project1/manga1/manga.html"
click node_chapter_reader "https://github.com/berdummy55-svg/portofolio/blob/main/project1/reader.html"
click node_reader_logic "https://github.com/berdummy55-svg/portofolio/blob/main/project1/reader.js"
click node_styling "https://github.com/berdummy55-svg/portofolio/blob/main/style.css"
click node_service_worker "https://github.com/berdummy55-svg/portofolio/blob/main/sw.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_gallery,node_manga_detail toneBlue
class node_chapter_reader,node_reader_logic,node_styling toneAmber
class node_catalog,node_chapter_images,node_r2,node_service_worker,node_admin,node_upload_worker toneMint
class node_reader toneIndigo
```

## Components

### Browse

- [Manga gallery](https://github.com/berdummy55-svg/portofolio/blob/main/index.html): `index.html`
- [Manga details](https://github.com/berdummy55-svg/portofolio/blob/main/project1/manga1/manga.html): `project1/manga1/manga.html`

### Read manga

- [Reader page](https://github.com/berdummy55-svg/portofolio/blob/main/project1/reader.html): `project1/reader.html`
- [Reading controls](https://github.com/berdummy55-svg/portofolio/blob/main/project1/reader.js): `project1/reader.js`
- [Site styling](https://github.com/berdummy55-svg/portofolio/blob/main/style.css): `style.css`

### Content delivery

- **Manga catalog**
- **Chapter images**
- **Cloudflare R2**
- [Offline cache](https://github.com/berdummy55-svg/portofolio/blob/main/sw.js): `sw.js`
- **Admin panel**
- **Upload worker**

### Other components

- **Reader**

## Connections

- Reader → Manga gallery: browses (evidence: `README.md`)
- Manga gallery → Manga details: opens manga
- Manga details → Reader page: opens chapter
- Reading controls → Manga catalog: fetches metadata (evidence: `project1/reader.js`)
- Reading controls → Chapter images: loads pages (evidence: `project1/reader.js`)
- Manga catalog → Cloudflare R2: stored in (evidence: `README.md`)
- Chapter images → Cloudflare R2: stored in (evidence: `README.md`)
- Offline cache → Cloudflare R2: caches assets (evidence: `sw.js`)
- Admin panel → Upload worker: submits uploads (evidence: `README.md`)
- Upload worker → Cloudflare R2: uploads content (evidence: `README.md`)