# vansharmaweb/portfolio-generator architecture

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

- Interactive diagram: https://gitdiagram.com/vansharmaweb/portfolio-generator
- Repository: https://github.com/vansharmaweb/portfolio-generator

## Overview

1. **High-level shape**
   - This is a **frontend-only portfolio generator** built as a **Vite + React** app in `client/`.
   - There is **no backend implementation in the repo**; all portfolio construction, previewing, exporting, and GitHub deployment flows are initiated from the browser.

2. **Entry point and app shell**
   - `client/src/main.jsx` boots the React app.
   - `App.jsx` likely provides the top-level page structure and navigation between the two main screens: **Home** and **Generate**.
   - `index.html` and the Vite config define the static app shell and build/runtime environment.

3. **Primary user flow**
   - The user starts on **Home** and moves into **Generate** to build a portfolio.
   - The Generate screen is the center of the architecture: it orchestrates inputs, template selection, live preview, exports, and deployment.

4. **State orchestration boundary**
   - `client/src/pages/Generate.jsx` is the main orchestration layer.
   - The README explicitly describes “lifted React hooks,” meaning most portfolio state lives above the individual components and is passed downward as props.
   - `client/src/hooks/useLocalStorage.js` persists draft state so user input survives refreshes and session restarts.

5. **Input and content creation subsystem**
   - `Form.jsx` collects core portfolio data such as identity, experience, projects, and social links.
   - `GithubImporter.jsx` adds an external-data path by pulling public GitHub repository data into the portfolio’s projects section.
   - `AiBioGenerator.jsx` is a content-generation helper for the bio/about section, separate from the manual form inputs.

6. **Template/rendering subsystem**
   - `client/src/components/PortfolioTemplates/` contains multiple presentation variants: `Modern`, `Glass`, `Minimal`, `Creative`, and `TerminalTheme`.
   - These templates are presentation-only boundaries: they consume the same portfolio data model but render it with different visual themes and layouts.
   - `TemplateSelector.jsx` switches which template is active.

7. **Live preview path**
   - `Preview.jsx` is the browser-side rendering surface where the current portfolio state is shown immediately as the user edits.
   - The architecture is “edit once, preview continuously”: data flows from the Generate state into the selected template, then into the preview pane.
   - The README notes a desktop side-by-side layout and a mobile tabbed mode, so preview is responsive and central to the UX.

8. **Export subsystem**
   - `client/src/utils/exportPortfolio.js` handles exporting the generated portfolio as a downloadable artifact, likely using `jszip` and `file-saver` as noted in the README.
   - `client/src/utils/markdownExport.js` converts the same portfolio state into Markdown for a GitHub profile README.
   - These are separate output targets from the same source state: one for packaged files, one for markdown content.

9. **GitHub deployment subsystem**
   - `client/src/utils/githubDeploy.js` encapsulates the browser-initiated deployment flow to GitHub Pages.
   - `DeployModal.jsx` is the UI boundary for credentials and deployment progress, including the personal access token input and terminal-style feedback mentioned in the README.
   - This is the main external integration boundary: authenticated GitHub REST API calls for repo creation/push and Pages activation.

10. **Presentation and styling**
   - Styling is driven by **TailwindCSS v4**, with `App.css` and `index.css` providing app-level styling hooks.
   - `lucide-react` likely supplies the iconography used across controls, templates, and the deployment modal.
   - The `public/` directory holds static assets such as the logo used in branding.

11. **Runtime and distribution context**
   - The app is designed to run entirely in the browser in development via Vite and in production as a static frontend.
   - `wrangler.json` suggests there is also deployment/configuration intent for an edge/static hosting target, but the repo itself does not contain a server-side runtime.

12. **Architectural summary for diagramming**
   - Draw the system as a **single-page React client** with one central **Generate orchestration node**.
   - From that node, show four outbound paths: **template rendering**, **live preview**, **export/download**, and **GitHub Pages deployment**.
   - Show three inbound content sources: **manual form input**, **GitHub repo import**, and **AI bio generation**, all feeding the same shared portfolio state.

