# luna-hook/lunahookportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/luna-hook/lunahookportfolio
- Repository: https://github.com/luna-hook/lunahookportfolio

## Overview

Luna Hook Portfolio is a static developer portfolio. Visitors enter through the home page, browse plugin listings and individual guides, explore server listings, or open the contact page. Route modules hand off rendering to shared UI components; plugin detail routes additionally look up catalog data. The shared UI also provides plugin search, server filtering, and navigation. The excerpts show these relationships, but do not expose all UI internals or server data definitions.

Main entry points: [`app/ui.tsx`](https://github.com/luna-hook/lunahookportfolio/blob/main/app/ui.tsx) (Shared UI), [`app/plugins/[slug]/page.tsx`](https://github.com/luna-hook/lunahookportfolio/blob/main/app/plugins/%5Bslug%5D/page.tsx) (Plugin detail route), [`app/page.tsx`](https://github.com/luna-hook/lunahookportfolio/blob/main/app/page.tsx) (Home route), [`app/data/plugins.ts`](https://github.com/luna-hook/lunahookportfolio/blob/main/app/data/plugins.ts) (Plugin catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Portfolio routes"]
  node_home_route["Home route<br/>[page.tsx]"]
  node_plugins_route["Plugin index route<br/>[page.tsx]"]
  node_detail_route["Plugin detail route<br/>[page.tsx]"]
  node_servers_route["Servers route<br/>[page.tsx]"]
  node_contact_route["Contact route<br/>[page.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_plugin_catalog["Plugin catalog<br/>[plugins.ts]"]
end

subgraph group_presentation["Shared presentation"]
  node_shared_ui["Shared UI<br/>[ui.tsx]"]
  node_site_shell["Site shell<br/>[layout.tsx]"]
  node_global_styles["Global styles<br/>[globals.css]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home_route
node_home_route -->|"renders home"| node_shared_ui
node_plugins_route -->|"renders index"| node_shared_ui
node_detail_route -->|"looks up slug"| node_plugin_catalog
node_detail_route -->|"renders guide"| node_shared_ui
node_servers_route -->|"renders servers"| node_shared_ui
node_contact_route -->|"renders contact"| node_shared_ui
node_shared_ui -->|"searches catalog"| node_plugin_catalog
node_site_shell -->|"imports styles"| node_global_styles

click node_home_route "https://github.com/luna-hook/lunahookportfolio/blob/main/app/page.tsx"
click node_plugins_route "https://github.com/luna-hook/lunahookportfolio/blob/main/app/plugins/page.tsx"
click node_detail_route "https://github.com/luna-hook/lunahookportfolio/blob/main/app/plugins/%5Bslug%5D/page.tsx"
click node_servers_route "https://github.com/luna-hook/lunahookportfolio/blob/main/app/servers/page.tsx"
click node_contact_route "https://github.com/luna-hook/lunahookportfolio/blob/main/app/contact/page.tsx"
click node_plugin_catalog "https://github.com/luna-hook/lunahookportfolio/blob/main/app/data/plugins.ts"
click node_shared_ui "https://github.com/luna-hook/lunahookportfolio/blob/main/app/ui.tsx"
click node_site_shell "https://github.com/luna-hook/lunahookportfolio/blob/main/app/layout.tsx"
click node_global_styles "https://github.com/luna-hook/lunahookportfolio/blob/main/app/globals.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_route,node_plugins_route,node_detail_route,node_servers_route,node_contact_route toneBlue
class node_plugin_catalog toneAmber
class node_shared_ui,node_site_shell,node_global_styles toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio routes

- [Home route](https://github.com/luna-hook/lunahookportfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Plugin index route](https://github.com/luna-hook/lunahookportfolio/blob/main/app/plugins/page.tsx): `app/plugins/page.tsx`
- [Plugin detail route](https://github.com/luna-hook/lunahookportfolio/blob/main/app/plugins/%5Bslug%5D/page.tsx): `app/plugins/[slug]/page.tsx`
- [Servers route](https://github.com/luna-hook/lunahookportfolio/blob/main/app/servers/page.tsx): `app/servers/page.tsx`
- [Contact route](https://github.com/luna-hook/lunahookportfolio/blob/main/app/contact/page.tsx): `app/contact/page.tsx`

### Portfolio content

- [Plugin catalog](https://github.com/luna-hook/lunahookportfolio/blob/main/app/data/plugins.ts): `app/data/plugins.ts`

### Shared presentation

- [Shared UI](https://github.com/luna-hook/lunahookportfolio/blob/main/app/ui.tsx): `app/ui.tsx`
- [Site shell](https://github.com/luna-hook/lunahookportfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Global styles](https://github.com/luna-hook/lunahookportfolio/blob/main/app/globals.css): `app/globals.css`

### Other components

- **Visitor**

## Connections

- Visitor → Home route: opens (evidence: `README.md`)
- Home route → Shared UI: renders home (evidence: `app/page.tsx`)
- Plugin index route → Shared UI: renders index (evidence: `app/plugins/page.tsx`)
- Plugin detail route → Plugin catalog: looks up slug (evidence: `app/plugins/[slug]/page.tsx`)
- Plugin detail route → Shared UI: renders guide (evidence: `app/plugins/[slug]/page.tsx`)
- Servers route → Shared UI: renders servers (evidence: `app/servers/page.tsx`)
- Contact route → Shared UI: renders contact (evidence: `app/contact/page.tsx`)
- Shared UI → Plugin catalog: searches catalog (evidence: `app/ui.tsx`)
- Site shell → Global styles: imports styles (evidence: `app/layout.tsx`)