# hyperz111/hyperz111.github.io architecture

> Architecture diagram of the GitHub repository hyperz111/hyperz111.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/hyperz111/hyperz111.github.io
- Repository: https://github.com/hyperz111/hyperz111.github.io

## Overview

This is a static personal website: visitors view a profile and project/social links, or browse a blog index and open an article. The main layout provides navigation and keyboard-oriented presentation; page components supply content and metadata. Blog route data loaders and Markdown posts are present, but their implementation was not excerpted, so their connections to the views are shown as unverified rather than asserted. The README gives no further capability detail.

Main entry points: [`src/components/Navbar.svelte`](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Navbar.svelte) (Navigation), [`src/routes/(main)/+layout.svelte`](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/%2Blayout.svelte) (Main layout), [`src/routes/(main)/blogs/[slug]/+page.svelte`](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%5Bslug%5D/%2Bpage.svelte) (Article page), [`src/routes/(main)/blogs/+page.svelte`](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%2Bpage.svelte) (Blog index)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Site shell"]
  node_root_layout["Root layout<br/>[+layout.svelte]"]
  node_main_layout["Main layout<br/>[+layout.svelte]"]
  node_navbar["Navigation<br/>[Navbar.svelte]"]
  node_footer["Keyboard help<br/>[Footer.svelte]"]
end

subgraph group_profile["Profile pages"]
  node_home["Home page<br/>[+page.svelte]"]
  node_head["Page metadata<br/>[Head.svelte]"]
end

subgraph group_blog["Blog"]
  node_blog_index_data["Blog index data<br/>[+page.js]"]
  node_blog_index["Blog index<br/>[+page.svelte]"]
  node_article_data["Article data<br/>[+page.js]"]
  node_article["Article page<br/>[+page.svelte]"]
  node_posts["Markdown posts"]
  node_date_utils["Date formatting<br/>[utils.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"uses navigation"| node_navbar
node_navbar -->|"links home"| node_home
node_navbar -->|"links blogs"| node_blog_index
node_root_layout -->|"renders children"| node_main_layout
node_main_layout -->|"renders"| node_navbar
node_main_layout -->|"renders conditionally"| node_footer
node_home -->|"sets metadata"| node_head
node_blog_index -->|"sets metadata"| node_head
node_article -->|"sets metadata"| node_head
node_article -->|"formats date"| node_date_utils
node_blog_index_data -.->|"provides data"| node_blog_index
node_article_data -.->|"provides data"| node_article
node_posts -.->|"supplies posts"| node_blog_index_data
node_posts -.->|"supplies article"| node_article_data

click node_root_layout "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/%2Blayout.svelte"
click node_main_layout "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/%2Blayout.svelte"
click node_navbar "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Navbar.svelte"
click node_footer "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Footer.svelte"
click node_home "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/%2Bpage.svelte"
click node_head "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Head.svelte"
click node_blog_index_data "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%2Bpage.js"
click node_blog_index "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%2Bpage.svelte"
click node_article_data "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%5Bslug%5D/%2Bpage.js"
click node_article "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%5Bslug%5D/%2Bpage.svelte"
click node_posts "https://github.com/hyperz111/hyperz111.github.io/tree/main/src/blogs"
click node_date_utils "https://github.com/hyperz111/hyperz111.github.io/blob/main/src/lib/utils.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_root_layout,node_main_layout,node_navbar,node_footer toneBlue
class node_home,node_head toneAmber
class node_blog_index_data,node_blog_index,node_article_data,node_article,node_posts,node_date_utils toneMint
class node_visitor toneIndigo
```

## Components

### Site shell

- [Root layout](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/%2Blayout.svelte): `src/routes/+layout.svelte`
- [Main layout](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/%2Blayout.svelte): `src/routes/(main)/+layout.svelte`
- [Navigation](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Navbar.svelte): `src/components/Navbar.svelte`
- [Keyboard help](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Footer.svelte): `src/components/Footer.svelte`

### Profile pages

- [Home page](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/%2Bpage.svelte): `src/routes/(main)/+page.svelte`
- [Page metadata](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/components/Head.svelte): `src/components/Head.svelte`

### Blog

- [Blog index data](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%2Bpage.js): `src/routes/(main)/blogs/+page.js`
- [Blog index](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%2Bpage.svelte): `src/routes/(main)/blogs/+page.svelte`
- [Article data](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%5Bslug%5D/%2Bpage.js): `src/routes/(main)/blogs/[slug]/+page.js`
- [Article page](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/routes/(main)/blogs/%5Bslug%5D/%2Bpage.svelte): `src/routes/(main)/blogs/[slug]/+page.svelte`
- [Markdown posts](https://github.com/hyperz111/hyperz111.github.io/tree/main/src/blogs): `src/blogs`
- [Date formatting](https://github.com/hyperz111/hyperz111.github.io/blob/main/src/lib/utils.js): `src/lib/utils.js`

### Other components

- **Visitor**

## Connections

- Visitor → Navigation: uses navigation (evidence: `src/components/Navbar.svelte`)
- Navigation → Home page: links home (evidence: `src/components/Navbar.svelte`)
- Navigation → Blog index: links blogs (evidence: `src/components/Navbar.svelte`)
- Root layout → Main layout: renders children (evidence: `src/routes/+layout.svelte`)
- Main layout → Navigation: renders (evidence: `src/routes/(main)/+layout.svelte`)
- Main layout → Keyboard help: renders conditionally (evidence: `src/routes/(main)/+layout.svelte`)
- Home page → Page metadata: sets metadata (evidence: `src/routes/(main)/+page.svelte`)
- Blog index → Page metadata: sets metadata (evidence: `src/routes/(main)/blogs/+page.svelte`)
- Article page → Page metadata: sets metadata (evidence: `src/routes/(main)/blogs/[slug]/+page.svelte`)
- Article page → Date formatting: formats date (evidence: `src/routes/(main)/blogs/[slug]/+page.svelte`)
- Blog index data → Blog index: provides data
- Article data → Article page: provides data
- Markdown posts → Blog index data: supplies posts
- Markdown posts → Article data: supplies article