# mdd95/site architecture

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

## Overview

This is a small SvelteKit personal website. A visitor opens the home page, which composes a navigation bar, introduction, and footer inside a shared layout; the navigation bar also provides theme toggling. The sampled source supports this page composition and the layout’s theme integration. The README is empty, so no further product capabilities are documented.

Main entry points: [`src/routes/+page.svelte`](https://github.com/mdd95/site/blob/main/src/routes/%2Bpage.svelte) (Home Page), [`src/routes/+layout.svelte`](https://github.com/mdd95/site/blob/main/src/routes/%2Blayout.svelte) (Root Layout), [`src/lib/components/Navbar.svelte`](https://github.com/mdd95/site/blob/main/src/lib/components/Navbar.svelte) (Navigation), [`src/lib/components/Hero.svelte`](https://github.com/mdd95/site/blob/main/src/lib/components/Hero.svelte) (Introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Page Composition"]
  node_home["Home Page<br/>[+page.svelte]"]
  node_hero["Introduction<br/>[Hero.svelte]"]
  node_navbar["Navigation<br/>[Navbar.svelte]"]
  node_footer["Footer<br/>[Footer.svelte]"]
end

subgraph group_shared["Shared Shell"]
  node_layout["Root Layout<br/>[+layout.svelte]"]
  node_appcss["Global Styles<br/>[app.css]"]
  node_buttoncss["Button Styles<br/>[button.css]"]
end

node_visitor(("Visitor"))
node_modewatcher["Theme Library"]

node_visitor -->|"opens"| node_home
node_layout -->|"renders child"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_footer
node_layout -->|"imports styles"| node_appcss
node_layout -->|"imports styles"| node_buttoncss
node_layout -->|"renders watcher"| node_modewatcher
node_navbar -->|"reads mode; toggles"| node_modewatcher

click node_home "https://github.com/mdd95/site/blob/main/src/routes/%2Bpage.svelte"
click node_hero "https://github.com/mdd95/site/blob/main/src/lib/components/Hero.svelte"
click node_navbar "https://github.com/mdd95/site/blob/main/src/lib/components/Navbar.svelte"
click node_footer "https://github.com/mdd95/site/blob/main/src/lib/components/Footer.svelte"
click node_layout "https://github.com/mdd95/site/blob/main/src/routes/%2Blayout.svelte"
click node_appcss "https://github.com/mdd95/site/blob/main/src/app.css"
click node_buttoncss "https://github.com/mdd95/site/blob/main/src/styles/button.css"

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_home,node_hero,node_navbar,node_footer toneBlue
class node_layout,node_appcss,node_buttoncss toneAmber
class node_visitor,node_modewatcher toneIndigo
```

## Components

### Page Composition

- [Home Page](https://github.com/mdd95/site/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [Introduction](https://github.com/mdd95/site/blob/main/src/lib/components/Hero.svelte): `src/lib/components/Hero.svelte`
- [Navigation](https://github.com/mdd95/site/blob/main/src/lib/components/Navbar.svelte): `src/lib/components/Navbar.svelte`
- [Footer](https://github.com/mdd95/site/blob/main/src/lib/components/Footer.svelte): `src/lib/components/Footer.svelte`

### Shared Shell

- [Root Layout](https://github.com/mdd95/site/blob/main/src/routes/%2Blayout.svelte): `src/routes/+layout.svelte`
- [Global Styles](https://github.com/mdd95/site/blob/main/src/app.css): `src/app.css`
- [Button Styles](https://github.com/mdd95/site/blob/main/src/styles/button.css): `src/styles/button.css`

### Other components

- **Visitor**
- **Theme Library**

## Connections

- Visitor → Home Page: opens
- Root Layout → Home Page: renders child
- Home Page → Navigation: renders
- Home Page → Introduction: renders
- Home Page → Footer: renders
- Root Layout → Global Styles: imports styles
- Root Layout → Button Styles: imports styles
- Root Layout → Theme Library: renders watcher
- Navigation → Theme Library: reads mode; toggles