# tharanidharan10/ochi architecture

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

## Overview

#### Purpose and runtime
This is a static, single-page React site built with Vite. It appears to implement a marketing/portfolio-style landing page composed of visual content sections, rather than a backend-connected application. Browser execution starts from `index.html`, with Vite serving and bundling the React source.

#### Application entry and composition
`src/main.jsx` mounts the React application into the document. `src/App.jsx` is the top-level composition boundary and likely determines the page’s section order. Global styling is loaded from `src/index.css`.

Primary flow: browser loads `index.html` → `src/main.jsx` mounts React → `src/App.jsx` renders page sections → components render static UI and local visual behavior.

#### Landing and navigation shell
The landing experience and persistent navigation are separated into dedicated components:
- `src/components/LandingPage.jsx`
- `src/components/Navbar.jsx`
- `src/components/Footer.jsx`

`Navbar` is the likely primary in-page navigation/control surface, while `LandingPage` establishes the hero or initial viewport. `Footer` terminates the page and provides the final content boundary.

#### Content-section architecture
The main page is organized as independently renderable content blocks rather than route-level pages:
- `src/components/About.jsx`
- `src/components/Featured.jsx`
- `src/components/Cards.jsx`
- `src/components/Marquee.jsx`

This structure supports a vertically composed experience where `App.jsx` controls section sequencing and each component owns its own layout, content, and section-specific styling/classes.

#### Interactive visual element
`src/components/Eyes.jsx` is a specialized visual/interactive component, likely used within a hero or featured section. It is distinct from generic content sections and should be treated as an isolated UI behavior boundary:
- `src/components/Eyes.jsx`
- `src/components/LandingPage.jsx`
- `src/App.jsx`

Its data/control flow is local React rendering and browser interaction rather than an external API or service.

#### Styling and asset delivery
Styling is centered on global CSS plus Tailwind/PostCSS processing:
- `src/index.css`
- `tailwind.config.js`
- `postcss.config.js`

Static/source assets belong under `src/assets`, while production output is prebuilt in:
- `dist/index.html`
- `dist/assets/index-cXhWl8WZ.js`
- `dist/assets/index-DmgCoIgx.css`

The `dist` directory is the deployment artifact: an HTML shell referencing fingerprinted JavaScript and CSS bundles.

#### Build infrastructure and external boundaries
Vite is the development server and production bundler, configured by `vite.config.js`. React is the UI runtime; package definitions and dependency lock state are in `package.json` and `package-lock.json`. No server code, persistence layer, API client, authentication system, or external service integration is present in the repository tree.

Key boundaries are therefore: source UI (`src/`), browser public entry (`index.html`), static/public resources (`public/`), and deployable compiled output (`dist/`).

