# naruzuma56/symmetrical-funicular architecture

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

- Interactive diagram: https://gitdiagram.com/naruzuma56/symmetrical-funicular
- Repository: https://github.com/naruzuma56/symmetrical-funicular

## Overview

This is a React manga-styled personal portfolio. A visitor enters the composed portfolio, browses its profile and career chapters, and can open a project as a page-by-page reader. The graph preserves the documented experience, skills, certifications, contact, navigation, sound, and reading-direction capabilities. The README and excerpts support the composition and sampled interactions; wiring inside unsampled section implementations is not expanded beyond documented data associations.

Main entry points: [`src/App.tsx`](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/App.tsx) (Portfolio composition), [`src/components/common/MangaNav.tsx`](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/MangaNav.tsx) (Chapter navigation), [`src/hooks/useAudio.tsx`](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/hooks/useAudio.tsx) (Sound effects), [`src/components/modal/MangaChapterReaderModal.tsx`](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/modal/MangaChapterReaderModal.tsx) (Chapter reader modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio chapters"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Portfolio composition<br/>[App.tsx]"]
  node_hero["Cover / hero<br/>[Hero.tsx]"]
  node_about["About chapter<br/>[About.tsx]"]
  node_experience["Battle record<br/>[Experience.tsx]"]
  node_projects["Works chapter<br/>[Projects.tsx]"]
  node_skills["Techniques chapter<br/>[Skills.tsx]"]
  node_certifications["Titles chapter<br/>[Certifications.tsx]"]
  node_contact["Transmission chapter<br/>[Contact.tsx]"]
  node_navigation["Chapter navigation<br/>[MangaNav.tsx]"]
  node_footer["Portfolio footer<br/>[Footer.tsx]"]
end

subgraph group_reader["Project reader"]
  node_reader["Chapter reader modal"]
end

subgraph group_interaction["Shared interactions"]
  node_audio["Sound effects<br/>[useAudio.tsx]"]
  node_direction["Reading direction"]
  node_cursor["Ink cursor<br/>[InkCursor.tsx]"]
end

subgraph group_content["Typed content"]
  node_profiledata["Profile and chapters<br/>[profile.ts]"]
  node_projectdata["Project volumes<br/>[projects.ts]"]
  node_experiencedata["Experience records<br/>[experience.ts]"]
  node_skilldata["Skill gauges<br/>[skills.ts]"]
  node_certdata["Ranked titles<br/>[certifications.ts]"]
end

subgraph group_presentation["Manga presentation"]
  node_primitives["Manga UI primitives"]
  node_theme["Manga theme<br/>[custom-manga.css]"]
end

node_visitor(("Visitor"))
node_browser["Browser APIs"]

node_visitor -->|"opens"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"composes"| node_hero
node_app -->|"composes"| node_about
node_app -->|"composes"| node_experience
node_app -->|"composes"| node_projects
node_app -->|"composes"| node_skills
node_app -->|"composes"| node_certifications
node_app -->|"composes"| node_contact
node_app -->|"composes"| node_navigation
node_app -->|"composes"| node_footer
node_app -->|"passes selection"| node_reader
node_projects -->|"selects project"| node_app
node_hero -->|"reads"| node_profiledata
node_navigation -->|"reads"| node_profiledata
node_projects -->|"reads"| node_projectdata
node_experience -->|"reads"| node_experiencedata
node_skills -->|"reads"| node_skilldata
node_certifications -->|"reads"| node_certdata
node_navigation -->|"plays effects"| node_audio
node_reader -->|"plays effects"| node_audio
node_app -->|"provides context"| node_audio
node_app -->|"provides context"| node_direction
node_navigation -->|"toggles order"| node_direction
node_reader -->|"reads order"| node_direction
node_app -->|"renders"| node_cursor
node_hero -->|"uses"| node_primitives
node_navigation -->|"uses"| node_primitives
node_reader -->|"uses"| node_primitives
node_entry -->|"loads"| node_theme
node_audio -->|"uses Web Audio"| node_browser
node_direction -->|"stores preference"| node_browser
node_audio -->|"stores mute state"| node_browser

