# empi-empi/interaciteresume3 architecture

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

- Interactive diagram: https://gitdiagram.com/empi-empi/interaciteresume3
- Repository: https://github.com/empi-empi/interaciteresume3

## Overview

This repository is a browser-based interactive résumé and portfolio. A visitor browses résumé sections through responsive navigation, explores skills in a 3D viewer and education through a coin-flip interaction, and can use the contact form; the page also fetches project listings from GitHub. The sampled JavaScript confirms page initialization, section animations, viewer setup, and the GitHub request. The README only identifies the live site, and excerpts are partial, so links for unsampled form and model-loading behavior are not inferred.

Main entry points: [`script.js`](https://github.com/empi-empi/interaciteresume3/blob/main/script.js) (Page interactions), [`index.html`](https://github.com/empi-empi/interaciteresume3/blob/main/index.html) (Résumé sections), [`components/sidebar.js`](https://github.com/empi-empi/interaciteresume3/blob/main/components/sidebar.js) (Desktop sidebar), [`components/header.js`](https://github.com/empi-empi/interaciteresume3/blob/main/components/header.js) (Mobile header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_portfolio["Résumé sections<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
  node_runtime["Page interactions<br/>[script.js]"]
end

subgraph group_navigation["Navigation"]
  node_sidebar["Desktop sidebar<br/>[sidebar.js]"]
  node_mobile["Mobile header<br/>[header.js]"]
end

subgraph group_interactions["Interactive content"]
  node_viewer["3D skills viewer<br/>[script.js]"]
  node_education["Education flip<br/>[script.js]"]
  node_project_fetch["Project loader<br/>[script.js]"]
  node_contact["Contact form<br/>[index.html]"]
  node_model["3D room model"]
end

subgraph group_external["External data"]
  node_github["GitHub repositories API"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio
node_visitor -->|"navigates"| node_sidebar
node_visitor -->|"navigates"| node_mobile
node_visitor -->|"explores"| node_viewer
node_visitor -->|"interacts"| node_education
node_visitor -->|"submits"| node_contact
node_runtime -->|"initializes"| node_viewer
node_runtime -->|"initializes"| node_education
node_runtime -->|"loads"| node_project_fetch
node_project_fetch -.->|"fetches repositories"| node_github
node_sidebar -->|"scrolls to sections"| node_portfolio
node_mobile -->|"scrolls to sections"| node_portfolio

click node_portfolio "https://github.com/empi-empi/interaciteresume3/blob/main/index.html"
click node_styles "https://github.com/empi-empi/interaciteresume3/blob/main/style.css"
click node_runtime "https://github.com/empi-empi/interaciteresume3/blob/main/script.js"
click node_sidebar "https://github.com/empi-empi/interaciteresume3/blob/main/components/sidebar.js"
click node_mobile "https://github.com/empi-empi/interaciteresume3/blob/main/components/header.js"
click node_viewer "https://github.com/empi-empi/interaciteresume3/blob/main/script.js"
click node_education "https://github.com/empi-empi/interaciteresume3/blob/main/script.js"
click node_project_fetch "https://github.com/empi-empi/interaciteresume3/blob/main/script.js"
click node_contact "https://github.com/empi-empi/interaciteresume3/blob/main/index.html"
click node_model "https://github.com/empi-empi/interaciteresume3/blob/main/office_room_15_low-poly_3d_model.glb"

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_portfolio,node_styles,node_runtime toneBlue
class node_sidebar,node_mobile toneAmber
class node_viewer,node_education,node_project_fetch,node_contact,node_model toneMint
class node_github toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Résumé sections](https://github.com/empi-empi/interaciteresume3/blob/main/index.html): `index.html`
- [Page styling](https://github.com/empi-empi/interaciteresume3/blob/main/style.css): `style.css`
- [Page interactions](https://github.com/empi-empi/interaciteresume3/blob/main/script.js): `script.js`

### Navigation

- [Desktop sidebar](https://github.com/empi-empi/interaciteresume3/blob/main/components/sidebar.js): `components/sidebar.js`
- [Mobile header](https://github.com/empi-empi/interaciteresume3/blob/main/components/header.js): `components/header.js`

### Interactive content

- [3D skills viewer](https://github.com/empi-empi/interaciteresume3/blob/main/script.js): `script.js`
- [Education flip](https://github.com/empi-empi/interaciteresume3/blob/main/script.js): `script.js`
- [Project loader](https://github.com/empi-empi/interaciteresume3/blob/main/script.js): `script.js`
- [Contact form](https://github.com/empi-empi/interaciteresume3/blob/main/index.html): `index.html`
- [3D room model](https://github.com/empi-empi/interaciteresume3/blob/main/office_room_15_low-poly_3d_model.glb): `office_room_15_low-poly_3d_model.glb`

### External data

- **GitHub repositories API**

### Other components

- **Visitor**

## Connections

- Visitor → Résumé sections: views
- Visitor → Desktop sidebar: navigates
- Visitor → Mobile header: navigates
- Visitor → 3D skills viewer: explores
- Visitor → Education flip: interacts
- Visitor → Contact form: submits
- Page interactions → 3D skills viewer: initializes
- Page interactions → Education flip: initializes
- Page interactions → Project loader: loads
- Project loader → GitHub repositories API: fetches repositories
- Desktop sidebar → Résumé sections: scrolls to sections
- Mobile header → Résumé sections: scrolls to sections