Main entry points: [`client/src/hooks/useLocalStorage.js`](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/hooks/useLocalStorage.js) (Draft State), [`client/src/components/TemplateSelector.jsx`](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/TemplateSelector.jsx) (Template Picker), [`client/src/pages/Generate.jsx`](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/pages/Generate.jsx) (Generate), [`client/src/App.jsx`](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/App.jsx) (App Shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_repo["Repository"]
  node_repo_root["Repo<br/>static frontend"]
end

subgraph group_app["Client App"]
  node_client_shell["Client App<br/>Vite React"]
  node_app_entry["App Entry<br/>React boot<br/>[main.jsx]"]
  node_app_shell["App Shell<br/>layout router<br/>[App.jsx]"]
  node_home_page["Home<br/>landing page<br/>[Home.jsx]"]
  node_generate_page["Generate<br/>orchestrator<br/>[Generate.jsx]"]
  node_draft_state["Draft State<br/>persisted state<br/>[useLocalStorage.js]"]
end

subgraph group_input["Content Input"]
  node_form_input["Form<br/>manual input<br/>[Form.jsx]"]
  node_github_import["GitHub Import<br/>repo import<br/>[GithubImporter.jsx]"]
  node_ai_bio["AI Bio<br/>content assist<br/>[AiBioGenerator.jsx]"]
end

subgraph group_render["Rendering"]
  node_template_picker["Template Picker<br/>theme switch"]
  node_modern_tpl["Modern<br/>template<br/>[Modern.jsx]"]
  node_glass_tpl["Glass<br/>template<br/>[Glass.jsx]"]
  node_minimal_tpl["Minimal<br/>template<br/>[Minimal.jsx]"]
  node_creative_tpl["Creative<br/>template<br/>[Creative.jsx]"]
  node_terminal_tpl["Terminal<br/>template<br/>[TerminalTheme.jsx]"]
  node_preview["Preview<br/>live render<br/>[Preview.jsx]"]
end

subgraph group_output["Output"]
  node_export_files["Export ZIP<br/>download export<br/>[exportPortfolio.js]"]
  node_export_md["Markdown Export<br/>README export<br/>[markdownExport.js]"]
  node_deploy_modal["Deploy Modal<br/>deploy UI<br/>[DeployModal.jsx]"]
  node_github_deploy["GitHub Deploy<br/>api integration<br/>[githubDeploy.js]"]
end

node_repo_root -->|"contains"| node_client_shell
node_client_shell -->|"boots"| node_app_entry
node_app_entry -->|"renders"| node_app_shell
node_app_shell -->|"shows"| node_home_page
node_app_shell -->|"navigates"| node_generate_page
node_generate_page -->|"owns"| node_draft_state
node_draft_state -->|"feeds"| node_form_input
node_draft_state -->|"feeds"| node_github_import
node_draft_state -->|"feeds"| node_ai_bio
node_draft_state -->|"controls"| node_template_picker
node_template_picker -->|"selects"| node_modern_tpl
node_template_picker -->|"selects"| node_glass_tpl
node_template_picker -->|"selects"| node_minimal_tpl
node_template_picker -->|"selects"| node_creative_tpl
node_template_picker -->|"selects"| node_terminal_tpl
node_generate_page -->|"coordinates"| node_preview
node_draft_state -->|"renders"| node_preview
node_draft_state -->|"exports"| node_export_files
node_draft_state -->|"exports"| node_export_md
node_generate_page -->|"opens"| node_deploy_modal
node_deploy_modal -->|"initiates"| node_github_deploy

click node_app_entry "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/main.jsx"
click node_app_shell "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/App.jsx"
click node_home_page "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/pages/Home.jsx"
click node_generate_page "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/pages/Generate.jsx"
click node_draft_state "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/hooks/useLocalStorage.js"
click node_form_input "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/Form.jsx"
click node_github_import "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/GithubImporter.jsx"
click node_ai_bio "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/AiBioGenerator.jsx"
click node_template_picker "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/TemplateSelector.jsx"
click node_modern_tpl "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Modern.jsx"
click node_glass_tpl "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Glass.jsx"
click node_minimal_tpl "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Minimal.jsx"
click node_creative_tpl "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Creative.jsx"
click node_terminal_tpl "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/TerminalTheme.jsx"
click node_preview "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/Preview.jsx"
click node_export_files "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/utils/exportPortfolio.js"
click node_export_md "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/utils/markdownExport.js"
click node_deploy_modal "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/DeployModal.jsx"
click node_github_deploy "https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/utils/githubDeploy.js"

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_repo_root toneBlue
class node_client_shell,node_app_entry,node_app_shell,node_home_page,node_generate_page,node_draft_state toneAmber
class node_form_input,node_github_import,node_ai_bio toneMint
class node_template_picker,node_modern_tpl,node_glass_tpl,node_minimal_tpl,node_creative_tpl,node_terminal_tpl,node_preview toneRose
class node_export_files,node_export_md,node_deploy_modal,node_github_deploy toneIndigo
```

## Components

### Repository

Top-level static frontend repo

- **Repo**: static frontend · Repository for a browser-only portfolio generator

### Client App

React portfolio generator in client/

- **Client App**: Vite React · Browser-based single-page app shell
- [App Entry](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/main.jsx): React boot · Bootstraps the React application · `client/src/main.jsx`
- [App Shell](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/App.jsx): layout router · Top-level structure for Home and Generate · `client/src/App.jsx`
- [Home](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/pages/Home.jsx): landing page · Starting screen for the generator · `client/src/pages/Home.jsx`
- [Generate](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/pages/Generate.jsx): orchestrator · Main coordination layer for portfolio creation · `client/src/pages/Generate.jsx`
- [Draft State](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/hooks/useLocalStorage.js): persisted state · Lifted portfolio data persisted across refreshes · `client/src/hooks/useLocalStorage.js`

### Content Input

Ways portfolio data enters shared state

- [Form](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/Form.jsx): manual input · Collects identity, experience, projects, and links · `client/src/components/Form.jsx`
- [GitHub Import](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/GithubImporter.jsx): repo import · Imports public repository data into projects · `client/src/components/GithubImporter.jsx`
- [AI Bio](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/AiBioGenerator.jsx): content assist · Generates bio and about text · `client/src/components/AiBioGenerator.jsx`

### Rendering

Template selection and preview surfaces

- [Template Picker](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/TemplateSelector.jsx): theme switch · Selects the active portfolio template · `client/src/components/TemplateSelector.jsx`
- [Modern](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Modern.jsx): template · Modern portfolio presentation variant · `client/src/components/PortfolioTemplates/Modern.jsx`
- [Glass](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Glass.jsx): template · Glassmorphism portfolio presentation variant · `client/src/components/PortfolioTemplates/Glass.jsx`
- [Minimal](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Minimal.jsx): template · Minimal portfolio presentation variant · `client/src/components/PortfolioTemplates/Minimal.jsx`
- [Creative](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/Creative.jsx): template · Creative portfolio presentation variant · `client/src/components/PortfolioTemplates/Creative.jsx`
- [Terminal](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/PortfolioTemplates/TerminalTheme.jsx): template · Terminal-style portfolio presentation variant · `client/src/components/PortfolioTemplates/TerminalTheme.jsx`
- [Preview](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/Preview.jsx): live render · Responsive live preview surface · `client/src/components/Preview.jsx`

### Output

Export and deployment targets

- [Export ZIP](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/utils/exportPortfolio.js): download export · Packages the portfolio as a downloadable artifact · `client/src/utils/exportPortfolio.js`
- [Markdown Export](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/utils/markdownExport.js): README export · Converts portfolio state into Markdown output · `client/src/utils/markdownExport.js`
- [Deploy Modal](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/components/DeployModal.jsx): deploy UI · Credentials and progress UI for deployment · `client/src/components/DeployModal.jsx`
- [GitHub Deploy](https://github.com/vansharmaweb/portfolio-generator/blob/main/client/src/utils/githubDeploy.js): api integration · Browser-initiated GitHub Pages deployment flow · `client/src/utils/githubDeploy.js`

## Connections

- Repo → Client App: contains · Repository contains the browser app
- Client App → App Entry: boots · Vite loads the React entry point
- App Entry → App Shell: renders · Entry mounts the top-level app
- App Shell → Home: shows · Top-level app provides the home screen
- App Shell → Generate: navigates · Top-level app provides the generation screen
- Generate → Draft State: owns · Generate owns the lifted portfolio state
- Draft State → Form: feeds · Shared state is edited through the form
- Draft State → GitHub Import: feeds · Shared state is enriched from GitHub data
- Draft State → AI Bio: feeds · Shared state is augmented with generated bio text
- Draft State → Template Picker: controls · State determines the active template
- Template Picker → Modern: selects · Presentation variant option
- Template Picker → Glass: selects · Presentation variant option
- Template Picker → Minimal: selects · Presentation variant option
- Template Picker → Creative: selects · Presentation variant option
- Template Picker → Terminal: selects · Presentation variant option
- Generate → Preview: coordinates · Generate orchestrates the continuous preview path
- Draft State → Preview: renders · Current portfolio state is shown live
- Draft State → Export ZIP: exports · Same source state is packaged for download
- Draft State → Markdown Export: exports · Same source state is converted to Markdown
- Generate → Deploy Modal: opens · Deployment UI is launched from Generate
- Deploy Modal → GitHub Deploy: initiates · Modal triggers authenticated deployment flow