# cheetah7027/mobile-responsive-portfolio architecture

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

## Overview

This is a static personal portfolio: visitors browse the landing page, open profile/story/process or current-work panels, and can submit a contact form. The supplied README describes a different React study-planning app, so this map follows the provided file tree and sampled JavaScript; the landing-page markup and panel content were not sampled.

Main entry points: [`about-panel.js`](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/about-panel.js) (About panel handler), [`current-panel.js`](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/current-panel.js) (Current panel handler), [`contact-panel.js`](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/contact-panel.js) (Contact panel handler), [`index.html`](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/index.html) (Portfolio page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_landing["Landing experience"]
  node_home["Portfolio page<br/>[index.html]"]
  node_site_script["Page interactions<br/>[script.js]"]
  node_site_styles["Site styling<br/>[styles.css]"]
end

subgraph group_panels["Information panels"]
  node_about_handler["About panel handler<br/>[about-panel.js]"]
  node_about_content["About content<br/>[about-panel.html]"]
  node_story_content["Story content<br/>[story-panel.html]"]
  node_process_content["Process content<br/>[process-panel.html]"]
  node_current_handler["Current panel handler<br/>[current-panel.js]"]
  node_current_content["Current work content<br/>[current-panel.html]"]
end

subgraph group_contact["Contact interaction"]
  node_contact_handler["Contact panel handler<br/>[contact-panel.js]"]
  node_contact_content["Contact form content<br/>[contact-panel.html]"]
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_home
node_visitor -->|"uses navigation"| node_site_script
node_visitor -->|"opens panels"| node_about_handler
node_visitor -->|"opens panel"| node_current_handler
node_visitor -->|"opens and submits"| node_contact_handler
node_about_handler -->|"fetches"| node_about_content
node_about_handler -->|"fetches"| node_story_content
node_about_handler -->|"fetches"| node_process_content
node_current_handler -->|"fetches"| node_current_content
node_contact_handler -->|"fetches"| node_contact_content

click node_home "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/index.html"
click node_site_script "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/script.js"
click node_site_styles "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/styles.css"
click node_about_handler "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/about-panel.js"
click node_about_content "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/about-panel.html"
click node_story_content "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/story-panel.html"
click node_process_content "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/process-panel.html"
click node_current_handler "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/current-panel.js"
click node_current_content "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/current-panel.html"
click node_contact_handler "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/contact-panel.js"
click node_contact_content "https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/contact-panel.html"

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_site_script,node_site_styles toneBlue
class node_about_handler,node_about_content,node_story_content,node_process_content,node_current_handler,node_current_content toneAmber
class node_contact_handler,node_contact_content toneMint
class node_visitor toneIndigo
```

## Components

### Landing experience

- [Portfolio page](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/index.html): `index.html`
- [Page interactions](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/script.js): `script.js`
- [Site styling](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/styles.css): `styles.css`

### Information panels

- [About panel handler](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/about-panel.js): `about-panel.js`
- [About content](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/about-panel.html): `about-panel.html`
- [Story content](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/story-panel.html): `story-panel.html`
- [Process content](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/process-panel.html): `process-panel.html`
- [Current panel handler](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/current-panel.js): `current-panel.js`
- [Current work content](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/current-panel.html): `current-panel.html`

### Contact interaction

- [Contact panel handler](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/contact-panel.js): `contact-panel.js`
- [Contact form content](https://github.com/cheetah7027/mobile-responsive-portfolio/blob/main/contact-panel.html): `contact-panel.html`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: visits
- Visitor → Page interactions: uses navigation
- Visitor → About panel handler: opens panels
- Visitor → Current panel handler: opens panel
- Visitor → Contact panel handler: opens and submits
- About panel handler → About content: fetches
- About panel handler → Story content: fetches
- About panel handler → Process content: fetches
- Current panel handler → Current work content: fetches
- Contact panel handler → Contact form content: fetches