Main entry points: [`src/App.jsx`](https://github.com/tharanidharan10/ochi/blob/main/src/App.jsx) (App composition), [`vite.config.js`](https://github.com/tharanidharan10/ochi/blob/main/vite.config.js) (Vite), [`src/main.jsx`](https://github.com/tharanidharan10/ochi/blob/main/src/main.jsx) (React mount), [`index.html`](https://github.com/tharanidharan10/ochi/blob/main/index.html) (HTML entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_source["React source"]
  node_main["React mount<br/>client entry<br/>[main.jsx]"]
  node_app["App composition<br/>page shell<br/>[App.jsx]"]
  node_landing["Landing page<br/>hero section<br/>[LandingPage.jsx]"]
  node_navbar["Navbar<br/>navigation UI<br/>[Navbar.jsx]"]
  node_eyes["Eyes<br/>interactive visual<br/>[Eyes.jsx]"]
  node_content["Content sections<br/>section components<br/>[About.jsx]"]
  node_footer["Footer<br/>page terminus<br/>[Footer.jsx]"]
  node_styles["Global styles<br/>CSS source<br/>[index.css]"]
  node_assets["Source assets<br/>static assets"]
end

subgraph group_build["Build pipeline"]
  node_vite{{"Vite<br/>dev server and bundler<br/>[vite.config.js]"}}
  node_cssbuild["Tailwind / PostCSS<br/>CSS processing<br/>[tailwind.config.js]"]
end

subgraph group_output["Browser delivery"]
  node_html["HTML entry<br/>browser entry<br/>[index.html]"]
  node_public["Public resources<br/>static public files"]
  node_dist["Production output<br/>deployable static site<br/>[index.html]"]
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_content
node_app -->|"renders"| node_footer
node_landing -->|"hosts"| node_eyes
node_main -->|"loads"| node_styles
node_assets -.->|"supplies visuals"| node_app
node_cssbuild -->|"processes"| node_styles
node_vite -->|"serves and builds"| node_html
node_vite -->|"bundles"| node_main
node_vite -->|"copies"| node_public
node_vite -->|"emits"| node_dist
node_cssbuild -->|"emits CSS"| node_dist
node_dist -.->|"deployment counterpart"| node_html

click node_html "https://github.com/tharanidharan10/ochi/blob/main/index.html"
click node_main "https://github.com/tharanidharan10/ochi/blob/main/src/main.jsx"
click node_app "https://github.com/tharanidharan10/ochi/blob/main/src/App.jsx"
click node_landing "https://github.com/tharanidharan10/ochi/blob/main/src/components/LandingPage.jsx"
click node_navbar "https://github.com/tharanidharan10/ochi/blob/main/src/components/Navbar.jsx"
click node_eyes "https://github.com/tharanidharan10/ochi/blob/main/src/components/Eyes.jsx"
click node_content "https://github.com/tharanidharan10/ochi/blob/main/src/components/About.jsx"
click node_footer "https://github.com/tharanidharan10/ochi/blob/main/src/components/Footer.jsx"
click node_styles "https://github.com/tharanidharan10/ochi/blob/main/src/index.css"
click node_assets "https://github.com/tharanidharan10/ochi/tree/main/src/assets"
click node_vite "https://github.com/tharanidharan10/ochi/blob/main/vite.config.js"
click node_cssbuild "https://github.com/tharanidharan10/ochi/blob/main/tailwind.config.js"
click node_dist "https://github.com/tharanidharan10/ochi/blob/main/dist/index.html"

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_main,node_app,node_landing,node_navbar,node_eyes,node_content,node_footer,node_styles,node_assets toneBlue
class node_vite,node_cssbuild toneAmber
class node_html,node_public,node_dist toneMint
```

## Components

### React source

Single-page UI composed from reusable sections.

- [React mount](https://github.com/tharanidharan10/ochi/blob/main/src/main.jsx): client entry · `src/main.jsx`
- [App composition](https://github.com/tharanidharan10/ochi/blob/main/src/App.jsx): page shell · Controls the vertical section sequence. · `src/App.jsx`
- [Landing page](https://github.com/tharanidharan10/ochi/blob/main/src/components/LandingPage.jsx): hero section · `src/components/LandingPage.jsx`
- [Navbar](https://github.com/tharanidharan10/ochi/blob/main/src/components/Navbar.jsx): navigation UI · `src/components/Navbar.jsx`
- [Eyes](https://github.com/tharanidharan10/ochi/blob/main/src/components/Eyes.jsx): interactive visual · Local browser-driven visual behavior. · `src/components/Eyes.jsx`
- [Content sections](https://github.com/tharanidharan10/ochi/blob/main/src/components/About.jsx): section components · About, featured, cards, and marquee blocks. · `src/components/About.jsx`
- [Footer](https://github.com/tharanidharan10/ochi/blob/main/src/components/Footer.jsx): page terminus · `src/components/Footer.jsx`
- [Global styles](https://github.com/tharanidharan10/ochi/blob/main/src/index.css): CSS source · `src/index.css`
- [Source assets](https://github.com/tharanidharan10/ochi/tree/main/src/assets): static assets · `src/assets`

### Build pipeline

Vite bundles the browser application and CSS.

- [Vite](https://github.com/tharanidharan10/ochi/blob/main/vite.config.js): dev server and bundler · `vite.config.js`
- [Tailwind / PostCSS](https://github.com/tharanidharan10/ochi/blob/main/tailwind.config.js): CSS processing · `tailwind.config.js`

### Browser delivery

Static entry points and deployable artifacts.

- [HTML entry](https://github.com/tharanidharan10/ochi/blob/main/index.html): browser entry · `index.html`
- **Public resources**: static public files
- [Production output](https://github.com/tharanidharan10/ochi/blob/main/dist/index.html): deployable static site · Fingerprint JavaScript and CSS bundles with an HTML shell. · `dist/index.html`

## Connections

- HTML entry → React mount: loads
- React mount → App composition: mounts
- App composition → Navbar: renders
- App composition → Landing page: renders
- App composition → Content sections: renders
- App composition → Footer: renders
- Landing page → Eyes: hosts
- React mount → Global styles: loads
- Source assets → App composition: supplies visuals
- Tailwind / PostCSS → Global styles: processes
- Vite → HTML entry: serves and builds
- Vite → React mount: bundles
- Vite → Public resources: copies
- Vite → Production output: emits
- Tailwind / PostCSS → Production output: emits CSS
- Production output → HTML entry: deployment counterpart