# nazililham11/web architecture

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

- Interactive diagram: https://gitdiagram.com/nazililham11/web
- Repository: https://github.com/nazililham11/web

## Overview

This is a Vue portfolio site for presenting a profile, resume, and project portfolio. The user navigates among those views; the profile also loads GitHub information and embeds GitHub statistics, while the footer fetches a visitor count. Resume and portfolio content come from local JSON data. The README only describes the generic Vue app setup, so the feature map is based on the sampled routes and components; the Label implementation was not sampled, so its localization wiring is not expanded.

Main entry points: [`src/router.js`](https://github.com/nazililham11/web/blob/master/src/router.js) (View Router), [`src/utils/fetchers.js`](https://github.com/nazililham11/web/blob/master/src/utils/fetchers.js) (Remote Fetchers), [`src/App.vue`](https://github.com/nazililham11/web/blob/master/src/App.vue) (App Shell), [`src/view/Profil.vue`](https://github.com/nazililham11/web/blob/master/src/view/Profil.vue) (Profile View)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application UI"]
  node_bootstrap["Vue Bootstrap<br/>[main.js]"]
  node_shell["App Shell<br/>[App.vue]"]
  node_router["View Router<br/>[router.js]"]
  node_header["Navigation Header<br/>[Header.vue]"]
  node_footer["Site Footer<br/>[Footer.vue]"]
  node_profile["Profile View<br/>[Profil.vue]"]
  node_resume["Resume View<br/>[Resume.vue]"]
  node_portfolio["Portfolio View<br/>[Portofolio.vue]"]
end

subgraph group_content["Portfolio Content"]
  node_label["Label Component<br/>[Label.vue]"]
  node_profiledata["Profile Data<br/>[resume_id.json]"]
  node_projectsdata["Project Data<br/>[portofolio_id.json]"]
  node_labeldata["Label Data<br/>[labels_id.json]"]
  node_helpers["Portfolio Utilities<br/>[utils.js]"]
end

subgraph group_integrations["External Data"]
  node_fetchers["Remote Fetchers<br/>[fetchers.js]"]
  node_githubapi["GitHub API"]
  node_githubstats["GitHub Stats Images"]
  node_visitorapi["Visitor Badge API"]
end

node_visitor(("Site Visitor"))

node_visitor -->|"opens site"| node_bootstrap
node_bootstrap -->|"mounts app"| node_shell
node_bootstrap -->|"installs router"| node_router
node_shell -->|"renders"| node_header
node_shell -->|"hosts view outlet"| node_router
node_shell -->|"renders"| node_footer
node_header -->|"navigates routes"| node_router
node_router -->|"dispatches route"| node_profile
node_router -->|"dispatches route"| node_resume
node_router -->|"dispatches route"| node_portfolio
node_profile -->|"renders labels"| node_label
node_resume -->|"renders labels"| node_label
node_portfolio -->|"renders labels"| node_label
node_footer -->|"renders labels"| node_label
node_resume -->|"reads resume data"| node_profiledata
node_portfolio -->|"reads projects"| node_projectsdata
node_portfolio -->|"filters and formats"| node_helpers
node_profile -->|"calculates age"| node_helpers
node_profile -->|"requests profile and image URLs"| node_fetchers
node_footer -->|"requests visitor count"| node_fetchers
node_fetchers -->|"fetches profile"| node_githubapi
node_fetchers -->|"provides image URLs"| node_githubstats
node_fetchers -->|"fetches count"| node_visitorapi

click node_bootstrap "https://github.com/nazililham11/web/blob/master/src/main.js"
click node_shell "https://github.com/nazililham11/web/blob/master/src/App.vue"
click node_router "https://github.com/nazililham11/web/blob/master/src/router.js"
click node_header "https://github.com/nazililham11/web/blob/master/src/components/Header.vue"
click node_footer "https://github.com/nazililham11/web/blob/master/src/components/Footer.vue"
click node_profile "https://github.com/nazililham11/web/blob/master/src/view/Profil.vue"
click node_resume "https://github.com/nazililham11/web/blob/master/src/view/Resume.vue"
click node_portfolio "https://github.com/nazililham11/web/blob/master/src/view/Portofolio.vue"
click node_label "https://github.com/nazililham11/web/blob/master/src/components/Label.vue"
click node_profiledata "https://github.com/nazililham11/web/blob/master/src/data/resume_id.json"
click node_projectsdata "https://github.com/nazililham11/web/blob/master/src/data/portofolio_id.json"
click node_labeldata "https://github.com/nazililham11/web/blob/master/src/data/labels_id.json"
click node_helpers "https://github.com/nazililham11/web/blob/master/src/utils/utils.js"
click node_fetchers "https://github.com/nazililham11/web/blob/master/src/utils/fetchers.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_bootstrap,node_shell,node_router,node_header,node_footer,node_profile,node_resume,node_portfolio toneBlue
class node_label,node_profiledata,node_projectsdata,node_labeldata,node_helpers toneAmber
class node_fetchers,node_githubapi,node_githubstats,node_visitorapi toneMint
class node_visitor toneIndigo
```

## Components

### Application UI

- [Vue Bootstrap](https://github.com/nazililham11/web/blob/master/src/main.js): `src/main.js`
- [App Shell](https://github.com/nazililham11/web/blob/master/src/App.vue): `src/App.vue`
- [View Router](https://github.com/nazililham11/web/blob/master/src/router.js): `src/router.js`
- [Navigation Header](https://github.com/nazililham11/web/blob/master/src/components/Header.vue): `src/components/Header.vue`
- [Site Footer](https://github.com/nazililham11/web/blob/master/src/components/Footer.vue): `src/components/Footer.vue`
- [Profile View](https://github.com/nazililham11/web/blob/master/src/view/Profil.vue): `src/view/Profil.vue`
- [Resume View](https://github.com/nazililham11/web/blob/master/src/view/Resume.vue): `src/view/Resume.vue`
- [Portfolio View](https://github.com/nazililham11/web/blob/master/src/view/Portofolio.vue): `src/view/Portofolio.vue`

### Portfolio Content

- [Label Component](https://github.com/nazililham11/web/blob/master/src/components/Label.vue): `src/components/Label.vue`
- [Profile Data](https://github.com/nazililham11/web/blob/master/src/data/resume_id.json): `src/data/resume_id.json`
- [Project Data](https://github.com/nazililham11/web/blob/master/src/data/portofolio_id.json): `src/data/portofolio_id.json`
- [Label Data](https://github.com/nazililham11/web/blob/master/src/data/labels_id.json): `src/data/labels_id.json`
- [Portfolio Utilities](https://github.com/nazililham11/web/blob/master/src/utils/utils.js): `src/utils/utils.js`

### External Data

- [Remote Fetchers](https://github.com/nazililham11/web/blob/master/src/utils/fetchers.js): `src/utils/fetchers.js`
- **GitHub API**
- **GitHub Stats Images**
- **Visitor Badge API**

### Other components

- **Site Visitor**

## Connections

- Site Visitor → Vue Bootstrap: opens site
- Vue Bootstrap → App Shell: mounts app
- Vue Bootstrap → View Router: installs router
- App Shell → Navigation Header: renders
- App Shell → View Router: hosts view outlet
- App Shell → Site Footer: renders
- Navigation Header → View Router: navigates routes
- View Router → Profile View: dispatches route
- View Router → Resume View: dispatches route
- View Router → Portfolio View: dispatches route
- Profile View → Label Component: renders labels
- Resume View → Label Component: renders labels
- Portfolio View → Label Component: renders labels
- Site Footer → Label Component: renders labels
- Resume View → Profile Data: reads resume data
- Portfolio View → Project Data: reads projects
- Portfolio View → Portfolio Utilities: filters and formats
- Profile View → Portfolio Utilities: calculates age
- Profile View → Remote Fetchers: requests profile and image URLs
- Site Footer → Remote Fetchers: requests visitor count
- Remote Fetchers → GitHub API: fetches profile
- Remote Fetchers → GitHub Stats Images: provides image URLs
- Remote Fetchers → Visitor Badge API: fetches count