# angkon-kar/angkon-kar-portfolio architecture

> Architecture diagram of the GitHub repository angkon-kar/angkon-kar-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/angkon-kar/angkon-kar-portfolio
- Repository: https://github.com/angkon-kar/angkon-kar-portfolio

## Overview

This repository is a static personal portfolio: visitors browse profile pages, project and extension showcases, credentials, and contact options. The main discovery flow is project listing → selected project detail, with project records supplying both views. Extensions have a similar listing/detail flow, plus a browser-local setup checklist. The sampled JavaScript supports these data-driven views, certification rendering, shared interactions, mascot behavior, and contact-form submission. The README is minimal, and some page wiring is inferred from filenames rather than sampled HTML, so uncertain links are omitted.

Main entry points: [`script.js`](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/script.js) (Site interactions), [`projects.html`](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/projects.html) (Project listing), [`extensions.html`](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extensions.html) (Extension listing), [`projects-data.js`](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/projects-data.js) (Project records)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio pages"]
  node_home["Home<br/>[index.html]"]
  node_profile["Profile pages<br/>[about.html]"]
  node_experience["Experience<br/>[experience.html]"]
  node_achievements["Achievements<br/>[achievements.html]"]
  node_certifications["Certifications"]
  node_contact["Contact<br/>[contact.html]"]
  node_cert_data[("Certificate records<br/>[certificates.js]")]
end

subgraph group_projects["Project showcase"]
  node_project_list["Project listing<br/>[projects.html]"]
  node_project_detail["Project detail"]
  node_project_data[("Project records<br/>[projects-data.js]")]
  node_detail_logic["Project detail renderer<br/>[project-detail.js]"]
end

subgraph group_extensions["Extension showcase"]
  node_extension_list["Extension listing<br/>[extensions.html]"]
  node_extension_detail["Extension detail"]
  node_extension_data[("Extension records<br/>[extensions-data.js]")]
  node_extension_logic["Extension detail renderer"]
end

subgraph group_shared["Shared interactions"]
  node_site_script["Site interactions<br/>[script.js]"]
  node_mascot["Interactive mascot<br/>[mascot.js]"]
  node_toast["Toast notifications<br/>[toast.js]"]
  node_devtools_guard["Context and shortcut guard<br/>[devtools.js]"]
end

node_visitor(("Visitor"))
node_emailjs{{"EmailJS"}}

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_project_list
node_visitor -->|"browses"| node_extension_list
node_visitor -->|"views"| node_certifications
node_visitor -->|"contacts"| node_contact
node_project_list -->|"opens selected"| node_project_detail
node_project_data -->|"supplies records"| node_site_script
node_site_script -->|"renders and filters"| node_project_list
node_project_data -->|"supplies records"| node_detail_logic
node_detail_logic -->|"renders selected"| node_project_detail
node_extension_data -->|"supplies records"| node_site_script
node_site_script -->|"renders"| node_extension_list
node_extension_list -->|"opens selected"| node_extension_detail
node_extension_data -->|"supplies records"| node_extension_logic
node_extension_logic -->|"renders and tracks setup"| node_extension_detail
node_cert_data -->|"groups and renders"| node_certifications
node_contact -->|"submits form"| node_site_script
node_site_script -->|"sends form"| node_emailjs
node_home -->|"mounts hero mascot"| node_mascot
node_profile -->|"mounts floating mascot"| node_mascot
node_site_script -.->|"uses notifications"| node_toast
node_devtools_guard -->|"shows notices"| node_toast

click node_home "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/index.html"
click node_profile "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/about.html"
click node_experience "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/experience.html"
click node_achievements "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/achievements.html"
click node_certifications "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/certifications.html"
click node_contact "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/contact.html"
click node_project_list "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/projects.html"
click node_project_detail "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/project-detail.html"
click node_project_data "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/projects-data.js"
click node_extension_list "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extensions.html"
click node_extension_detail "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extension-detail.html"
click node_extension_data "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extensions-data.js"
click node_cert_data "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/certificates.js"
click node_site_script "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/script.js"
click node_mascot "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/mascot.js"
click node_toast "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/toast.js"
click node_devtools_guard "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/devtools.js"
click node_detail_logic "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/project-detail.js"
click node_extension_logic "https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extension-detail.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_home,node_profile,node_experience,node_achievements,node_certifications,node_contact,node_cert_data toneBlue
class node_project_list,node_project_detail,node_project_data,node_detail_logic toneAmber
class node_extension_list,node_extension_detail,node_extension_data,node_extension_logic toneMint
class node_site_script,node_mascot,node_toast,node_devtools_guard toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Portfolio pages

- [Home](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/index.html): `index.html`
- [Profile pages](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/about.html): `about.html`
- [Experience](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/experience.html): `experience.html`
- [Achievements](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/achievements.html): `achievements.html`
- [Certifications](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/certifications.html): `certifications.html`
- [Contact](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/contact.html): `contact.html`
- [Certificate records](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/certificates.js): `certificates.js`

### Project showcase

- [Project listing](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/projects.html): `projects.html`
- [Project detail](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/project-detail.html): `project-detail.html`
- [Project records](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/projects-data.js): `projects-data.js`
- [Project detail renderer](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/project-detail.js): `project-detail.js`

### Extension showcase

- [Extension listing](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extensions.html): `extensions.html`
- [Extension detail](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extension-detail.html): `extension-detail.html`
- [Extension records](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extensions-data.js): `extensions-data.js`
- [Extension detail renderer](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/extension-detail.js): `extension-detail.js`

### Shared interactions

- [Site interactions](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/script.js): `script.js`
- [Interactive mascot](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/mascot.js): `mascot.js`
- [Toast notifications](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/toast.js): `toast.js`
- [Context and shortcut guard](https://github.com/angkon-kar/angkon-kar-portfolio/blob/main/devtools.js): `devtools.js`

### Other components

- **Visitor**
- **EmailJS**

## Connections

- Visitor → Home: opens
- Visitor → Project listing: browses
- Visitor → Extension listing: browses
- Visitor → Certifications: views
- Visitor → Contact: contacts
- Project listing → Project detail: opens selected
- Project records → Site interactions: supplies records
- Site interactions → Project listing: renders and filters
- Project records → Project detail renderer: supplies records
- Project detail renderer → Project detail: renders selected
- Extension records → Site interactions: supplies records
- Site interactions → Extension listing: renders
- Extension listing → Extension detail: opens selected
- Extension records → Extension detail renderer: supplies records
- Extension detail renderer → Extension detail: renders and tracks setup
- Certificate records → Certifications: groups and renders
- Contact → Site interactions: submits form
- Site interactions → EmailJS: sends form
- Home → Interactive mascot: mounts hero mascot
- Profile pages → Interactive mascot: mounts floating mascot
- Site interactions → Toast notifications: uses notifications
- Context and shortcut guard → Toast notifications: shows notices