# kjbharath/arar architecture

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

- Interactive diagram: https://gitdiagram.com/kjbharath/arar
- Repository: https://github.com/kjbharath/arar

## Overview

#### Purpose and entry points
ARAR is a static marketing/site presence with a primary landing page and supporting utility/careers pages. Browser entry points are `index.html`, `careers.html`, and `utility.html`; shared presentation and behavior are supplied by `index.css` and `index.js`.

#### Page shell and content
`index.html` is the main composition root for the public site. `careers.html` provides a separate careers-facing route, while `utility.html` likely supports a secondary informational or fallback page. There is no server application, API layer, or package-managed runtime visible in the repository.

#### Client-side presentation layer
Styling is centralized in `index.css`, making CSS the site-wide visual-system boundary. Browser interactions, DOM behavior, and any page animation orchestration are handled by `index.js`. The site is intended to run directly in a browser as static files.

#### Animated/visual effects
`particle-noise.js` is a distinct visual-effect module, likely loaded by the landing page to render particle or noise-driven animation. Its separation from `index.js` suggests a boundary between general page behavior and specialized canvas/WebGL-style visual rendering.

#### Media and brand assets
Static brand and marketing assets are served from the repository: `3d-logo.mp4` supplies video-based branding, while `img/clients`, `img/companies`, and `img/site photos` contain imagery used across content sections. `img/ARAR brochure.pdf` is a downloadable collateral asset exposed through the site.

#### Deployment boundary
GitHub Actions deployment is defined in `.github/workflows/deploy.yml`. The workflow is the repository’s operational boundary: it builds or publishes the static files to the configured hosting target. No other infrastructure, backend service, database, or third-party integration is represented in the tree.

