# tharun4302-stack/workshop-business architecture

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

- Interactive diagram: https://gitdiagram.com/tharun4302-stack/workshop-business
- Repository: https://github.com/tharun4302-stack/workshop-business

## Overview

Inklings Building Workshop is an interactive architectural portfolio told as a continuous, ten-chapter scroll story. Visitors enter through an optional ink-reveal intro, explore the studio’s approach and design process, then move through materials, projects, people, and a local inquiry download. Chapter navigation, deep links, calls to action, and scrolling share the narrative position; scene controls offer focused explorations within chapters. The map reflects documented capabilities, but sampled source excerpts do not expose all chapter implementations or the complete scroll controller.

Main entry points: [`src/App.jsx`](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx) (Story controller), [`src/InkOpening.jsx`](https://github.com/tharun4302-stack/workshop-business/blob/main/src/InkOpening.jsx) (Ink opening), [`src/SketchNote.jsx`](https://github.com/tharun4302-stack/workshop-business/blob/main/src/SketchNote.jsx) (Sketch pad), [`src/WritingPencil.jsx`](https://github.com/tharun4302-stack/workshop-business/blob/main/src/WritingPencil.jsx) (Writing pencil)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_story["Story experience"]
  node_entry["Ink opening<br/>[InkOpening.jsx]"]
  node_controller["Story controller<br/>[App.jsx]"]
  node_chapters["Chapter navigation<br/>[App.jsx]"]
end

subgraph group_work["Design and projects"]
  node_philosophy["Site philosophy"]
  node_drawing["Design process<br/>[App.jsx]"]
  node_materials["Material studies<br/>[App.jsx]"]
  node_sommerville["Sommerville House<br/>[App.jsx]"]
  node_tanglin["Tanglin House<br/>[App.jsx]"]
  node_play["Play Series<br/>[App.jsx]"]
  node_memorial["Founder’s Memorial<br/>[App.jsx]"]
  node_people["People and profiles<br/>[App.jsx]"]
end

subgraph group_interaction["Visitor interactions"]
  node_inquiry["Inquiry form<br/>[App.jsx]"]
  node_sketch["Sketch pad<br/>[SketchNote.jsx]"]
  node_pencil["Writing pencil<br/>[WritingPencil.jsx]"]
  node_localfile["Local text download<br/>[App.jsx]"]
end

subgraph group_runtime["Application runtime"]
  node_experience["Hero experience"]
  node_storydata["Chapter timeline data<br/>[story.js]"]
  node_app["React application<br/>[App.jsx]"]
  node_mount["Application entry<br/>[main.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_visitor -->|"scrolls and navigates"| node_controller
node_entry -->|"enters experience"| node_controller
node_mount -->|"renders"| node_app
node_app -->|"renders"| node_entry
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_sketch
node_app -->|"renders"| node_pencil
node_controller -->|"routes between"| node_chapters
node_controller -->|"uses chapter timeline"| node_storydata
node_controller -->|"shows chapter"| node_philosophy
node_controller -->|"shows chapter"| node_drawing
node_controller -->|"shows chapter"| node_materials
node_controller -->|"shows chapter"| node_sommerville
node_controller -->|"shows chapter"| node_tanglin
node_controller -->|"shows chapter"| node_play
node_controller -->|"shows chapter"| node_memorial
node_controller -->|"shows chapter"| node_people
node_controller -->|"shows chapter"| node_inquiry
node_inquiry -->|"offers sketch pad"| node_sketch
node_inquiry -->|"activates"| node_pencil
node_inquiry -->|"downloads inquiry"| node_localfile

click node_entry "https://github.com/tharun4302-stack/workshop-business/blob/main/src/InkOpening.jsx"
click node_controller "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_chapters "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_philosophy "https://github.com/tharun4302-stack/workshop-business/blob/main/src/HeroScrollExperience.jsx"
click node_drawing "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_materials "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_sommerville "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_tanglin "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_play "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_memorial "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_people "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_inquiry "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_sketch "https://github.com/tharun4302-stack/workshop-business/blob/main/src/SketchNote.jsx"
click node_pencil "https://github.com/tharun4302-stack/workshop-business/blob/main/src/WritingPencil.jsx"
click node_localfile "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_experience "https://github.com/tharun4302-stack/workshop-business/blob/main/src/HeroScrollExperience.jsx"
click node_storydata "https://github.com/tharun4302-stack/workshop-business/blob/main/src/story.js"
click node_app "https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx"
click node_mount "https://github.com/tharun4302-stack/workshop-business/blob/main/src/main.jsx"

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_entry,node_controller,node_chapters toneBlue
class node_philosophy,node_drawing,node_materials,node_sommerville,node_tanglin,node_play,node_memorial,node_people toneAmber
class node_inquiry,node_sketch,node_pencil,node_localfile toneMint
class node_experience,node_storydata,node_app,node_mount toneRose
class node_visitor toneIndigo
```

## Components

### Story experience

- [Ink opening](https://github.com/tharun4302-stack/workshop-business/blob/main/src/InkOpening.jsx): `src/InkOpening.jsx`
- [Story controller](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Chapter navigation](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`

### Design and projects

- [Site philosophy](https://github.com/tharun4302-stack/workshop-business/blob/main/src/HeroScrollExperience.jsx): `src/HeroScrollExperience.jsx`
- [Design process](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Material studies](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Sommerville House](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Tanglin House](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Play Series](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Founder’s Memorial](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [People and profiles](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`

### Visitor interactions

- [Inquiry form](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Sketch pad](https://github.com/tharun4302-stack/workshop-business/blob/main/src/SketchNote.jsx): `src/SketchNote.jsx`
- [Writing pencil](https://github.com/tharun4302-stack/workshop-business/blob/main/src/WritingPencil.jsx): `src/WritingPencil.jsx`
- [Local text download](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`

### Application runtime

- [Hero experience](https://github.com/tharun4302-stack/workshop-business/blob/main/src/HeroScrollExperience.jsx): `src/HeroScrollExperience.jsx`
- [Chapter timeline data](https://github.com/tharun4302-stack/workshop-business/blob/main/src/story.js): `src/story.js`
- [React application](https://github.com/tharun4302-stack/workshop-business/blob/main/src/App.jsx): `src/App.jsx`
- [Application entry](https://github.com/tharun4302-stack/workshop-business/blob/main/src/main.jsx): `src/main.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → Ink opening: opens site (evidence: `README.md`)
- Visitor → Story controller: scrolls and navigates (evidence: `README.md`)
- Ink opening → Story controller: enters experience (evidence: `src/App.jsx`)
- Application entry → React application: renders (evidence: `src/main.jsx`)
- React application → Ink opening: renders (evidence: `src/App.jsx`)
- React application → Hero experience: renders (evidence: `src/App.jsx`)
- React application → Sketch pad: renders (evidence: `src/App.jsx`)
- React application → Writing pencil: renders (evidence: `src/App.jsx`)
- Story controller → Chapter navigation: routes between (evidence: `README.md`)
- Story controller → Chapter timeline data: uses chapter timeline (evidence: `src/App.jsx`)
- Story controller → Site philosophy: shows chapter (evidence: `README.md`)
- Story controller → Design process: shows chapter (evidence: `README.md`)
- Story controller → Material studies: shows chapter (evidence: `README.md`)
- Story controller → Sommerville House: shows chapter (evidence: `README.md`)
- Story controller → Tanglin House: shows chapter (evidence: `README.md`)
- Story controller → Play Series: shows chapter (evidence: `README.md`)
- Story controller → Founder’s Memorial: shows chapter (evidence: `README.md`)
- Story controller → People and profiles: shows chapter (evidence: `README.md`)
- Story controller → Inquiry form: shows chapter (evidence: `README.md`)
- Inquiry form → Sketch pad: offers sketch pad (evidence: `src/App.jsx`)
- Inquiry form → Writing pencil: activates (evidence: `src/App.jsx`)
- Inquiry form → Local text download: downloads inquiry (evidence: `README.md`)