click node_entry "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/main.tsx"
click node_app "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/App.tsx"
click node_hero "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Hero.tsx"
click node_about "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/About.tsx"
click node_experience "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Experience.tsx"
click node_projects "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Projects.tsx"
click node_skills "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Skills.tsx"
click node_certifications "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Certifications.tsx"
click node_contact "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Contact.tsx"
click node_navigation "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/MangaNav.tsx"
click node_footer "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/Footer.tsx"
click node_reader "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/modal/MangaChapterReaderModal.tsx"
click node_profiledata "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/profile.ts"
click node_projectdata "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/projects.ts"
click node_experiencedata "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/experience.ts"
click node_skilldata "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/skills.ts"
click node_certdata "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/certifications.ts"
click node_audio "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/hooks/useAudio.tsx"
click node_direction "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/hooks/useReadingDirection.tsx"
click node_cursor "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/InkCursor.tsx"
click node_primitives "https://github.com/naruzuma56/symmetrical-funicular/tree/main/src/components/common"
click node_theme "https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/styles/custom-manga.css"

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_app,node_hero,node_about,node_experience,node_projects,node_skills,node_certifications,node_contact,node_navigation,node_footer,node_browser toneBlue
class node_reader toneAmber
class node_audio,node_direction,node_cursor toneMint
class node_profiledata,node_projectdata,node_experiencedata,node_skilldata,node_certdata toneRose
class node_primitives,node_theme,node_visitor toneIndigo
```

## Components

### Portfolio chapters

- [React entry](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/main.tsx): `src/main.tsx`
- [Portfolio composition](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/App.tsx): `src/App.tsx`
- [Cover / hero](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Hero.tsx): `src/components/sections/Hero.tsx`
- [About chapter](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/About.tsx): `src/components/sections/About.tsx`
- [Battle record](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Experience.tsx): `src/components/sections/Experience.tsx`
- [Works chapter](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Projects.tsx): `src/components/sections/Projects.tsx`
- [Techniques chapter](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Skills.tsx): `src/components/sections/Skills.tsx`
- [Titles chapter](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Certifications.tsx): `src/components/sections/Certifications.tsx`
- [Transmission chapter](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/sections/Contact.tsx): `src/components/sections/Contact.tsx`
- [Chapter navigation](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/MangaNav.tsx): `src/components/common/MangaNav.tsx`
- [Portfolio footer](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/Footer.tsx): `src/components/common/Footer.tsx`

### Project reader

- [Chapter reader modal](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/modal/MangaChapterReaderModal.tsx): `src/components/modal/MangaChapterReaderModal.tsx`

### Shared interactions

- [Sound effects](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/hooks/useAudio.tsx): `src/hooks/useAudio.tsx`
- [Reading direction](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/hooks/useReadingDirection.tsx): `src/hooks/useReadingDirection.tsx`
- [Ink cursor](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/components/common/InkCursor.tsx): `src/components/common/InkCursor.tsx`

### Typed content

- [Profile and chapters](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/profile.ts): `src/data/profile.ts`
- [Project volumes](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Experience records](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/experience.ts): `src/data/experience.ts`
- [Skill gauges](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/skills.ts): `src/data/skills.ts`
- [Ranked titles](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/data/certifications.ts): `src/data/certifications.ts`

### Manga presentation

- [Manga UI primitives](https://github.com/naruzuma56/symmetrical-funicular/tree/main/src/components/common): `src/components/common`
- [Manga theme](https://github.com/naruzuma56/symmetrical-funicular/blob/main/src/styles/custom-manga.css): `src/styles/custom-manga.css`

### Other components

- **Visitor**
- **Browser APIs**

## Connections

- Visitor → React entry: opens
- React entry → Portfolio composition: renders
- Portfolio composition → Cover / hero: composes
- Portfolio composition → About chapter: composes
- Portfolio composition → Battle record: composes
- Portfolio composition → Works chapter: composes
- Portfolio composition → Techniques chapter: composes
- Portfolio composition → Titles chapter: composes
- Portfolio composition → Transmission chapter: composes
- Portfolio composition → Chapter navigation: composes
- Portfolio composition → Portfolio footer: composes
- Portfolio composition → Chapter reader modal: passes selection
- Works chapter → Portfolio composition: selects project
- Cover / hero → Profile and chapters: reads
- Chapter navigation → Profile and chapters: reads
- Works chapter → Project volumes: reads
- Battle record → Experience records: reads
- Techniques chapter → Skill gauges: reads
- Titles chapter → Ranked titles: reads
- Chapter navigation → Sound effects: plays effects
- Chapter reader modal → Sound effects: plays effects
- Portfolio composition → Sound effects: provides context
- Portfolio composition → Reading direction: provides context
- Chapter navigation → Reading direction: toggles order
- Chapter reader modal → Reading direction: reads order
- Portfolio composition → Ink cursor: renders
- Cover / hero → Manga UI primitives: uses
- Chapter navigation → Manga UI primitives: uses
- Chapter reader modal → Manga UI primitives: uses
- React entry → Manga theme: loads
- Sound effects → Browser APIs: uses Web Audio
- Reading direction → Browser APIs: stores preference
- Sound effects → Browser APIs: stores mute state