Main entry points: [`index.html`](https://github.com/kjbharath/arar/blob/main/index.html) (Landing page), [`index.css`](https://github.com/kjbharath/arar/blob/main/index.css) (Site styles), [`careers.html`](https://github.com/kjbharath/arar/blob/main/careers.html) (Careers page), [`utility.html`](https://github.com/kjbharath/arar/blob/main/utility.html) (Utility page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Browser Pages"]
  node_landing["Landing page<br/>HTML entry point<br/>[index.html]"]
  node_careers["Careers page<br/>HTML entry point<br/>[careers.html]"]
  node_utility["Utility page<br/>HTML entry point<br/>[utility.html]"]
end

subgraph group_client["Client Presentation"]
  node_styles["Site styles<br/>CSS visual system<br/>[index.css]"]
  node_site_js["Page behavior<br/>browser JavaScript<br/>[index.js]"]
  node_particles["Particle noise effect<br/>visual effect module<br/>[particle-noise.js]"]
end

subgraph group_assets["Media Assets"]
  node_logo_video["3D logo video<br/>brand video<br/>[3d-logo.mp4]"]
  node_client_images["Client imagery<br/>image collection"]
  node_company_images["Company imagery<br/>image collection"]
  node_site_photos["Site photos<br/>image collection"]
  node_brochure["ARAR brochure<br/>downloadable PDF<br/>[ARAR brochure.pdf]"]
end

subgraph group_delivery["Deployment"]
  node_deploy{{"Deployment workflow<br/>GitHub Actions workflow<br/>[deploy.yml]"}}
  node_static_site["Hosted static site<br/>deployment target"]
end

node_landing -->|"loads"| node_styles
node_careers -->|"loads"| node_styles
node_utility -->|"loads"| node_styles
node_landing -->|"loads"| node_site_js
node_landing -->|"uses"| node_particles
node_site_js -.->|"orchestrates"| node_particles
node_landing -->|"embeds"| node_logo_video
node_landing -->|"uses"| node_client_images
node_landing -->|"uses"| node_company_images
node_landing -->|"uses"| node_site_photos
node_landing -->|"links download"| node_brochure
node_deploy -->|"publishes"| node_static_site
node_static_site -->|"serves"| node_landing
node_static_site -->|"serves"| node_careers
node_static_site -->|"serves"| node_utility

click node_landing "https://github.com/kjbharath/arar/blob/main/index.html"
click node_careers "https://github.com/kjbharath/arar/blob/main/careers.html"
click node_utility "https://github.com/kjbharath/arar/blob/main/utility.html"
click node_styles "https://github.com/kjbharath/arar/blob/main/index.css"
click node_site_js "https://github.com/kjbharath/arar/blob/main/index.js"
click node_particles "https://github.com/kjbharath/arar/blob/main/particle-noise.js"
click node_logo_video "https://github.com/kjbharath/arar/blob/main/3d-logo.mp4"
click node_client_images "https://github.com/kjbharath/arar/tree/main/img/clients"
click node_company_images "https://github.com/kjbharath/arar/tree/main/img/companies"
click node_site_photos "https://github.com/kjbharath/arar/tree/main/img/site%20photos"
click node_brochure "https://github.com/kjbharath/arar/blob/main/img/ARAR%20brochure.pdf"
click node_deploy "https://github.com/kjbharath/arar/blob/main/.github/workflows/deploy.yml"

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_landing,node_careers,node_utility toneBlue
class node_styles,node_site_js,node_particles toneAmber
class node_logo_video,node_client_images,node_company_images,node_site_photos,node_brochure toneMint
class node_deploy,node_static_site toneRose
```

## Components

### Browser Pages

Static HTML entry points served directly to browsers.

- [Landing page](https://github.com/kjbharath/arar/blob/main/index.html): HTML entry point · Primary public-site composition root. · `index.html`
- [Careers page](https://github.com/kjbharath/arar/blob/main/careers.html): HTML entry point · `careers.html`
- [Utility page](https://github.com/kjbharath/arar/blob/main/utility.html): HTML entry point · Secondary informational or fallback route. · `utility.html`

### Client Presentation

Shared browser-side styling and behavior.

- [Site styles](https://github.com/kjbharath/arar/blob/main/index.css): CSS visual system · Centralized site-wide presentation layer. · `index.css`
- [Page behavior](https://github.com/kjbharath/arar/blob/main/index.js): browser JavaScript · Handles DOM interactions and page animation orchestration. · `index.js`
- [Particle noise effect](https://github.com/kjbharath/arar/blob/main/particle-noise.js): visual effect module · Specialized animated visual rendering. · `particle-noise.js`

### Media Assets

Brand, marketing, and downloadable site assets.

- [3D logo video](https://github.com/kjbharath/arar/blob/main/3d-logo.mp4): brand video · `3d-logo.mp4`
- [Client imagery](https://github.com/kjbharath/arar/tree/main/img/clients): image collection · `img/clients`
- [Company imagery](https://github.com/kjbharath/arar/tree/main/img/companies): image collection · `img/companies`
- [Site photos](https://github.com/kjbharath/arar/tree/main/img/site%20photos): image collection · `img/site photos`
- [ARAR brochure](https://github.com/kjbharath/arar/blob/main/img/ARAR%20brochure.pdf): downloadable PDF · Marketing collateral exposed through the site. · `img/ARAR brochure.pdf`

### Deployment

Static-site publishing automation.

- [Deployment workflow](https://github.com/kjbharath/arar/blob/main/.github/workflows/deploy.yml): GitHub Actions workflow · Builds or publishes static files to the configured host. · `.github/workflows/deploy.yml`
- **Hosted static site**: deployment target · Browser-served published site.

## Connections

- Landing page → Site styles: loads
- Careers page → Site styles: loads
- Utility page → Site styles: loads
- Landing page → Page behavior: loads
- Landing page → Particle noise effect: uses
- Page behavior → Particle noise effect: orchestrates
- Landing page → 3D logo video: embeds
- Landing page → Client imagery: uses
- Landing page → Company imagery: uses
- Landing page → Site photos: uses
- Landing page → ARAR brochure: links download
- Deployment workflow → Hosted static site: publishes
- Hosted static site → Landing page: serves
- Hosted static site → Careers page: serves
- Hosted static site → Utility page: serves