# prastiorifkiwijaya/personal-portofolio architecture

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

- Interactive diagram: https://gitdiagram.com/prastiorifkiwijaya/personal-portofolio
- Repository: https://github.com/prastiorifkiwijaya/personal-portofolio

## Overview

This is a static personal portfolio presenting Pras Tio Rifki Wijaya’s background, education, experience, and skills. Visitors view the portfolio, can submit a message to receive input-dependent feedback, and can view a slideshow that advances automatically or through manual calls. The sampled JavaScript implements the notification and slideshow behavior. The HTML was not sampled, so exact page structure and asset wiring are uncertain; notably, the README names `#message` while the script reads `#pesan`.

Main entry points: [`script/script.js`](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/script/script.js) (Page interactions), [`index.html`](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html) (Message form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio presentation"]
  node_page["Portfolio page<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
  node_message["Message form<br/>[index.html]"]
  node_slideshow["Slideshow content<br/>[index.html]"]
end

subgraph group_interactions["Page interactions"]
  node_behavior["Page interactions<br/>[script.js]"]
  node_notification["Feedback notification<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_page
node_visitor -->|"submits"| node_message
node_behavior -->|"reads input"| node_message
node_behavior -->|"creates feedback"| node_notification
node_behavior -->|"updates slides"| node_slideshow

click node_page "https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html"
click node_styles "https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/styles/style.css"
click node_message "https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html"
click node_slideshow "https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html"
click node_behavior "https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/script/script.js"
click node_notification "https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/script/script.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_page,node_styles,node_message,node_slideshow toneBlue
class node_behavior,node_notification toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [Portfolio page](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html): `index.html`
- [Page styling](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/styles/style.css): `styles/style.css`
- [Message form](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html): `index.html`
- [Slideshow content](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/index.html): `index.html`

### Page interactions

- [Page interactions](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/script/script.js): `script/script.js`
- [Feedback notification](https://github.com/prastiorifkiwijaya/personal-portofolio/blob/main/script/script.js): `script/script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views
- Visitor → Message form: submits
- Page interactions → Message form: reads input
- Page interactions → Feedback notification: creates feedback
- Page interactions → Slideshow content: updates slides