How pman369/ab-peace-portfolio-blog works
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: App.tsx App Shell · articleStore.ts Article Store · audio.ts Sound Effects · ResearchLibrary.tsx Research Library
Components 22
Site Experience
- App Shell
src/App.tsx - Hero
src/components/Hero.tsx - About / Portfolio
src/components/About.tsx - Project Data
src/data/projects.ts - Now Page
src/components/NowPage.tsx - Contact
src/components/Contact.tsx
Publishing
- Research Library
src/components/ResearchLibrary.tsx - Research Papers
src/data/research.ts - Blog Reader
src/components/Blog.tsx - Seed Articles
src/data/posts.ts - Article Store
src/utils/articleStore.ts
Authoring Studio
- Authoring Studio
src/components/AuthoringStudio.tsx - Studio Auth
src/components/StudioAuthModal.tsx - Access Control
src/utils/security.ts
Shared UI and Utilities
- Navigation
src/components/Navbar.tsx - Command Palette
src/components/CommandPalette.tsx - RSS Preview
src/components/RssModal.tsx - Interactive Background
src/components/InteractiveBackground.tsx - Lazy Images
src/components/LazyImage.tsx - Sound Effects
src/utils/audio.ts - Footer
src/components/Footer.tsx
Other components
- Visitor
Connections 29
- Visitor → App Shell: uses
- App Shell → Navigation: renders
src/App.tsx - App Shell → Hero: renders
src/App.tsx - App Shell → About / Portfolio: renders
src/App.tsx - App Shell → Research Library: renders
src/App.tsx - App Shell → Blog Reader: renders
src/App.tsx - App Shell → Contact: renders
src/App.tsx - App Shell → Now Page: renders
src/App.tsx - App Shell → Interactive Background: renders
src/App.tsx - App Shell → RSS Preview: renders
src/App.tsx - App Shell → Authoring Studio: opens
src/App.tsx - App Shell → Studio Auth: opens
src/App.tsx - About / Portfolio → Lazy Images: uses
src/components/About.tsx - Research Library → Research Papers: reads
src/components/ResearchLibrary.tsx - Research Library → Lazy Images: uses
src/components/ResearchLibrary.tsx - Blog Reader → Article Store: loads articles
src/components/Blog.tsx - Blog Reader → Lazy Images: uses
src/components/Blog.tsx - Article Store → Seed Articles: seeds from
src/utils/articleStore.ts - Authoring Studio → Article Store: saves drafts
src/components/AuthoringStudio.tsx - Authoring Studio → Access Control: locks studio
src/components/AuthoringStudio.tsx - Studio Auth → Access Control: verifies key
src/components/StudioAuthModal.tsx - App Shell → Access Control: checks session
src/App.tsx - Hero → Sound Effects: plays sounds
src/components/Hero.tsx - Navigation → Sound Effects: plays sounds
src/components/Navbar.tsx - Blog Reader → Sound Effects: plays sounds
src/components/Blog.tsx - Authoring Studio → Sound Effects: plays sounds
src/components/AuthoringStudio.tsx - Research Library → Sound Effects: plays sounds
src/components/ResearchLibrary.tsx - Command Palette → Article Store: reads articles
src/components/CommandPalette.tsx - RSS Preview → Article Store: reads articles
src/components/RssModal.tsx