# pman369/ab-peace-portfolio-blog architecture

> Architecture diagram of the GitHub repository pman369/ab-peace-portfolio-blog, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pman369/ab-peace-portfolio-blog
- Repository: https://github.com/pman369/ab-peace-portfolio-blog

## Overview

AB Peace is a personal portfolio and research publishing site, with an in-browser authoring studio for custom blog posts. Visitors browse portfolio, research, essays, and the “Now” page; the studio authenticates authors, saves drafts and articles locally, and exposes them through the blog. The graph reflects documented component references and sampled calls; some page wiring and project presentation are unsampled, so those relationships are omitted where not established.

Main entry points: [`src/App.tsx`](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/App.tsx) (App Shell), [`src/utils/articleStore.ts`](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/articleStore.ts) (Article Store), [`src/utils/audio.ts`](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/audio.ts) (Sound Effects), [`src/components/ResearchLibrary.tsx`](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/ResearchLibrary.tsx) (Research Library)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site Experience"]
  node_app["App Shell<br/>[App.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About / Portfolio<br/>[About.tsx]"]
  node_projects["Project Data<br/>[projects.ts]"]
  node_now["Now Page<br/>[NowPage.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
end

subgraph group_publishing["Publishing"]
  node_research["Research Library"]
  node_researchdata["Research Papers<br/>[research.ts]"]
  node_blog["Blog Reader<br/>[Blog.tsx]"]
  node_posts["Seed Articles<br/>[posts.ts]"]
  node_articledata[("Article Store<br/>[articleStore.ts]")]
end

subgraph group_studio["Authoring Studio"]
  node_studio["Authoring Studio"]
  node_authmodal["Studio Auth"]
  node_security["Access Control<br/>[security.ts]"]
end

subgraph group_shared["Shared UI and Utilities"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_palette["Command Palette<br/>[CommandPalette.tsx]"]
  node_rss["RSS Preview<br/>[RssModal.tsx]"]
  node_background["Interactive Background"]
  node_image["Lazy Images<br/>[LazyImage.tsx]"]
  node_audio["Sound Effects<br/>[audio.ts]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"uses"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_research
node_app -->|"renders"| node_blog
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_now
node_app -->|"renders"| node_background
node_app -->|"renders"| node_rss
node_app -->|"opens"| node_studio
node_app -->|"opens"| node_authmodal
node_about -->|"uses"| node_image
node_research -->|"reads"| node_researchdata
node_research -->|"uses"| node_image
node_blog -->|"loads articles"| node_articledata
node_blog -->|"uses"| node_image
node_articledata -->|"seeds from"| node_posts
node_studio -->|"saves drafts"| node_articledata
node_studio -->|"locks studio"| node_security
node_authmodal -->|"verifies key"| node_security
node_app -->|"checks session"| node_security
node_hero -->|"plays sounds"| node_audio
node_navbar -->|"plays sounds"| node_audio
node_blog -->|"plays sounds"| node_audio
node_studio -->|"plays sounds"| node_audio
node_research -->|"plays sounds"| node_audio
node_palette -->|"reads articles"| node_articledata
node_rss -->|"reads articles"| node_articledata

click node_app "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/App.tsx"
click node_hero "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/About.tsx"
click node_projects "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/data/projects.ts"
click node_now "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/NowPage.tsx"
click node_contact "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Contact.tsx"
click node_research "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/ResearchLibrary.tsx"
click node_researchdata "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/data/research.ts"
click node_blog "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Blog.tsx"
click node_posts "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/data/posts.ts"
click node_articledata "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/articleStore.ts"
click node_studio "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/AuthoringStudio.tsx"
click node_authmodal "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/StudioAuthModal.tsx"
click node_security "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/security.ts"
click node_navbar "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Navbar.tsx"
click node_palette "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/CommandPalette.tsx"
click node_rss "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/RssModal.tsx"
click node_background "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/InteractiveBackground.tsx"
click node_image "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/LazyImage.tsx"
click node_audio "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/audio.ts"
click node_footer "https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Footer.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_hero,node_about,node_projects,node_now,node_contact toneBlue
class node_research,node_researchdata,node_blog,node_posts,node_articledata toneAmber
class node_studio,node_authmodal,node_security toneMint
class node_navbar,node_palette,node_rss,node_background,node_image,node_audio,node_footer toneRose
class node_visitor toneIndigo
```

## Components

### Site Experience

- [App Shell](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/App.tsx): `src/App.tsx`
- [Hero](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [About / Portfolio](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Project Data](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Now Page](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/NowPage.tsx): `src/components/NowPage.tsx`
- [Contact](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`

### Publishing

- [Research Library](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/ResearchLibrary.tsx): `src/components/ResearchLibrary.tsx`
- [Research Papers](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/data/research.ts): `src/data/research.ts`
- [Blog Reader](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Blog.tsx): `src/components/Blog.tsx`
- [Seed Articles](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/data/posts.ts): `src/data/posts.ts`
- [Article Store](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/articleStore.ts): `src/utils/articleStore.ts`

### Authoring Studio

- [Authoring Studio](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/AuthoringStudio.tsx): `src/components/AuthoringStudio.tsx`
- [Studio Auth](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/StudioAuthModal.tsx): `src/components/StudioAuthModal.tsx`
- [Access Control](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/security.ts): `src/utils/security.ts`

### Shared UI and Utilities

- [Navigation](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Command Palette](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/CommandPalette.tsx): `src/components/CommandPalette.tsx`
- [RSS Preview](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/RssModal.tsx): `src/components/RssModal.tsx`
- [Interactive Background](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/InteractiveBackground.tsx): `src/components/InteractiveBackground.tsx`
- [Lazy Images](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/LazyImage.tsx): `src/components/LazyImage.tsx`
- [Sound Effects](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/utils/audio.ts): `src/utils/audio.ts`
- [Footer](https://github.com/pman369/ab-peace-portfolio-blog/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → App Shell: uses
- App Shell → Navigation: renders (evidence: `src/App.tsx`)
- App Shell → Hero: renders (evidence: `src/App.tsx`)
- App Shell → About / Portfolio: renders (evidence: `src/App.tsx`)
- App Shell → Research Library: renders (evidence: `src/App.tsx`)
- App Shell → Blog Reader: renders (evidence: `src/App.tsx`)
- App Shell → Contact: renders (evidence: `src/App.tsx`)
- App Shell → Now Page: renders (evidence: `src/App.tsx`)
- App Shell → Interactive Background: renders (evidence: `src/App.tsx`)
- App Shell → RSS Preview: renders (evidence: `src/App.tsx`)
- App Shell → Authoring Studio: opens (evidence: `src/App.tsx`)
- App Shell → Studio Auth: opens (evidence: `src/App.tsx`)
- About / Portfolio → Lazy Images: uses (evidence: `src/components/About.tsx`)
- Research Library → Research Papers: reads (evidence: `src/components/ResearchLibrary.tsx`)
- Research Library → Lazy Images: uses (evidence: `src/components/ResearchLibrary.tsx`)
- Blog Reader → Article Store: loads articles (evidence: `src/components/Blog.tsx`)
- Blog Reader → Lazy Images: uses (evidence: `src/components/Blog.tsx`)
- Article Store → Seed Articles: seeds from (evidence: `src/utils/articleStore.ts`)
- Authoring Studio → Article Store: saves drafts (evidence: `src/components/AuthoringStudio.tsx`)
- Authoring Studio → Access Control: locks studio (evidence: `src/components/AuthoringStudio.tsx`)
- Studio Auth → Access Control: verifies key (evidence: `src/components/StudioAuthModal.tsx`)
- App Shell → Access Control: checks session (evidence: `src/App.tsx`)
- Hero → Sound Effects: plays sounds (evidence: `src/components/Hero.tsx`)
- Navigation → Sound Effects: plays sounds (evidence: `src/components/Navbar.tsx`)
- Blog Reader → Sound Effects: plays sounds (evidence: `src/components/Blog.tsx`)
- Authoring Studio → Sound Effects: plays sounds (evidence: `src/components/AuthoringStudio.tsx`)
- Research Library → Sound Effects: plays sounds (evidence: `src/components/ResearchLibrary.tsx`)
- Command Palette → Article Store: reads articles (evidence: `src/components/CommandPalette.tsx`)
- RSS Preview → Article Store: reads articles (evidence: `src/components/RssModal.tsx`)