# kamalesh-k05/opencode-web architecture

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

- Interactive diagram: https://gitdiagram.com/kamalesh-k05/opencode-web
- Repository: https://github.com/kamalesh-k05/opencode-web

## Overview

This repository contains two React marketing experiences: a Pavazha Malli grocery storefront and a Tile Construction company portfolio site. Visitors browse each page’s sections and visual features; the construction site also presents project galleries and contact information, while the grocery page includes category and gallery content plus a newsletter section. The excerpts show the app-level composition and selected component relationships, but not every section’s implementation or behavior, so unsampled relationships are omitted.

Main entry points: [`tile-construction/src/App.jsx`](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/App.jsx) (Construction page), [`src/App.jsx`](https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx) (Grocery page), [`tile-construction/src/data.js`](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/data.js) (Site content data), [`tile-construction/src/lib.jsx`](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/lib.jsx) (Reveal helpers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grocery["Grocery storefront"]
  node_grocery_app["Grocery page<br/>[App.jsx]"]
  node_categories["Category selector<br/>[App.jsx]"]
  node_store_gallery["Store gallery<br/>[App.jsx]"]
  node_newsletter["Newsletter section<br/>[App.jsx]"]
end

subgraph group_effects["Interactive visuals"]
  node_masonry["Masonry gallery<br/>[Masonry.jsx]"]
  node_option_wheel["Option wheel<br/>[OptionWheel.jsx]"]
  node_scroll_expand["Scroll expansion<br/>[ScrollExpand.jsx]"]
  node_ferrofluid["Ferrofluid visual<br/>[Ferrofluid.jsx]"]
  node_orb["Orb visual<br/>[Orb.jsx]"]
  node_kolam["Kolam visual<br/>[Kolam.jsx]"]
  node_image_trail["Image trail<br/>[ImageTrail.jsx]"]
  node_other_effects["Other visual components"]
end

subgraph group_construction["Construction portfolio"]
  node_construction_app["Construction page<br/>[App.jsx]"]
  node_preloader["Preloader<br/>[Preloader.jsx]"]
  node_nav["Site navigation<br/>[Nav.jsx]"]
  node_hero["Hero section<br/>[Hero.jsx]"]
  node_about["Company overview<br/>[About.jsx]"]
  node_capabilities["Capabilities<br/>[Capabilities.jsx]"]
  node_numbers["Company metrics<br/>[Numbers.jsx]"]
  node_building["Building showcase<br/>[Building.jsx]"]
  node_viewmap["Project map<br/>[ViewMap.jsx]"]
  node_floors["Project collections<br/>[Floors.jsx]"]
  node_gallery["Project gallery<br/>[Gallery.jsx]"]
  node_footer_cta["Contact callout<br/>[FooterCTA.jsx]"]
  node_footer["Contact and footer<br/>[Footer.jsx]"]
end

subgraph group_shared["Shared presentation"]
  node_gradual_blur["Gradual blur<br/>[GradualBlur.jsx]"]
  node_reveal["Reveal helpers<br/>[lib.jsx]"]
  node_in_view["In-view observer<br/>[useInView.js]"]
  node_construction_data["Site content data<br/>[data.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens"| node_grocery_app
node_grocery_app -->|"renders"| node_categories
node_grocery_app -->|"renders"| node_store_gallery
node_grocery_app -->|"renders"| node_newsletter
node_grocery_app -->|"renders"| node_masonry
node_grocery_app -->|"renders"| node_option_wheel
node_grocery_app -->|"renders"| node_scroll_expand
node_grocery_app -->|"lazy-loads"| node_ferrofluid
node_grocery_app -->|"lazy-loads"| node_orb
node_grocery_app -->|"lazy-loads"| node_kolam
node_grocery_app -->|"lazy-loads"| node_image_trail
node_visitor -->|"opens"| node_construction_app
node_construction_app -->|"renders"| node_preloader
node_construction_app -->|"renders"| node_nav
node_construction_app -->|"renders"| node_hero
node_construction_app -->|"renders"| node_about
node_construction_app -->|"renders"| node_capabilities
node_construction_app -->|"renders"| node_numbers
node_construction_app -->|"renders"| node_building
node_construction_app -->|"renders"| node_viewmap
node_construction_app -->|"renders"| node_floors
node_construction_app -->|"renders"| node_gallery
node_construction_app -->|"renders"| node_footer_cta
node_construction_app -->|"renders"| node_footer
node_capabilities -->|"renders"| node_gradual_blur
node_about -->|"uses"| node_reveal
node_building -->|"uses"| node_reveal
node_floors -->|"uses"| node_reveal
node_footer_cta -->|"uses"| node_reveal
node_reveal -->|"observes visibility"| node_in_view
node_about -->|"reads"| node_construction_data
node_building -->|"reads"| node_construction_data
node_floors -->|"reads"| node_construction_data
node_gallery -->|"reads"| node_construction_data
node_footer -->|"reads"| node_construction_data
node_footer_cta -->|"reads"| node_construction_data
node_hero -->|"reads"| node_construction_data
node_nav -->|"reads"| node_construction_data
node_viewmap -->|"reads"| node_construction_data

click node_grocery_app "https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx"
click node_categories "https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx"
click node_store_gallery "https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx"
click node_newsletter "https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx"
click node_masonry "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Masonry.jsx"
click node_option_wheel "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/OptionWheel.jsx"
click node_scroll_expand "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/ScrollExpand.jsx"
click node_ferrofluid "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Ferrofluid.jsx"
click node_orb "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Orb.jsx"
click node_kolam "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Kolam.jsx"
click node_image_trail "https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/ImageTrail.jsx"
click node_other_effects "https://github.com/kamalesh-k05/opencode-web/tree/main/src/components"
click node_construction_app "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/App.jsx"
click node_preloader "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Preloader.jsx"
click node_nav "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Nav.jsx"
click node_hero "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Hero.jsx"
click node_about "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/About.jsx"
click node_capabilities "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Capabilities.jsx"
click node_numbers "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Numbers.jsx"
click node_building "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Building.jsx"
click node_viewmap "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/ViewMap.jsx"
click node_floors "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Floors.jsx"
click node_gallery "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Gallery.jsx"
click node_footer_cta "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/FooterCTA.jsx"
click node_footer "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Footer.jsx"
click node_gradual_blur "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/GradualBlur.jsx"
click node_reveal "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/lib.jsx"
click node_in_view "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/useInView.js"
click node_construction_data "https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/data.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_grocery_app,node_categories,node_store_gallery,node_newsletter toneBlue
class node_masonry,node_option_wheel,node_scroll_expand,node_ferrofluid,node_orb,node_kolam,node_image_trail,node_other_effects toneAmber
class node_construction_app,node_preloader,node_nav,node_hero,node_about,node_capabilities,node_numbers,node_building,node_viewmap,node_floors,node_gallery,node_footer_cta,node_footer toneMint
class node_gradual_blur,node_reveal,node_in_view,node_construction_data toneRose
class node_visitor toneIndigo
```

## Components

### Grocery storefront

- [Grocery page](https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx): `src/App.jsx`
- [Category selector](https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx): `src/App.jsx`
- [Store gallery](https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx): `src/App.jsx`
- [Newsletter section](https://github.com/kamalesh-k05/opencode-web/blob/main/src/App.jsx): `src/App.jsx`

### Interactive visuals

- [Masonry gallery](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Masonry.jsx): `src/components/Masonry.jsx`
- [Option wheel](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/OptionWheel.jsx): `src/components/OptionWheel.jsx`
- [Scroll expansion](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/ScrollExpand.jsx): `src/components/ScrollExpand.jsx`
- [Ferrofluid visual](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Ferrofluid.jsx): `src/components/Ferrofluid.jsx`
- [Orb visual](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Orb.jsx): `src/components/Orb.jsx`
- [Kolam visual](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/Kolam.jsx): `src/components/Kolam.jsx`
- [Image trail](https://github.com/kamalesh-k05/opencode-web/blob/main/src/components/ImageTrail.jsx): `src/components/ImageTrail.jsx`
- [Other visual components](https://github.com/kamalesh-k05/opencode-web/tree/main/src/components): `src/components`

### Construction portfolio

- [Construction page](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/App.jsx): `tile-construction/src/App.jsx`
- [Preloader](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Preloader.jsx): `tile-construction/src/components/Preloader.jsx`
- [Site navigation](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Nav.jsx): `tile-construction/src/components/Nav.jsx`
- [Hero section](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Hero.jsx): `tile-construction/src/components/Hero.jsx`
- [Company overview](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/About.jsx): `tile-construction/src/components/About.jsx`
- [Capabilities](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Capabilities.jsx): `tile-construction/src/components/Capabilities.jsx`
- [Company metrics](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Numbers.jsx): `tile-construction/src/components/Numbers.jsx`
- [Building showcase](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Building.jsx): `tile-construction/src/components/Building.jsx`
- [Project map](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/ViewMap.jsx): `tile-construction/src/components/ViewMap.jsx`
- [Project collections](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Floors.jsx): `tile-construction/src/components/Floors.jsx`
- [Project gallery](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Gallery.jsx): `tile-construction/src/components/Gallery.jsx`
- [Contact callout](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/FooterCTA.jsx): `tile-construction/src/components/FooterCTA.jsx`
- [Contact and footer](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/Footer.jsx): `tile-construction/src/components/Footer.jsx`

### Shared presentation

- [Gradual blur](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/components/GradualBlur.jsx): `tile-construction/src/components/GradualBlur.jsx`
- [Reveal helpers](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/lib.jsx): `tile-construction/src/lib.jsx`
- [In-view observer](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/useInView.js): `tile-construction/src/useInView.js`
- [Site content data](https://github.com/kamalesh-k05/opencode-web/blob/main/tile-construction/src/data.js): `tile-construction/src/data.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → Grocery page: opens
- Grocery page → Category selector: renders (evidence: `src/App.jsx`)
- Grocery page → Store gallery: renders (evidence: `src/App.jsx`)
- Grocery page → Newsletter section: renders (evidence: `src/App.jsx`)
- Grocery page → Masonry gallery: renders (evidence: `src/App.jsx`)
- Grocery page → Option wheel: renders (evidence: `src/App.jsx`)
- Grocery page → Scroll expansion: renders (evidence: `src/App.jsx`)
- Grocery page → Ferrofluid visual: lazy-loads (evidence: `src/App.jsx`)
- Grocery page → Orb visual: lazy-loads (evidence: `src/App.jsx`)
- Grocery page → Kolam visual: lazy-loads (evidence: `src/App.jsx`)
- Grocery page → Image trail: lazy-loads (evidence: `src/App.jsx`)
- Site visitor → Construction page: opens
- Construction page → Preloader: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Site navigation: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Hero section: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Company overview: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Capabilities: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Company metrics: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Building showcase: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Project map: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Project collections: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Project gallery: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Contact callout: renders (evidence: `tile-construction/src/App.jsx`)
- Construction page → Contact and footer: renders (evidence: `tile-construction/src/App.jsx`)
- Capabilities → Gradual blur: renders (evidence: `tile-construction/src/components/Capabilities.jsx`)
- Company overview → Reveal helpers: uses (evidence: `tile-construction/src/components/About.jsx`)
- Building showcase → Reveal helpers: uses (evidence: `tile-construction/src/components/Building.jsx`)
- Project collections → Reveal helpers: uses (evidence: `tile-construction/src/components/Floors.jsx`)
- Contact callout → Reveal helpers: uses (evidence: `tile-construction/src/components/FooterCTA.jsx`)
- Reveal helpers → In-view observer: observes visibility (evidence: `tile-construction/src/lib.jsx`)
- Company overview → Site content data: reads (evidence: `tile-construction/src/components/About.jsx`)
- Building showcase → Site content data: reads (evidence: `tile-construction/src/components/Building.jsx`)
- Project collections → Site content data: reads (evidence: `tile-construction/src/components/Floors.jsx`)
- Project gallery → Site content data: reads (evidence: `tile-construction/src/components/Gallery.jsx`)
- Contact and footer → Site content data: reads (evidence: `tile-construction/src/components/Footer.jsx`)
- Contact callout → Site content data: reads (evidence: `tile-construction/src/components/FooterCTA.jsx`)
- Hero section → Site content data: reads (evidence: `tile-construction/src/components/Hero.jsx`)
- Site navigation → Site content data: reads (evidence: `tile-construction/src/components/Nav.jsx`)
- Project map → Site content data: reads (evidence: `tile-construction/src/components/ViewMap.jsx`)