# hansenyangg/website architecture

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

- Interactive diagram: https://gitdiagram.com/hansenyangg/website
- Repository: https://github.com/hansenyangg/website

## Overview

HansenOS is a browser-based, System 7–style desktop. Users activate desktop icons to open app windows, then interact with those windows or use the menu bar for actions such as printing the resume and emptying the trash. The main runtime is a single JavaScript file that manages windowing, desktop interactions, and small built-in features. The HTML is present in the tree but was not sampled, so its specific templates and layout are not described beyond the JavaScript’s references to them.

Main entry points: [`script.js`](https://github.com/hansenyangg/website/blob/master/script.js) (Window manager), [`index.html`](https://github.com/hansenyangg/website/blob/master/index.html) (Desktop UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop interaction"]
  node_desktop_ui["Desktop UI<br/>[index.html]"]
  node_icon_interaction["Icon interaction<br/>[script.js]"]
  node_menu_actions["Menu actions<br/>[script.js]"]
end

subgraph group_windows["Window management"]
  node_window_manager["Window manager<br/>[script.js]"]
  node_app_templates["App templates<br/>[index.html]"]
  node_image_viewer["Image viewer<br/>[script.js]"]
  node_window_controls["Window controls<br/>[script.js]"]
end

subgraph group_features["Built-in features"]
  node_trash_state["Trash state<br/>[script.js]"]
  node_terminal["Terminal<br/>[script.js]"]
  node_clock["Desktop clock<br/>[script.js]"]
  node_boot_screen["Boot screen<br/>[script.js]"]
  node_browser_print["Browser printing"]
end

node_user(("Desktop user"))

node_user -.->|"interacts with"| node_desktop_ui
node_desktop_ui -.->|"handles icons"| node_icon_interaction
node_icon_interaction -->|"opens apps"| node_window_manager
node_window_manager -->|"clones template"| node_app_templates
node_window_manager -->|"creates viewer"| node_image_viewer
node_window_manager -->|"registers controls"| node_window_controls
node_menu_actions -->|"opens resume"| node_window_manager
node_menu_actions -->|"calls print"| node_browser_print
node_menu_actions -->|"empties trash"| node_trash_state

click node_desktop_ui "https://github.com/hansenyangg/website/blob/master/index.html"
click node_icon_interaction "https://github.com/hansenyangg/website/blob/master/script.js"
click node_menu_actions "https://github.com/hansenyangg/website/blob/master/script.js"
click node_window_manager "https://github.com/hansenyangg/website/blob/master/script.js"
click node_app_templates "https://github.com/hansenyangg/website/blob/master/index.html"
click node_image_viewer "https://github.com/hansenyangg/website/blob/master/script.js"
click node_window_controls "https://github.com/hansenyangg/website/blob/master/script.js"
click node_trash_state "https://github.com/hansenyangg/website/blob/master/script.js"
click node_terminal "https://github.com/hansenyangg/website/blob/master/script.js"
click node_clock "https://github.com/hansenyangg/website/blob/master/script.js"
click node_boot_screen "https://github.com/hansenyangg/website/blob/master/script.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_desktop_ui,node_icon_interaction,node_menu_actions,node_user toneBlue
class node_window_manager,node_app_templates,node_image_viewer,node_window_controls toneAmber
class node_trash_state,node_terminal,node_clock,node_boot_screen,node_browser_print toneMint
```

## Components

### Desktop interaction

- [Desktop UI](https://github.com/hansenyangg/website/blob/master/index.html): `index.html`
- [Icon interaction](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- [Menu actions](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`

### Window management

- [Window manager](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- [App templates](https://github.com/hansenyangg/website/blob/master/index.html): `index.html`
- [Image viewer](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- [Window controls](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`

### Built-in features

- [Trash state](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- [Terminal](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- [Desktop clock](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- [Boot screen](https://github.com/hansenyangg/website/blob/master/script.js): `script.js`
- **Browser printing**

### Other components

- **Desktop user**

## Connections

- Desktop user → Desktop UI: interacts with
- Desktop UI → Icon interaction: handles icons
- Icon interaction → Window manager: opens apps (evidence: `script.js`)
- Window manager → App templates: clones template (evidence: `script.js`)
- Window manager → Image viewer: creates viewer (evidence: `script.js`)
- Window manager → Window controls: registers controls (evidence: `script.js`)
- Menu actions → Window manager: opens resume (evidence: `script.js`)
- Menu actions → Browser printing: calls print (evidence: `script.js`)
- Menu actions → Trash state: empties trash (evidence: `script.js`)