mizcausevic-dev/portfolio-command-center

Purpose and principal workflow

Portfolio Command Center is a static React portfolio interface that organizes repository data into executive-facing platform, language, industry, and signal views, with search and filtering to explore repositories. The main workflow begins when a site visitor opens the page; separately, an operator can run the catalog-sync command to fetch GitHub repository metadata and regenerate the catalog consumed by the app.

Components

Application and exploration

• Site visitor — *(external; no repository path)* The person who opens the portfolio and explores its views.

• React mount — src/main.tsx — Mounts the React application at the page’s root element and loads the effect and application styles.

• Portfolio command surface — src/App.tsx — Holds page-level filter and search state, derives sorted and paginated repository results, and renders the portfolio’s command-center views.

• Platform constellation — src/components/PortfolioConstellation.tsx — Renders an interactive SVG of named platforms and curated repository leaves, with keyboard-accessible controls and a dossier panel; its caller is not shown in the sampled excerpts.

• Constellation geometry — src/lib/constellationLayout.ts — Supplies the pure polar-coordinate, label, sizing, truncation, and remainder calculations used by the diagram.

Catalog and portfolio signals

• Portfolio data model and derived signals — src/data.ts — Imports the generated catalog and defines platform groupings and signal rules, deriving portfolio metrics and atlas data for the UI.

• Generated repository catalog — src/generatedRepoCatalog.json — Provides the checked-in repository records consumed by the data module; its contents are not sampled.

• Repository and atlas types — src/types.ts — Defines the TypeScript shapes for repository entries, named platforms, language and industry entries, and metrics.

• Catalog sync command — scripts/sync-repo-catalog.mjs — Uses the GitHub CLI to fetch repository metadata, infers catalog attributes such as platform, vertical, language, and freshness, and writes the generated JSON.

• Catalog operator — *(external; no repository path)* The person or process that runs the catalog sync command.

External handoff

• AI chat destinations — *(external; no repository path)* ChatGPT, Claude, Perplexity, and Gemini, opened as external links with an encoded prompt and page URL.

• Send-to-AI links — src/components/SendToLlm.tsx — Builds those destination URLs and renders the visitor-facing links; it does not read or transmit page content.

Relationships

• Site visitor -> React mount: opens the deployed page; src/main.tsx mounts React at the document’s root element.

• React mount -> Portfolio command surface: renders the App component; src/main.tsx.

• Portfolio command surface -> Portfolio data model and derived signals: imports signal logic and renders views from portfolio data; src/App.tsx and src/data.ts.

• Portfolio data model and derived signals -> Generated repository catalog: reads the imported catalog to derive portfolio data; src/data.ts.

• Portfolio command surface -> Constellation geometry: the diagram’s geometry helpers are used by its rendering component; src/components/PortfolioConstellation.tsx imports the helpers from src/lib/constellationLayout.ts.

• Portfolio command surface -> Platform constellation: the README describes named-platform views as part of the command surface, but the sampled excerpts do not establish the component’s caller or runtime wiring.

• Catalog operator -> Catalog sync command: runs the catalog-generation command; package.json defines sync:catalog as the script invoking scripts/sync-repo-catalog.mjs.

• Catalog sync command -> GitHub CLI: invokes gh repo list to obtain repository data; scripts/sync-repo-catalog.mjs.

• Catalog sync command -> Generated repository catalog: writes the generated catalog file; scripts/sync-repo-catalog.mjs.

• Send-to-AI links -> AI chat destinations: opens a new tab with a URL-encoded prompt and page URL; src/components/SendToLlm.tsx.

Coverage limits

The App and data excerpts are partial, and the generated catalog’s contents are not included. The precise composition and caller wiring for the constellation, other views, and the deployment path cannot be established from the sampled inputs. The README describes the intended exploration flow; the excerpts do not establish every component connection.