# rama-l7/portfolio architecture

> Architecture diagram of the GitHub repository rama-l7/portfolio, 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/rama-l7/portfolio
- Repository: https://github.com/rama-l7/portfolio

## Overview

Project Loom is a static portfolio platform: a theme-specific build combines shared portfolio data, section templates, CSS, tokens, and browser behavior into a standalone site. The principal workflow is build-time composition followed by visitor navigation through the rendered portfolio. The tree and sampled build code support the composition flow; browser interactions are sampled only in part, so uncertain module wiring is omitted.

Main entry points: [`platform/lib/build.js`](https://github.com/rama-l7/portfolio/blob/main/platform/lib/build.js) (Build orchestrator), [`platform/lib/inject-theme.js`](https://github.com/rama-l7/portfolio/blob/main/platform/lib/inject-theme.js) (Token resolver), [`platform/js`](https://github.com/rama-l7/portfolio/tree/main/platform/js) (Shared browser modules), [`platform/data.json`](https://github.com/rama-l7/portfolio/blob/main/platform/data.json) (Portfolio data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_build["Build and rendering"]
  node_builder["Build orchestrator<br/>[build.js]"]
  node_renderer["Template renderer<br/>[inject-data.js]"]
  node_sitemap["Sitemap generator"]
  node_built_site["Generated portfolio"]
  node_sitemap_file["Generated sitemap"]
end

subgraph group_content["Portfolio content"]
  node_portfolio_data["Portfolio data<br/>[data.json]"]
  node_section_templates["Portfolio sections"]
  node_site_shell["Document shell<br/>[head.html]"]
end

subgraph group_themes["Themes and styling"]
  node_core_tokens["Core tokens<br/>[core.json]"]
  node_theme_config["Theme configuration<br/>[theme.json]"]
  node_theme_assets["Theme assets"]
  node_token_resolver["Token resolver<br/>[inject-theme.js]"]
  node_shared_styles["Shared styles"]
  node_section_styles["Section styles"]
end

subgraph group_browser["Browser experience"]
  node_shared_runtime["Shared browser modules"]
  node_theme_loader["Runtime token loader<br/>[theme-loader.js]"]
end

node_maintainer(("Portfolio maintainer"))
node_visitor(("Portfolio visitor"))

node_maintainer -->|"edits content"| node_portfolio_data
node_maintainer -->|"selects theme"| node_theme_config
node_builder -->|"reads"| node_portfolio_data
node_builder -->|"reads"| node_theme_config
node_builder -->|"reads"| node_core_tokens
node_builder -->|"calls"| node_token_resolver
node_token_resolver -->|"merges tokens"| node_core_tokens
node_token_resolver -->|"reads overrides"| node_theme_config
node_builder -->|"reads"| node_section_templates
node_builder -->|"calls"| node_renderer
node_renderer -->|"resolves placeholders"| node_portfolio_data
node_builder -->|"renders shell"| node_site_shell
node_builder -->|"assembles styles"| node_shared_styles
node_builder -->|"assembles styles"| node_section_styles
node_builder -->|"loads theme assets"| node_theme_assets
node_builder -->|"embeds scripts"| node_shared_runtime
node_builder -->|"writes site"| node_built_site
node_visitor -->|"visits"| node_built_site
node_built_site -->|"runs browser code"| node_shared_runtime
node_shared_runtime -->|"includes loader"| node_theme_loader
node_sitemap -->|"scans output"| node_built_site
node_sitemap -->|"writes sitemap"| node_sitemap_file

click node_builder "https://github.com/rama-l7/portfolio/blob/main/platform/lib/build.js"
click node_renderer "https://github.com/rama-l7/portfolio/blob/main/platform/lib/inject-data.js"
click node_sitemap "https://github.com/rama-l7/portfolio/blob/main/platform/lib/generate-sitemap.js"
click node_portfolio_data "https://github.com/rama-l7/portfolio/blob/main/platform/data.json"
click node_section_templates "https://github.com/rama-l7/portfolio/tree/main/platform/components"
click node_site_shell "https://github.com/rama-l7/portfolio/blob/main/platform/components/head.html"
click node_core_tokens "https://github.com/rama-l7/portfolio/blob/main/platform/tokens/core.json"
click node_theme_config "https://github.com/rama-l7/portfolio/blob/main/themes/premium/theme.json"
click node_theme_assets "https://github.com/rama-l7/portfolio/tree/main/themes/premium"
click node_token_resolver "https://github.com/rama-l7/portfolio/blob/main/platform/lib/inject-theme.js"
click node_shared_styles "https://github.com/rama-l7/portfolio/tree/main/platform/css"
click node_section_styles "https://github.com/rama-l7/portfolio/tree/main/platform/sections"
click node_shared_runtime "https://github.com/rama-l7/portfolio/tree/main/platform/js"
click node_theme_loader "https://github.com/rama-l7/portfolio/blob/main/platform/js/theme-loader.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_builder,node_renderer,node_sitemap,node_built_site,node_sitemap_file toneBlue
class node_portfolio_data,node_section_templates,node_site_shell toneAmber
class node_core_tokens,node_theme_config,node_theme_assets,node_token_resolver,node_shared_styles,node_section_styles toneMint
class node_shared_runtime,node_theme_loader toneRose
class node_maintainer,node_visitor toneIndigo
```

## Components

### Build and rendering

- [Build orchestrator](https://github.com/rama-l7/portfolio/blob/main/platform/lib/build.js): `platform/lib/build.js`
- [Template renderer](https://github.com/rama-l7/portfolio/blob/main/platform/lib/inject-data.js): `platform/lib/inject-data.js`
- [Sitemap generator](https://github.com/rama-l7/portfolio/blob/main/platform/lib/generate-sitemap.js): `platform/lib/generate-sitemap.js`
- **Generated portfolio**
- **Generated sitemap**

### Portfolio content

- [Portfolio data](https://github.com/rama-l7/portfolio/blob/main/platform/data.json): `platform/data.json`
- [Portfolio sections](https://github.com/rama-l7/portfolio/tree/main/platform/components): `platform/components`
- [Document shell](https://github.com/rama-l7/portfolio/blob/main/platform/components/head.html): `platform/components/head.html`

### Themes and styling

- [Core tokens](https://github.com/rama-l7/portfolio/blob/main/platform/tokens/core.json): `platform/tokens/core.json`
- [Theme configuration](https://github.com/rama-l7/portfolio/blob/main/themes/premium/theme.json): `themes/premium/theme.json`
- [Theme assets](https://github.com/rama-l7/portfolio/tree/main/themes/premium): `themes/premium`
- [Token resolver](https://github.com/rama-l7/portfolio/blob/main/platform/lib/inject-theme.js): `platform/lib/inject-theme.js`
- [Shared styles](https://github.com/rama-l7/portfolio/tree/main/platform/css): `platform/css`
- [Section styles](https://github.com/rama-l7/portfolio/tree/main/platform/sections): `platform/sections`

### Browser experience

- [Shared browser modules](https://github.com/rama-l7/portfolio/tree/main/platform/js): `platform/js`
- [Runtime token loader](https://github.com/rama-l7/portfolio/blob/main/platform/js/theme-loader.js): `platform/js/theme-loader.js`

### Other components

- **Portfolio maintainer**
- **Portfolio visitor**

## Connections

- Portfolio maintainer → Portfolio data: edits content
- Portfolio maintainer → Theme configuration: selects theme
- Build orchestrator → Portfolio data: reads
- Build orchestrator → Theme configuration: reads
- Build orchestrator → Core tokens: reads
- Build orchestrator → Token resolver: calls
- Token resolver → Core tokens: merges tokens
- Token resolver → Theme configuration: reads overrides
- Build orchestrator → Portfolio sections: reads
- Build orchestrator → Template renderer: calls
- Template renderer → Portfolio data: resolves placeholders
- Build orchestrator → Document shell: renders shell
- Build orchestrator → Shared styles: assembles styles
- Build orchestrator → Section styles: assembles styles
- Build orchestrator → Theme assets: loads theme assets
- Build orchestrator → Shared browser modules: embeds scripts
- Build orchestrator → Generated portfolio: writes site
- Portfolio visitor → Generated portfolio: visits
- Generated portfolio → Shared browser modules: runs browser code
- Shared browser modules → Runtime token loader: includes loader
- Sitemap generator → Generated portfolio: scans output
- Sitemap generator → Generated sitemap: writes sitemap