# cjozah/cj-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/cjozah/cj-portfolio
- Repository: https://github.com/cjozah/cj-portfolio

## Overview

CJ’s Portfolio is a Flutter portfolio site for presenting Canaan Ozah’s work and background. A visitor enters the app, reaches the home page, and browses its portfolio sections: hero, app showcase, work, projects, about, experience, services, and contact. The README identifies a central content-data module, shared widgets, and theme wiring. It also documents app-icon and screenshot assets for the recent-app mock-up and gallery. The web runtime nodes reflect the checked-in generated loader and renderer files; application-source relationships are based on README structure, since those Dart sources were not excerpted.

Main entry points: [`lib/home_page.dart`](https://github.com/cjozah/cj-portfolio/blob/main/lib/home_page.dart) (Home page), [`lib/main.dart`](https://github.com/cjozah/cj-portfolio/blob/main/lib/main.dart) (Flutter app), [`lib/data/portfolio_data.dart`](https://github.com/cjozah/cj-portfolio/blob/main/lib/data/portfolio_data.dart) (Portfolio data), [`web copy/flutter.js`](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/flutter.js) (Flutter loader)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio experience"]
  node_app["Flutter app<br/>[main.dart]"]
  node_home["Home page<br/>[home_page.dart]"]
  node_hero["Hero<br/>[hero.dart]"]
  node_showcase["App showcase<br/>[showcase.dart]"]
  node_work["Work<br/>[work.dart]"]
  node_projects["Projects<br/>[projects.dart]"]
  node_about["About<br/>[about.dart]"]
  node_experience["Experience<br/>[experience.dart]"]
  node_services["Services<br/>[services.dart]"]
  node_contact["Contact<br/>[contact.dart]"]
end

subgraph group_content["Portfolio content"]
  node_data["Portfolio data"]
end

subgraph group_ui["Shared UI"]
  node_theme["App theme<br/>[app_theme.dart]"]
  node_widgets["Shared widgets"]
end

subgraph group_runtime["Web runtime"]
  node_bootstrap["Web bootstrap"]
  node_flutterjs["Flutter loader<br/>[flutter.js]"]
  node_canvaskit["CanvasKit renderer<br/>[canvaskit.js]"]
  node_chromium["Chromium renderer<br/>[canvaskit.js]"]
  node_skwasm["Skwasm renderer<br/>[skwasm.js]"]
  node_skwasmheavy["Skwasm heavy<br/>[skwasm_heavy.js]"]
  node_webparagraph["Paragraph renderer<br/>[canvaskit.js]"]
  node_wimp["Wimp renderer<br/>[wimp.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"wires"| node_home
node_home -->|"presents"| node_hero
node_home -->|"presents"| node_showcase
node_home -->|"presents"| node_work
node_home -->|"presents"| node_projects
node_home -->|"presents"| node_about
node_home -->|"presents"| node_experience
node_home -->|"presents"| node_services
node_home -->|"presents"| node_contact
node_data -->|"supplies app content"| node_showcase
node_data -->|"supplies app content"| node_projects
node_app -->|"wires"| node_theme
node_bootstrap -->|"loads"| node_flutterjs
node_flutterjs -->|"selects renderer"| node_canvaskit

click node_app "https://github.com/cjozah/cj-portfolio/blob/main/lib/main.dart"
click node_home "https://github.com/cjozah/cj-portfolio/blob/main/lib/home_page.dart"
click node_hero "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/hero.dart"
click node_showcase "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/showcase.dart"
click node_work "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/work.dart"
click node_projects "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/projects.dart"
click node_about "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/about.dart"
click node_experience "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/experience.dart"
click node_services "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/services.dart"
click node_contact "https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/contact.dart"
click node_data "https://github.com/cjozah/cj-portfolio/blob/main/lib/data/portfolio_data.dart"
click node_theme "https://github.com/cjozah/cj-portfolio/blob/main/lib/theme/app_theme.dart"
click node_widgets "https://github.com/cjozah/cj-portfolio/tree/main/lib/widgets"
click node_bootstrap "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/flutter_bootstrap.js"
click node_flutterjs "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/flutter.js"
click node_canvaskit "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/canvaskit.js"
click node_chromium "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/chromium/canvaskit.js"
click node_skwasm "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/skwasm.js"
click node_skwasmheavy "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/skwasm_heavy.js"
click node_webparagraph "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/webparagraph/canvaskit.js"
click node_wimp "https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/wimp.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_app,node_home,node_hero,node_showcase,node_work,node_projects,node_about,node_experience,node_services,node_contact toneBlue
class node_data toneAmber
class node_theme,node_widgets toneMint
class node_bootstrap,node_flutterjs,node_canvaskit,node_chromium,node_skwasm,node_skwasmheavy,node_webparagraph,node_wimp toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Flutter app](https://github.com/cjozah/cj-portfolio/blob/main/lib/main.dart): `lib/main.dart`
- [Home page](https://github.com/cjozah/cj-portfolio/blob/main/lib/home_page.dart): `lib/home_page.dart`
- [Hero](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/hero.dart): `lib/sections/hero.dart`
- [App showcase](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/showcase.dart): `lib/sections/showcase.dart`
- [Work](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/work.dart): `lib/sections/work.dart`
- [Projects](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/projects.dart): `lib/sections/projects.dart`
- [About](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/about.dart): `lib/sections/about.dart`
- [Experience](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/experience.dart): `lib/sections/experience.dart`
- [Services](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/services.dart): `lib/sections/services.dart`
- [Contact](https://github.com/cjozah/cj-portfolio/blob/main/lib/sections/contact.dart): `lib/sections/contact.dart`

### Portfolio content

- [Portfolio data](https://github.com/cjozah/cj-portfolio/blob/main/lib/data/portfolio_data.dart): `lib/data/portfolio_data.dart`

### Shared UI

- [App theme](https://github.com/cjozah/cj-portfolio/blob/main/lib/theme/app_theme.dart): `lib/theme/app_theme.dart`
- [Shared widgets](https://github.com/cjozah/cj-portfolio/tree/main/lib/widgets): `lib/widgets`

### Web runtime

- [Web bootstrap](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/flutter_bootstrap.js): `web copy/flutter_bootstrap.js`
- [Flutter loader](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/flutter.js): `web copy/flutter.js`
- [CanvasKit renderer](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/canvaskit.js): `web copy/canvaskit/canvaskit.js`
- [Chromium renderer](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/chromium/canvaskit.js): `web copy/canvaskit/chromium/canvaskit.js`
- [Skwasm renderer](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/skwasm.js): `web copy/canvaskit/skwasm.js`
- [Skwasm heavy](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/skwasm_heavy.js): `web copy/canvaskit/skwasm_heavy.js`
- [Paragraph renderer](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/webparagraph/canvaskit.js): `web copy/canvaskit/webparagraph/canvaskit.js`
- [Wimp renderer](https://github.com/cjozah/cj-portfolio/blob/main/web%20copy/canvaskit/wimp.js): `web copy/canvaskit/wimp.js`

### Other components

- **Visitor**

## Connections

- Visitor → Flutter app: opens
- Flutter app → Home page: wires (evidence: `README.md`)
- Home page → Hero: presents (evidence: `README.md`)
- Home page → App showcase: presents (evidence: `README.md`)
- Home page → Work: presents (evidence: `README.md`)
- Home page → Projects: presents (evidence: `README.md`)
- Home page → About: presents (evidence: `README.md`)
- Home page → Experience: presents (evidence: `README.md`)
- Home page → Services: presents (evidence: `README.md`)
- Home page → Contact: presents (evidence: `README.md`)
- Portfolio data → App showcase: supplies app content (evidence: `README.md`)
- Portfolio data → Projects: supplies app content (evidence: `README.md`)
- Flutter app → App theme: wires (evidence: `README.md`)
- Web bootstrap → Flutter loader: loads (evidence: `web copy/flutter_bootstrap.js`)
- Flutter loader → CanvasKit renderer: selects renderer (evidence: `web copy/flutter.js`)