# mkecreativetech-cmd/mkecreativetech architecture

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

- Interactive diagram: https://gitdiagram.com/mkecreativetech-cmd/mkecreativetech
- Repository: https://github.com/mkecreativetech-cmd/mkecreativetech

## Overview

This is a static, single-page personal portfolio. A visitor opens the page, reads the portfolio content, and can use its interactive navigation and project presentations. The implementation is plain HTML, CSS, and JavaScript rather than a server-backed application. The README documents the page structure, responsive styling, mobile navigation, and automatic footer year; the JavaScript excerpt also shows section tracking, animated content, certificate previews, and project/workflow dialogs. Some JavaScript is unsampled, so links to those features are limited to documented or excerpted evidence.

Main entry points: [`script.js`](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js) (Page behavior), [`index.html`](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/index.html) (Page structure), [`styles.css`](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/styles.css) (Responsive design)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_page_markup["Page structure<br/>[index.html]"]
  node_responsive_design["Responsive design<br/>[styles.css]"]
end

subgraph group_interaction["Page interactions"]
  node_page_behavior["Page behavior<br/>[script.js]"]
  node_navigation["Mobile navigation<br/>[script.js]"]
  node_section_tracking["Section tracking<br/>[script.js]"]
  node_animated_content["Content animations<br/>[script.js]"]
  node_certificate_preview["Certificate previews<br/>[script.js]"]
end

subgraph group_content["Portfolio content"]
  node_project_listing["Project cards<br/>[index.html]"]
  node_project_data["Project details data<br/>[script.js]"]
  node_project_dialog["Project detail dialog<br/>[script.js]"]
  node_workflow_viewer["Workflow viewer<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_google_fonts["Google Fonts"]

node_visitor -->|"opens"| node_page_markup
node_page_markup -->|"loads"| node_page_behavior
node_page_markup -->|"styled by"| node_responsive_design
node_page_markup -->|"presents"| node_project_listing
node_page_markup -.->|"loads font"| node_google_fonts
node_page_behavior -->|"toggles"| node_navigation
node_page_behavior -->|"tracks sections"| node_section_tracking
node_page_behavior -->|"animates"| node_animated_content
node_page_behavior -->|"shows previews"| node_certificate_preview
node_page_behavior -->|"defines"| node_project_data
node_page_behavior -->|"renders details"| node_project_dialog
node_page_behavior -->|"controls zoom"| node_workflow_viewer

click node_page_markup "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/index.html"
click node_responsive_design "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/styles.css"
click node_page_behavior "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_navigation "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_section_tracking "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_animated_content "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_certificate_preview "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_project_listing "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/index.html"
click node_project_data "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_project_dialog "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js"
click node_workflow_viewer "https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/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_markup,node_responsive_design toneBlue
class node_page_behavior,node_navigation,node_section_tracking,node_animated_content,node_certificate_preview toneAmber
class node_project_listing,node_project_data,node_project_dialog,node_workflow_viewer toneMint
class node_visitor,node_google_fonts toneIndigo
```

## Components

### Portfolio page

- [Page structure](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/index.html): `index.html`
- [Responsive design](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/styles.css): `styles.css`

### Page interactions

- [Page behavior](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`
- [Mobile navigation](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`
- [Section tracking](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`
- [Content animations](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`
- [Certificate previews](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`

### Portfolio content

- [Project cards](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/index.html): `index.html`
- [Project details data](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`
- [Project detail dialog](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`
- [Workflow viewer](https://github.com/mkecreativetech-cmd/mkecreativetech/blob/main/script.js): `script.js`

### Other components

- **Visitor**
- **Google Fonts**

## Connections

- Visitor → Page structure: opens (evidence: `README.md`)
- Page structure → Page behavior: loads (evidence: `README.md`)
- Page structure → Responsive design: styled by (evidence: `README.md`)
- Page structure → Project cards: presents (evidence: `README.md`)
- Page structure → Google Fonts: loads font (evidence: `README.md`)
- Page behavior → Mobile navigation: toggles (evidence: `script.js`)
- Page behavior → Section tracking: tracks sections (evidence: `script.js`)
- Page behavior → Content animations: animates (evidence: `script.js`)
- Page behavior → Certificate previews: shows previews (evidence: `script.js`)
- Page behavior → Project details data: defines (evidence: `script.js`)
- Page behavior → Project detail dialog: renders details (evidence: `script.js`)
- Page behavior → Workflow viewer: controls zoom (evidence: `script.js`)