# rkusman/rk-personal-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/rkusman/rk-personal-portfolio
- Repository: https://github.com/rkusman/rk-personal-portfolio

## Overview

RK is a responsive personal portfolio website. A visitor views the portfolio in a browser; the HTML page presents the site, with CSS providing responsive styling and JavaScript supplying client-side behavior. The repository also includes image assets. Source excerpts were unavailable, so the graph reflects only the documented technologies and does not infer specific portfolio sections or interactions.

Main entry points: [`index.html`](https://github.com/rkusman/rk-personal-portfolio/blob/main/index.html) (Portfolio page), [`assets/css/style.css`](https://github.com/rkusman/rk-personal-portfolio/blob/main/assets/css/style.css) (Responsive styles), [`assets/js/script.js`](https://github.com/rkusman/rk-personal-portfolio/blob/main/assets/js/script.js) (Client behavior), [`assets/images`](https://github.com/rkusman/rk-personal-portfolio/tree/main/assets/images) (Image assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_visitor(("Visitor"))
node_page["Portfolio page<br/>[index.html]"]
node_styles["Responsive styles<br/>[style.css]"]
node_behavior["Client behavior<br/>[script.js]"]
node_images["Image assets"]

node_visitor -->|"views"| node_page
node_page -->|"uses styles"| node_styles
node_page -->|"uses script"| node_behavior
node_page -->|"displays assets"| node_images

click node_page "https://github.com/rkusman/rk-personal-portfolio/blob/main/index.html"
click node_styles "https://github.com/rkusman/rk-personal-portfolio/blob/main/assets/css/style.css"
click node_behavior "https://github.com/rkusman/rk-personal-portfolio/blob/main/assets/js/script.js"
click node_images "https://github.com/rkusman/rk-personal-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_visitor toneIndigo
class node_page,node_styles,node_images toneTeal
class node_behavior toneBlue
```

## Components

### Other components

- **Visitor**
- [Portfolio page](https://github.com/rkusman/rk-personal-portfolio/blob/main/index.html): `index.html`
- [Responsive styles](https://github.com/rkusman/rk-personal-portfolio/blob/main/assets/css/style.css): `assets/css/style.css`
- [Client behavior](https://github.com/rkusman/rk-personal-portfolio/blob/main/assets/js/script.js): `assets/js/script.js`
- [Image assets](https://github.com/rkusman/rk-personal-portfolio/tree/main/assets/images): `assets/images`

## Connections

- Visitor → Portfolio page: views
- Portfolio page → Responsive styles: uses styles
- Portfolio page → Client behavior: uses script
- Portfolio page → Image assets: displays assets