# kahosdev/kahos-dev-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/kahosdev/kahos-dev-portfolio
- Repository: https://github.com/kahosdev/kahos-dev-portfolio

## Overview

This is a small personal developer portfolio: visitors browse the home page and dedicated contact, experience, and projects pages. Its JavaScript adds shared navigation and visual interactions, while CSS and image assets provide presentation. The supplied evidence includes only the JavaScript excerpt and a minimal README; page-to-script and page-to-style wiring is not shown, so those relationships are left unverified rather than asserted.

Main entry points: [`js/main.js`](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/js/main.js) (Page interactions), [`index.html`](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/index.html) (Home page), [`pages/contact.html`](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/contact.html) (Contact page), [`pages/experience.html`](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/experience.html) (Experience page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home page<br/>[index.html]"]
  node_contact["Contact page<br/>[contact.html]"]
  node_experience["Experience page<br/>[experience.html]"]
  node_projects["Projects page<br/>[projects.html]"]
end

subgraph group_frontend["Frontend presentation"]
  node_interactions["Page interactions<br/>[main.js]"]
  node_styles["Site styling<br/>[style.css]"]
  node_images["Image assets"]
end

node_visitor(("Visitor"))

node_visitor -.->|"browses"| node_home
node_visitor -.->|"browses"| node_contact
node_visitor -.->|"browses"| node_experience
node_visitor -.->|"browses"| node_projects
node_home -.->|"uses"| node_interactions
node_contact -.->|"uses"| node_interactions
node_experience -.->|"uses"| node_interactions
node_projects -.->|"uses"| node_interactions

click node_home "https://github.com/kahosdev/kahos-dev-portfolio/blob/main/index.html"
click node_contact "https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/contact.html"
click node_experience "https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/experience.html"
click node_projects "https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/projects.html"
click node_interactions "https://github.com/kahosdev/kahos-dev-portfolio/blob/main/js/main.js"
click node_styles "https://github.com/kahosdev/kahos-dev-portfolio/blob/main/css/style.css"
click node_images "https://github.com/kahosdev/kahos-dev-portfolio/tree/main/assets/images"

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_contact,node_experience,node_projects toneBlue
class node_interactions,node_styles,node_images toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio pages

- [Home page](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/index.html): `index.html`
- [Contact page](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/contact.html): `pages/contact.html`
- [Experience page](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/experience.html): `pages/experience.html`
- [Projects page](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/pages/projects.html): `pages/projects.html`

### Frontend presentation

- [Page interactions](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/js/main.js): `js/main.js`
- [Site styling](https://github.com/kahosdev/kahos-dev-portfolio/blob/main/css/style.css): `css/style.css`
- [Image assets](https://github.com/kahosdev/kahos-dev-portfolio/tree/main/assets/images): `assets/images`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: browses
- Visitor → Contact page: browses
- Visitor → Experience page: browses
- Visitor → Projects page: browses
- Home page → Page interactions: uses
- Contact page → Page interactions: uses
- Experience page → Page interactions: uses
- Projects page → Page interactions: uses