# bpmforbusiness/cinematicportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/bpmforbusiness/cinematicportfolio
- Repository: https://github.com/bpmforbusiness/cinematicportfolio

## Overview

Cinematic Portfolio is a configurable Next.js portfolio with a cinematic video-and-particle hero, profile and project sections, and contact links. Visitors browse the assembled home page; portfolio content comes from a central config. A separate setup workflow accepts a resume and optional video, extracts and parses resume content, generates the config, and saves the video. Setup is available through a browser endpoint and a documented CLI. The graph reflects sampled source plus README capabilities; CLI internals and several section implementations were not sampled, so their wiring is shown only where supported.

Main entry points: [`app/page.js`](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/page.js) (Home assembler), [`lib/siteConfig.js`](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/lib/siteConfig.js) (Site configuration), [`app/api/setup/route.js`](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/api/setup/route.js) (Setup endpoint), [`scripts/setup.mjs`](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/setup.mjs) (Setup CLI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio experience"]
  node_home["Home assembler<br/>[page.js]"]
  node_navigation["Navigation<br/>[Nav.jsx]"]
  node_hero["Video hero<br/>[VideoIntro.jsx]"]
  node_about["About section<br/>[About.jsx]"]
  node_capabilities["Capabilities marquee<br/>[Capabilities.jsx]"]
  node_work["Work projects<br/>[Work.jsx]"]
  node_contact["Contact section<br/>[Contact.jsx]"]
end

subgraph group_presentation["Visual presentation"]
  node_reveal["Scroll reveals<br/>[Reveal.jsx]"]
  node_particles["Bokeh particles<br/>[CinematicLayer.jsx]"]
  node_speech["Speech synthesis"]
end

subgraph group_setup["Portfolio setup"]
  node_setupui["Browser setup<br/>[page.jsx]"]
  node_setupapi["Setup endpoint<br/>[route.js]"]
  node_cli["Setup CLI<br/>[setup.mjs]"]
  node_extract["Resume extraction<br/>[extractText.mjs]"]
  node_parse["Resume parsing<br/>[parseResume.mjs]"]
  node_generate["Config generation"]
end

subgraph group_content["Content and assets"]
  node_intake["Resume intake"]
  node_config["Site configuration<br/>[siteConfig.js]"]
  node_media["Portfolio media"]
end

node_visitor(("Visitor"))
node_setupuser(("Portfolio creator"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_capabilities
node_home -->|"renders"| node_work
node_home -->|"renders"| node_contact
node_navigation -->|"reads links"| node_config
node_hero -->|"reads content"| node_config
node_hero -->|"renders"| node_particles
node_hero -->|"loads hero media"| node_media
node_hero -.->|"may invoke"| node_speech
node_about -->|"reads content"| node_config
node_capabilities -->|"reads content"| node_config
node_work -->|"reads projects"| node_config
node_contact -->|"reads contact"| node_config
node_about -->|"renders"| node_reveal
node_work -->|"renders"| node_reveal
node_contact -->|"renders"| node_reveal
node_setupuser -->|"uploads files"| node_setupui
node_setupui -->|"posts form"| node_setupapi
node_setupapi -->|"extracts text"| node_extract
node_setupapi -->|"parses text"| node_parse
node_setupapi -->|"builds config"| node_generate
node_setupapi -->|"writes config"| node_config
node_setupapi -->|"writes video"| node_media
node_setupuser -->|"places files"| node_intake
node_intake -->|"provides inputs"| node_cli
node_cli -->|"extracts text"| node_extract
node_cli -->|"parses resume"| node_parse
node_cli -->|"builds config"| node_generate
node_cli -->|"writes config"| node_config
node_cli -->|"may save video"| node_media

click node_home "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/page.js"
click node_navigation "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/Nav/Nav.jsx"
click node_hero "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/VideoIntro/VideoIntro.jsx"
click node_about "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/About.jsx"
click node_capabilities "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/Capabilities.jsx"
click node_work "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/Work.jsx"
click node_contact "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/Contact.jsx"
click node_reveal "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/common/Reveal.jsx"
click node_particles "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/CinematicLayer/CinematicLayer.jsx"
click node_setupui "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/setup/page.jsx"
click node_setupapi "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/api/setup/route.js"
click node_cli "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/setup.mjs"
click node_extract "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/lib/extractText.mjs"
click node_parse "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/lib/parseResume.mjs"
click node_generate "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/lib/generateSiteConfig.mjs"
click node_intake "https://github.com/bpmforbusiness/cinematicportfolio/tree/main/intake"
click node_config "https://github.com/bpmforbusiness/cinematicportfolio/blob/main/lib/siteConfig.js"
click node_media "https://github.com/bpmforbusiness/cinematicportfolio/tree/main/public"

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_home,node_navigation,node_hero,node_about,node_capabilities,node_work,node_contact toneBlue
class node_reveal,node_particles,node_speech toneAmber
class node_setupui,node_setupapi,node_cli,node_extract,node_parse,node_generate toneMint
class node_intake,node_config,node_media toneRose
class node_visitor,node_setupuser toneIndigo
```

## Components

### Portfolio experience

- [Home assembler](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/page.js): `app/page.js`
- [Navigation](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/Nav/Nav.jsx): `components/Nav/Nav.jsx`
- [Video hero](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/VideoIntro/VideoIntro.jsx): `components/VideoIntro/VideoIntro.jsx`
- [About section](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/About.jsx): `components/sections/About.jsx`
- [Capabilities marquee](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/Capabilities.jsx): `components/sections/Capabilities.jsx`
- [Work projects](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/Work.jsx): `components/sections/Work.jsx`
- [Contact section](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/sections/Contact.jsx): `components/sections/Contact.jsx`

### Visual presentation

- [Scroll reveals](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/common/Reveal.jsx): `components/common/Reveal.jsx`
- [Bokeh particles](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/components/CinematicLayer/CinematicLayer.jsx): `components/CinematicLayer/CinematicLayer.jsx`
- **Speech synthesis**

### Portfolio setup

- [Browser setup](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/setup/page.jsx): `app/setup/page.jsx`
- [Setup endpoint](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/app/api/setup/route.js): `app/api/setup/route.js`
- [Setup CLI](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/setup.mjs): `scripts/setup.mjs`
- [Resume extraction](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/lib/extractText.mjs): `scripts/lib/extractText.mjs`
- [Resume parsing](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/lib/parseResume.mjs): `scripts/lib/parseResume.mjs`
- [Config generation](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/scripts/lib/generateSiteConfig.mjs): `scripts/lib/generateSiteConfig.mjs`

### Content and assets

- [Resume intake](https://github.com/bpmforbusiness/cinematicportfolio/tree/main/intake): `intake`
- [Site configuration](https://github.com/bpmforbusiness/cinematicportfolio/blob/main/lib/siteConfig.js): `lib/siteConfig.js`
- [Portfolio media](https://github.com/bpmforbusiness/cinematicportfolio/tree/main/public): `public`

### Other components

- **Visitor**
- **Portfolio creator**

## Connections

- Visitor → Home assembler: opens
- Home assembler → Navigation: renders
- Home assembler → Video hero: renders
- Home assembler → About section: renders
- Home assembler → Capabilities marquee: renders
- Home assembler → Work projects: renders
- Home assembler → Contact section: renders
- Navigation → Site configuration: reads links
- Video hero → Site configuration: reads content
- Video hero → Bokeh particles: renders
- Video hero → Portfolio media: loads hero media
- Video hero → Speech synthesis: may invoke
- About section → Site configuration: reads content
- Capabilities marquee → Site configuration: reads content
- Work projects → Site configuration: reads projects
- Contact section → Site configuration: reads contact
- About section → Scroll reveals: renders
- Work projects → Scroll reveals: renders
- Contact section → Scroll reveals: renders
- Portfolio creator → Browser setup: uploads files
- Browser setup → Setup endpoint: posts form
- Setup endpoint → Resume extraction: extracts text
- Setup endpoint → Resume parsing: parses text
- Setup endpoint → Config generation: builds config
- Setup endpoint → Site configuration: writes config
- Setup endpoint → Portfolio media: writes video
- Portfolio creator → Resume intake: places files
- Resume intake → Setup CLI: provides inputs
- Setup CLI → Resume extraction: extracts text
- Setup CLI → Resume parsing: parses resume
- Setup CLI → Config generation: builds config
- Setup CLI → Site configuration: writes config
- Setup CLI → Portfolio media: may save video