# algorrismo/ismails-portfolio architecture

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

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

## Overview

This is a static Astro portfolio: visitors browse identity, project, technology-stack, and experimental-portfolio content through file-based routes. Route files compose reusable UI, while browser scripts provide navigation/theme controls and interactive experiment sections. The README documents the route and content responsibilities; source excerpts show the header and experiment behaviors, plus the projects-to-tools type dependency. Other route-to-component wiring is not shown, so those links are omitted.

Main entry points: [`src/pages/experiments.astro`](https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/experiments.astro) (Experiments page), [`src/components/Header.astro`](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/Header.astro) (Header), [`src/components/SavedWork.astro`](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/SavedWork.astro) (Saved work sections), [`src/scripts/header.ts`](https://github.com/algorrismo/ismails-portfolio/blob/main/src/scripts/header.ts) (Header interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Portfolio routes"]
  node_home["Home page<br/>[index.astro]"]
  node_projects_page["Projects page<br/>[projects.astro]"]
  node_stack_page["Stack page<br/>[stack.astro]"]
  node_experiments_page["Experiments page<br/>[experiments.astro]"]
  node_other_pages["Other pages<br/>[&#91;page&#93;.astro]"]
end

subgraph group_content["Portfolio content"]
  node_profile["Profile data<br/>[profile.ts]"]
  node_navigation["Navigation data<br/>[navigation.ts]"]
  node_projects_data["Project data<br/>[projects.ts]"]
  node_tools_data["Technology data<br/>[tools.ts]"]
  node_experiment_data["Experiment content<br/>[experiments.ts]"]
end

subgraph group_ui["Reusable interface"]
  node_page_shell["Shared page shell<br/>[Page.astro]"]
  node_header["Header<br/>[Header.astro]"]
  node_dropdown["Header dropdown"]
  node_saved_work["Saved work sections<br/>[SavedWork.astro]"]
  node_project_list["Project list<br/>[ProjectList.astro]"]
  node_toolbox["Toolbox<br/>[Toolbox.astro]"]
  node_experiment_cover["Project previews<br/>[ProjectCover.astro]"]
end

subgraph group_behavior["Browser interactions"]
  node_header_script["Header interactions<br/>[header.ts]"]
  node_experiment_script["Experiment interactions<br/>[experiments.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_projects_page
node_visitor -->|"browses"| node_stack_page
node_visitor -->|"explores"| node_experiments_page
node_home -->|"presents"| node_profile
node_projects_page -->|"renders"| node_projects_data
node_stack_page -->|"renders"| node_tools_data
node_projects_data -->|"types with"| node_tools_data
node_header -->|"uses destinations"| node_navigation
node_header -->|"shares markup"| node_dropdown
node_header_script -->|"controls menu"| node_header
node_header_script -->|"controls theme"| node_header
node_saved_work -->|"preserves section"| node_project_list
node_saved_work -->|"preserves section"| node_toolbox
node_experiments_page -->|"uses content"| node_experiment_data
node_experiments_page -->|"uses previews"| node_experiment_cover
node_experiment_script -->|"controls sections"| node_experiments_page
node_experiment_script -->|"rotates previews"| node_experiment_cover
node_other_pages -.->|"uses shared shell"| node_page_shell

click node_home "https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/index.astro"
click node_projects_page "https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/projects.astro"
click node_stack_page "https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/stack.astro"
click node_experiments_page "https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/experiments.astro"
click node_other_pages "https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/%5Bpage%5D.astro"
click node_profile "https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/profile.ts"
click node_navigation "https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/navigation.ts"
click node_projects_data "https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/projects.ts"
click node_tools_data "https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/tools.ts"
click node_experiment_data "https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/experiments.ts"
click node_page_shell "https://github.com/algorrismo/ismails-portfolio/blob/main/src/layouts/Page.astro"
click node_header "https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/Header.astro"
click node_dropdown "https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/HeaderDropdown.astro"
click node_saved_work "https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/SavedWork.astro"
click node_project_list "https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/work/ProjectList.astro"
click node_toolbox "https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/work/Toolbox.astro"
click node_experiment_cover "https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/experiments/ProjectCover.astro"
click node_header_script "https://github.com/algorrismo/ismails-portfolio/blob/main/src/scripts/header.ts"
click node_experiment_script "https://github.com/algorrismo/ismails-portfolio/blob/main/src/scripts/experiments.ts"

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_projects_page,node_stack_page,node_experiments_page,node_other_pages toneBlue
class node_profile,node_navigation,node_projects_data,node_tools_data,node_experiment_data toneAmber
class node_page_shell,node_header,node_dropdown,node_saved_work,node_project_list,node_toolbox,node_experiment_cover toneMint
class node_header_script,node_experiment_script toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio routes

- [Home page](https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Projects page](https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/projects.astro): `src/pages/projects.astro`
- [Stack page](https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/stack.astro): `src/pages/stack.astro`
- [Experiments page](https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/experiments.astro): `src/pages/experiments.astro`
- [Other pages](https://github.com/algorrismo/ismails-portfolio/blob/main/src/pages/%5Bpage%5D.astro): `src/pages/[page].astro`

### Portfolio content

- [Profile data](https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/profile.ts): `src/data/profile.ts`
- [Navigation data](https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/navigation.ts): `src/data/navigation.ts`
- [Project data](https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Technology data](https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/tools.ts): `src/data/tools.ts`
- [Experiment content](https://github.com/algorrismo/ismails-portfolio/blob/main/src/data/experiments.ts): `src/data/experiments.ts`

### Reusable interface

- [Shared page shell](https://github.com/algorrismo/ismails-portfolio/blob/main/src/layouts/Page.astro): `src/layouts/Page.astro`
- [Header](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/Header.astro): `src/components/Header.astro`
- [Header dropdown](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/HeaderDropdown.astro): `src/components/HeaderDropdown.astro`
- [Saved work sections](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/SavedWork.astro): `src/components/SavedWork.astro`
- [Project list](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/work/ProjectList.astro): `src/components/work/ProjectList.astro`
- [Toolbox](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/work/Toolbox.astro): `src/components/work/Toolbox.astro`
- [Project previews](https://github.com/algorrismo/ismails-portfolio/blob/main/src/components/experiments/ProjectCover.astro): `src/components/experiments/ProjectCover.astro`

### Browser interactions

- [Header interactions](https://github.com/algorrismo/ismails-portfolio/blob/main/src/scripts/header.ts): `src/scripts/header.ts`
- [Experiment interactions](https://github.com/algorrismo/ismails-portfolio/blob/main/src/scripts/experiments.ts): `src/scripts/experiments.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Visitor → Projects page: browses (evidence: `README.md`)
- Visitor → Stack page: browses (evidence: `README.md`)
- Visitor → Experiments page: explores (evidence: `README.md`)
- Home page → Profile data: presents (evidence: `README.md`)
- Projects page → Project data: renders (evidence: `README.md`)
- Stack page → Technology data: renders (evidence: `README.md`)
- Project data → Technology data: types with (evidence: `src/data/projects.ts`)
- Header → Navigation data: uses destinations (evidence: `README.md`)
- Header → Header dropdown: shares markup (evidence: `README.md`)
- Header interactions → Header: controls menu (evidence: `README.md`)
- Header interactions → Header: controls theme (evidence: `src/scripts/header.ts`)
- Saved work sections → Project list: preserves section (evidence: `README.md`)
- Saved work sections → Toolbox: preserves section (evidence: `README.md`)
- Experiments page → Experiment content: uses content (evidence: `README.md`)
- Experiments page → Project previews: uses previews (evidence: `README.md`)
- Experiment interactions → Experiments page: controls sections (evidence: `README.md`)
- Experiment interactions → Project previews: rotates previews (evidence: `src/scripts/experiments.ts`)
- Other pages → Shared page shell: uses shared shell