vansharmaweb/portfolio-generator

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.