How bpmforbusiness/cinematicportfolio works
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: page.js Home assembler · siteConfig.js Site configuration · route.js Setup endpoint · setup.mjs Setup CLI
Components 21
Portfolio experience
- Home assembler
app/page.js - Navigation
components/Nav/Nav.jsx - Video hero
components/VideoIntro/VideoIntro.jsx - About section
components/sections/About.jsx - Capabilities marquee
components/sections/Capabilities.jsx - Work projects
components/sections/Work.jsx - Contact section
components/sections/Contact.jsx
Visual presentation
- Scroll reveals
components/common/Reveal.jsx - Bokeh particles
components/CinematicLayer/CinematicLayer.jsx - Speech synthesis
Portfolio setup
- Browser setup
app/setup/page.jsx - Setup endpoint
app/api/setup/route.js - Setup CLI
scripts/setup.mjs - Resume extraction
scripts/lib/extractText.mjs - Resume parsing
scripts/lib/parseResume.mjs - Config generation
scripts/lib/generateSiteConfig.mjs
Content and assets
- Resume intake
intake - Site configuration
lib/siteConfig.js - Portfolio media
public
Other components
- Visitor
- Portfolio creator
Connections 33
- 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