# adavitas/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/adavitas/portfolio
- Repository: https://github.com/adavitas/portfolio

## Overview

This is a static personal portfolio. A visitor opens the single-page site, browses its sections and project case studies, and can use contact/profile links. Browser JavaScript enhances the page with section and project selection, certificates, avatar interactions, activity display, and appearance controls; CSS provides responsive and motion-aware presentation. The README documents the major capabilities; sampled JavaScript excerpts are partial, so uncertain internal wiring is omitted.

Main entry points: [`index.html`](https://github.com/adavitas/portfolio/blob/main/index.html) (Portfolio page), [`js/main.js`](https://github.com/adavitas/portfolio/blob/main/js/main.js) (Interaction controller), [`js/theme-init.js`](https://github.com/adavitas/portfolio/blob/main/js/theme-init.js) (Initial appearance), [`css`](https://github.com/adavitas/portfolio/tree/main/css) (Responsive styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio content"]
  node_page["Portfolio page<br/>[index.html]"]
  node_projects["Projects and cases<br/>[index.html]"]
  node_certificates["Certificates<br/>[index.html]"]
  node_about["About and skills<br/>[index.html]"]
  node_contact["Contact and profiles<br/>[index.html]"]
  node_metadata["Search and sharing metadata<br/>[index.html]"]
end

subgraph group_interaction["Page interactions"]
  node_controller["Interaction controller<br/>[main.js]"]
  node_section_switching["Section switching<br/>[main.js]"]
  node_project_selection["Project selection<br/>[main.js]"]
  node_certificate_panels["Certificate panels<br/>[main.js]"]
  node_avatar["Interactive avatar<br/>[main.js]"]
  node_activity["GitHub activity<br/>[main.js]"]
  node_appearance["Theme and accent<br/>[main.js]"]
  node_theme_init["Initial appearance<br/>[theme-init.js]"]
end

subgraph group_presentation["Visual presentation"]
  node_styles["Responsive styles"]
  node_motion["Motion and accessibility styles<br/>[motion.css]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_storage[("Browser storage")]
node_github["GitHub activity source"]

node_visitor -->|"opens"| node_browser
node_browser -->|"loads"| node_page
node_page -->|"runs"| node_controller
node_page -->|"runs first"| node_theme_init
node_page -->|"loads styles"| node_styles
node_styles -->|"styles"| node_page
node_theme_init -->|"reads preferences"| node_storage
node_theme_init -->|"sets initial appearance"| node_page
node_controller -->|"handles selection"| node_section_switching
node_section_switching -->|"shows sections"| node_page
node_controller -->|"handles selection"| node_project_selection
node_project_selection -->|"shows cases"| node_projects
node_controller -->|"handles toggles"| node_certificate_panels
node_certificate_panels -->|"expands panels"| node_certificates
node_controller -->|"handles previews"| node_avatar
node_avatar -->|"updates avatar"| node_page
node_controller -->|"renders activity"| node_activity
node_github -.->|"provides activity"| node_activity
node_controller -->|"handles choices"| node_appearance
node_appearance -->|"reads and saves"| node_storage
node_appearance -->|"updates appearance"| node_page
node_motion -->|"supports reduced motion"| node_page
node_visitor -->|"uses contact links"| node_contact

click node_page "https://github.com/adavitas/portfolio/blob/main/index.html"
click node_projects "https://github.com/adavitas/portfolio/blob/main/index.html"
click node_certificates "https://github.com/adavitas/portfolio/blob/main/index.html"
click node_about "https://github.com/adavitas/portfolio/blob/main/index.html"
click node_contact "https://github.com/adavitas/portfolio/blob/main/index.html"
click node_metadata "https://github.com/adavitas/portfolio/blob/main/index.html"
click node_controller "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_section_switching "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_project_selection "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_certificate_panels "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_avatar "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_activity "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_appearance "https://github.com/adavitas/portfolio/blob/main/js/main.js"
click node_theme_init "https://github.com/adavitas/portfolio/blob/main/js/theme-init.js"
click node_styles "https://github.com/adavitas/portfolio/tree/main/css"
click node_motion "https://github.com/adavitas/portfolio/blob/main/css/motion.css"

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,node_projects,node_certificates,node_about,node_contact,node_metadata,node_browser toneBlue
class node_controller,node_section_switching,node_project_selection,node_certificate_panels,node_avatar,node_activity,node_appearance,node_theme_init,node_storage toneAmber
class node_styles,node_motion toneMint
class node_visitor,node_github toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/adavitas/portfolio/blob/main/index.html): `index.html`
- [Projects and cases](https://github.com/adavitas/portfolio/blob/main/index.html): `index.html`
- [Certificates](https://github.com/adavitas/portfolio/blob/main/index.html): `index.html`
- [About and skills](https://github.com/adavitas/portfolio/blob/main/index.html): `index.html`
- [Contact and profiles](https://github.com/adavitas/portfolio/blob/main/index.html): `index.html`
- [Search and sharing metadata](https://github.com/adavitas/portfolio/blob/main/index.html): `index.html`

### Page interactions

- [Interaction controller](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [Section switching](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [Project selection](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [Certificate panels](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [Interactive avatar](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [GitHub activity](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [Theme and accent](https://github.com/adavitas/portfolio/blob/main/js/main.js): `js/main.js`
- [Initial appearance](https://github.com/adavitas/portfolio/blob/main/js/theme-init.js): `js/theme-init.js`

### Visual presentation

- [Responsive styles](https://github.com/adavitas/portfolio/tree/main/css): `css`
- [Motion and accessibility styles](https://github.com/adavitas/portfolio/blob/main/css/motion.css): `css/motion.css`

### Other components

- **Visitor**
- **Browser**
- **Browser storage**
- **GitHub activity source**

## Connections

- Visitor → Browser: opens
- Browser → Portfolio page: loads
- Portfolio page → Interaction controller: runs
- Portfolio page → Initial appearance: runs first
- Portfolio page → Responsive styles: loads styles
- Responsive styles → Portfolio page: styles
- Initial appearance → Browser storage: reads preferences
- Initial appearance → Portfolio page: sets initial appearance
- Interaction controller → Section switching: handles selection
- Section switching → Portfolio page: shows sections
- Interaction controller → Project selection: handles selection
- Project selection → Projects and cases: shows cases
- Interaction controller → Certificate panels: handles toggles
- Certificate panels → Certificates: expands panels
- Interaction controller → Interactive avatar: handles previews
- Interactive avatar → Portfolio page: updates avatar
- Interaction controller → GitHub activity: renders activity
- GitHub activity source → GitHub activity: provides activity
- Interaction controller → Theme and accent: handles choices
- Theme and accent → Browser storage: reads and saves
- Theme and accent → Portfolio page: updates appearance
- Motion and accessibility styles → Portfolio page: supports reduced motion
- Visitor → Contact and profiles: uses contact links