# yuunnnaaaa/portofolioweb architecture

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

- Interactive diagram: https://gitdiagram.com/yuunnnaaaa/portofolioweb
- Repository: https://github.com/yuunnnaaaa/portofolioweb

## Overview

This is a small browser-based personal portfolio. Visitors browse sections and can use the hire-me link, modal controls, responsive navigation, and typing animation; separate controls switch color themes and dark mode. The source shows the JavaScript behavior and CSS files, but the README and HTML contents were not provided, so page structure and script-loading details are not mapped beyond what the sampled code supports.

Main entry points: [`index.html`](https://github.com/yuunnnaaaa/portofolioweb/blob/master/index.html) (Portfolio page), [`js/script.js`](https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/script.js) (Navigation and modals), [`js/style-switcher.js`](https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/style-switcher.js) (Theme controls), [`css/skins`](https://github.com/yuunnnaaaa/portofolioweb/tree/master/css/skins) (Color themes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_page["Portfolio page<br/>[index.html]"]
end

subgraph group_behavior["Page interactions"]
  node_interactions["Navigation and modals<br/>[script.js]"]
  node_typing["Typing animation<br/>[script.js]"]
  node_switcher["Theme controls<br/>[style-switcher.js]"]
end

subgraph group_appearance["Visual styling"]
  node_basecss["Base styles<br/>[style.css]"]
  node_switchercss["Switcher styles<br/>[style-switcher.css]"]
  node_colors["Color themes"]
end

node_visitor(("Visitor"))
node_typed["Typed library"]

node_visitor -->|"opens"| node_page
node_page -->|"provides DOM"| node_interactions
node_page -->|"provides DOM"| node_switcher
node_visitor -->|"uses controls"| node_interactions
node_visitor -->|"uses controls"| node_switcher
node_interactions -->|"instantiates"| node_typed
node_page -->|"styled by"| node_basecss
node_page -->|"styled by"| node_switchercss
node_page -->|"uses themes"| node_colors
node_switcher -->|"enables styles"| node_colors

click node_page "https://github.com/yuunnnaaaa/portofolioweb/blob/master/index.html"
click node_interactions "https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/script.js"
click node_typing "https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/script.js"
click node_switcher "https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/style-switcher.js"
click node_basecss "https://github.com/yuunnnaaaa/portofolioweb/blob/master/css/style.css"
click node_switchercss "https://github.com/yuunnnaaaa/portofolioweb/blob/master/css/style-switcher.css"
click node_colors "https://github.com/yuunnnaaaa/portofolioweb/tree/master/css/skins"

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 toneBlue
class node_interactions,node_typing,node_switcher toneAmber
class node_basecss,node_switchercss,node_colors toneMint
class node_visitor,node_typed toneIndigo
```

## Components

### Portfolio page

- [Portfolio page](https://github.com/yuunnnaaaa/portofolioweb/blob/master/index.html): `index.html`

### Page interactions

- [Navigation and modals](https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/script.js): `js/script.js`
- [Typing animation](https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/script.js): `js/script.js`
- [Theme controls](https://github.com/yuunnnaaaa/portofolioweb/blob/master/js/style-switcher.js): `js/style-switcher.js`

### Visual styling

- [Base styles](https://github.com/yuunnnaaaa/portofolioweb/blob/master/css/style.css): `css/style.css`
- [Switcher styles](https://github.com/yuunnnaaaa/portofolioweb/blob/master/css/style-switcher.css): `css/style-switcher.css`
- [Color themes](https://github.com/yuunnnaaaa/portofolioweb/tree/master/css/skins): `css/skins`

### Other components

- **Visitor**
- **Typed library**

## Connections

- Visitor → Portfolio page: opens
- Portfolio page → Navigation and modals: provides DOM
- Portfolio page → Theme controls: provides DOM
- Visitor → Navigation and modals: uses controls
- Visitor → Theme controls: uses controls
- Navigation and modals → Typed library: instantiates
- Portfolio page → Base styles: styled by
- Portfolio page → Switcher styles: styled by
- Portfolio page → Color themes: uses themes
- Theme controls → Color themes: enables styles