# adityavhlvy/kura-ninja-client architecture

> Architecture diagram of the GitHub repository adityavhlvy/kura-ninja-client, 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/adityavhlvy/kura-ninja-client
- Repository: https://github.com/adityavhlvy/kura-ninja-client

## Overview

Kura Ninja Client is a client-rendered personal portfolio. Visitors enter through routed pages, discover featured and complete project listings, and open case studies; they can also browse writing, profile and career information, contact details, and a brand guide. The home page combines an interactive Indonesia map with project, journey, and philosophy sections. Portfolio content is exposed to views through a typed accessor module. Route wiring and several key components are sampled; other page-level links to data are documented but not verified in source excerpts.

Main entry points: [`src/App.tsx`](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/App.tsx) (Routes and transitions), [`src/data/portfolio.ts`](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/data/portfolio.ts) (Typed content access), [`src/pages/Home.tsx`](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Home.tsx) (Home page), [`src/layout/Header.tsx`](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/layout/Header.tsx) (Navigation header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_app["Routes and transitions<br/>[App.tsx]"]
  node_header["Navigation header<br/>[Header.tsx]"]
  node_command["Command menu<br/>[CommandMenu.tsx]"]
  node_footer["Site footer<br/>[Footer.tsx]"]
end

subgraph group_projects["Project discovery"]
  node_home["Home page<br/>[Home.tsx]"]
  node_map["Interactive map<br/>[ArchipelagoMap.tsx]"]
  node_flagships["Featured projects<br/>[Flagships.tsx]"]
  node_work["Project listing<br/>[Work.tsx]"]
  node_case["Case studies<br/>[CaseStudy.tsx]"]
  node_homework["Home work index<br/>[WorkIndex.tsx]"]
end

subgraph group_content["Profile and editorial"]
  node_blog["Post listing<br/>[Blog.tsx]"]
  node_post["Post detail<br/>[Post.tsx]"]
  node_about["Profile and journey<br/>[About.tsx]"]
  node_credentials["Certifications<br/>[Credentials.tsx]"]
  node_contact["Contact page<br/>[Contact.tsx]"]
  node_brand["Brand guide<br/>[Brand.tsx]"]
  node_homejourney["Home journey section<br/>[Journey.tsx]"]
  node_philosophy["Home philosophy<br/>[Philosophy.tsx]"]
end

subgraph group_contentdata["Portfolio content"]
  node_portfolio["Typed content access<br/>[portfolio.ts]"]
end

node_visitor(("Portfolio visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders navigation"| node_header
node_app -->|"renders footer"| node_footer
node_app -->|"routes home"| node_home
node_app -->|"routes projects"| node_work
node_app -->|"routes case study"| node_case
node_app -->|"routes blog"| node_blog
node_app -->|"routes post"| node_post
node_app -->|"routes profile"| node_about
node_app -->|"routes credentials"| node_credentials
node_app -->|"routes contact"| node_contact
node_app -->|"routes brand"| node_brand
node_header -->|"opens menu"| node_command
node_home -->|"renders map"| node_map
node_home -->|"renders projects"| node_flagships
node_home -->|"renders journey"| node_homejourney
node_home -->|"renders work index"| node_homework
node_home -->|"renders philosophy"| node_philosophy
node_flagships -->|"reads featured projects"| node_portfolio
node_case -->|"reads project details"| node_portfolio
node_command -->|"searches projects and posts"| node_portfolio
node_work -.->|"reads projects"| node_portfolio
node_blog -.->|"reads posts"| node_portfolio
node_post -.->|"reads post content"| node_portfolio
node_about -.->|"reads profile and journey"| node_portfolio
node_credentials -.->|"reads certifications"| node_portfolio
node_contact -.->|"reads contact details"| node_portfolio
node_map -->|"reads map data"| node_portfolio

click node_app "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/App.tsx"
click node_header "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/layout/Header.tsx"
click node_command "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/components/CommandMenu.tsx"
click node_footer "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/layout/Footer.tsx"
click node_home "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Home.tsx"
click node_map "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/components/ArchipelagoMap.tsx"
click node_flagships "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/Flagships.tsx"
click node_work "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Work.tsx"
click node_case "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/CaseStudy.tsx"
click node_blog "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Blog.tsx"
click node_post "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Post.tsx"
click node_about "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/About.tsx"
click node_credentials "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Credentials.tsx"
click node_contact "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Contact.tsx"
click node_brand "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Brand.tsx"
click node_portfolio "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/data/portfolio.ts"
click node_homejourney "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/Journey.tsx"
click node_homework "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/WorkIndex.tsx"
click node_philosophy "https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/Philosophy.tsx"

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_app,node_header,node_command,node_footer toneBlue
class node_home,node_map,node_flagships,node_work,node_case,node_homework toneAmber
class node_blog,node_post,node_about,node_credentials,node_contact,node_brand,node_homejourney,node_philosophy toneMint
class node_portfolio toneRose
class node_visitor toneIndigo
```

## Components

### App shell

- [Routes and transitions](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/App.tsx): `src/App.tsx`
- [Navigation header](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/layout/Header.tsx): `src/layout/Header.tsx`
- [Command menu](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/components/CommandMenu.tsx): `src/components/CommandMenu.tsx`
- [Site footer](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/layout/Footer.tsx): `src/layout/Footer.tsx`

### Project discovery

- [Home page](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Interactive map](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/components/ArchipelagoMap.tsx): `src/components/ArchipelagoMap.tsx`
- [Featured projects](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/Flagships.tsx): `src/pages/home/Flagships.tsx`
- [Project listing](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Work.tsx): `src/pages/Work.tsx`
- [Case studies](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/CaseStudy.tsx): `src/pages/CaseStudy.tsx`
- [Home work index](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/WorkIndex.tsx): `src/pages/home/WorkIndex.tsx`

### Profile and editorial

- [Post listing](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Blog.tsx): `src/pages/Blog.tsx`
- [Post detail](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Post.tsx): `src/pages/Post.tsx`
- [Profile and journey](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/About.tsx): `src/pages/About.tsx`
- [Certifications](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Credentials.tsx): `src/pages/Credentials.tsx`
- [Contact page](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Contact.tsx): `src/pages/Contact.tsx`
- [Brand guide](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/Brand.tsx): `src/pages/Brand.tsx`
- [Home journey section](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/Journey.tsx): `src/pages/home/Journey.tsx`
- [Home philosophy](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/pages/home/Philosophy.tsx): `src/pages/home/Philosophy.tsx`

### Portfolio content

- [Typed content access](https://github.com/adityavhlvy/kura-ninja-client/blob/dev/src/data/portfolio.ts): `src/data/portfolio.ts`

### Other components

- **Portfolio visitor**

## Connections

- Portfolio visitor → Routes and transitions: opens site
- Routes and transitions → Navigation header: renders navigation
- Routes and transitions → Site footer: renders footer
- Routes and transitions → Home page: routes home
- Routes and transitions → Project listing: routes projects
- Routes and transitions → Case studies: routes case study
- Routes and transitions → Post listing: routes blog
- Routes and transitions → Post detail: routes post
- Routes and transitions → Profile and journey: routes profile
- Routes and transitions → Certifications: routes credentials
- Routes and transitions → Contact page: routes contact
- Routes and transitions → Brand guide: routes brand
- Navigation header → Command menu: opens menu
- Home page → Interactive map: renders map
- Home page → Featured projects: renders projects
- Home page → Home journey section: renders journey
- Home page → Home work index: renders work index
- Home page → Home philosophy: renders philosophy
- Featured projects → Typed content access: reads featured projects
- Case studies → Typed content access: reads project details
- Command menu → Typed content access: searches projects and posts
- Project listing → Typed content access: reads projects
- Post listing → Typed content access: reads posts
- Post detail → Typed content access: reads post content
- Profile and journey → Typed content access: reads profile and journey
- Certifications → Typed content access: reads certifications
- Contact page → Typed content access: reads contact details
- Interactive map → Typed content access: reads map data