How naruzuma56/symmetrical-funicular works
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: App.tsx Portfolio composition · MangaNav.tsx Chapter navigation · useAudio.tsx Sound effects · MangaChapterReaderModal.tsx Chapter reader modal
Components 24
Portfolio chapters
- React entry
src/main.tsx - Portfolio composition
src/App.tsx - Cover / hero
src/components/sections/Hero.tsx - About chapter
src/components/sections/About.tsx - Battle record
src/components/sections/Experience.tsx - Works chapter
src/components/sections/Projects.tsx - Techniques chapter
src/components/sections/Skills.tsx - Titles chapter
src/components/sections/Certifications.tsx - Transmission chapter
src/components/sections/Contact.tsx - Chapter navigation
src/components/common/MangaNav.tsx - Portfolio footer
src/components/common/Footer.tsx
Project reader
- Chapter reader modal
src/components/modal/MangaChapterReaderModal.tsx
Shared interactions
- Sound effects
src/hooks/useAudio.tsx - Reading direction
src/hooks/useReadingDirection.tsx - Ink cursor
src/components/common/InkCursor.tsx
Typed content
- Profile and chapters
src/data/profile.ts - Project volumes
src/data/projects.ts - Experience records
src/data/experience.ts - Skill gauges
src/data/skills.ts - Ranked titles
src/data/certifications.ts
Manga presentation
- Manga UI primitives
src/components/common - Manga theme
src/styles/custom-manga.css
Other components
- Visitor
- Browser APIs
Connections 33
- 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