# ducdamchi/art-portfolio-react architecture

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

- Interactive diagram: https://gitdiagram.com/ducdamchi/art-portfolio-react
- Repository: https://github.com/ducdamchi/art-portfolio-react

## Overview

This monorepo contains four portfolio websites—film and photography, celebrations, woodworking, and software—backed by a shared React component package. A visitor enters a site, its router selects a page, and the page presents that site's portfolio content; the film/photo and celebrations trees also expose item-specific routes. Shared components provide navigation, transitions, and gallery experiences. The tree and sampled entry points establish app bootstrapping and shared exports, but do not show route-to-component wiring, so those links are intentionally omitted.

Main entry points: [`packages/shared/src/index.js`](https://github.com/ducdamchi/art-portfolio-react/blob/main/packages/shared/src/index.js) (Shared exports), [`sites/film & photo/src/main.jsx`](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/film%20%26%20photo/src/main.jsx) (Film/photo app), [`sites/celebrations/src/main.jsx`](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/celebrations/src/main.jsx) (Celebrations app), [`sites/woodworking/src/main.jsx`](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/woodworking/src/main.jsx) (Woodworking app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shared["Shared UI"]
  node_shared_exports["Shared exports<br/>[index.js]"]
  node_shared_navigation["Navigation &amp; pages"]
  node_shared_gallery["Gallery experiences"]
  node_shared_hooks["Image &amp; viewport hooks"]
end

subgraph group_filmphoto["Film &amp; Photo"]
  node_film_app["Film/photo app<br/>[main.jsx]"]
  node_film_routes["Film/photo routes"]
  node_film_gallery["Film/photo galleries"]
  node_film_features["Film details"]
end

subgraph group_celebrations["Celebrations"]
  node_celebrations_app["Celebrations app<br/>[main.jsx]"]
  node_celebrations_routes["Celebration routes"]
  node_celebrations_gallery["Celebration galleries"]
end

subgraph group_woodworking["Woodworking"]
  node_woodworking_app["Woodworking app<br/>[main.jsx]"]
  node_woodworking_routes["Woodworking routes"]
  node_woodworking_features["Woodworking galleries"]
end

subgraph group_software["Software"]
  node_software_app["Software app<br/>[main.jsx]"]
  node_software_routes["Software routes"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_film_app
node_visitor -->|"opens"| node_celebrations_app
node_visitor -->|"opens"| node_woodworking_app
node_visitor -->|"opens"| node_software_app
node_film_app -->|"routes via"| node_film_routes
node_celebrations_app -->|"routes via"| node_celebrations_routes
node_woodworking_app -->|"routes via"| node_woodworking_routes
node_software_app -->|"routes via"| node_software_routes
node_film_app -->|"imports transition"| node_shared_exports
node_celebrations_app -->|"imports transition"| node_shared_exports
node_woodworking_app -->|"imports transition"| node_shared_exports
node_software_app -->|"imports transition"| node_shared_exports

click node_shared_exports "https://github.com/ducdamchi/art-portfolio-react/blob/main/packages/shared/src/index.js"
click node_shared_navigation "https://github.com/ducdamchi/art-portfolio-react/tree/main/packages/shared/src/components"
click node_shared_gallery "https://github.com/ducdamchi/art-portfolio-react/tree/main/packages/shared/src/components/gallery"
click node_shared_hooks "https://github.com/ducdamchi/art-portfolio-react/tree/main/packages/shared/src/hooks"
click node_film_app "https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/film%20%26%20photo/src/main.jsx"
click node_film_routes "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/film%20%26%20photo/src/routes"
click node_film_gallery "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/film%20%26%20photo/src/components/gallery"
click node_film_features "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/film%20%26%20photo/src/components/film"
click node_celebrations_app "https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/celebrations/src/main.jsx"
click node_celebrations_routes "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/celebrations/src/routes"
click node_celebrations_gallery "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/celebrations/src/components/gallery"
click node_woodworking_app "https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/woodworking/src/main.jsx"
click node_woodworking_routes "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/woodworking/src/routes"
click node_woodworking_features "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/woodworking/src/components"
click node_software_app "https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/software/src/main.jsx"
click node_software_routes "https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/software/src/routes"

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_shared_exports,node_shared_navigation,node_shared_gallery,node_shared_hooks toneBlue
class node_film_app,node_film_routes,node_film_gallery,node_film_features toneAmber
class node_celebrations_app,node_celebrations_routes,node_celebrations_gallery toneMint
class node_woodworking_app,node_woodworking_routes,node_woodworking_features toneRose
class node_software_app,node_software_routes,node_visitor toneIndigo
```

## Components

### Shared UI

- [Shared exports](https://github.com/ducdamchi/art-portfolio-react/blob/main/packages/shared/src/index.js): `packages/shared/src/index.js`
- [Navigation & pages](https://github.com/ducdamchi/art-portfolio-react/tree/main/packages/shared/src/components): `packages/shared/src/components`
- [Gallery experiences](https://github.com/ducdamchi/art-portfolio-react/tree/main/packages/shared/src/components/gallery): `packages/shared/src/components/gallery`
- [Image & viewport hooks](https://github.com/ducdamchi/art-portfolio-react/tree/main/packages/shared/src/hooks): `packages/shared/src/hooks`

### Film & Photo

- [Film/photo app](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/film%20%26%20photo/src/main.jsx): `sites/film & photo/src/main.jsx`
- [Film/photo routes](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/film%20%26%20photo/src/routes): `sites/film & photo/src/routes`
- [Film/photo galleries](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/film%20%26%20photo/src/components/gallery): `sites/film & photo/src/components/gallery`
- [Film details](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/film%20%26%20photo/src/components/film): `sites/film & photo/src/components/film`

### Celebrations

- [Celebrations app](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/celebrations/src/main.jsx): `sites/celebrations/src/main.jsx`
- [Celebration routes](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/celebrations/src/routes): `sites/celebrations/src/routes`
- [Celebration galleries](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/celebrations/src/components/gallery): `sites/celebrations/src/components/gallery`

### Woodworking

- [Woodworking app](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/woodworking/src/main.jsx): `sites/woodworking/src/main.jsx`
- [Woodworking routes](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/woodworking/src/routes): `sites/woodworking/src/routes`
- [Woodworking galleries](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/woodworking/src/components): `sites/woodworking/src/components`

### Software

- [Software app](https://github.com/ducdamchi/art-portfolio-react/blob/main/sites/software/src/main.jsx): `sites/software/src/main.jsx`
- [Software routes](https://github.com/ducdamchi/art-portfolio-react/tree/main/sites/software/src/routes): `sites/software/src/routes`

### Other components

- **Visitor**

## Connections

- Visitor → Film/photo app: opens
- Visitor → Celebrations app: opens
- Visitor → Woodworking app: opens
- Visitor → Software app: opens
- Film/photo app → Film/photo routes: routes via
- Celebrations app → Celebration routes: routes via
- Woodworking app → Woodworking routes: routes via
- Software app → Software routes: routes via
- Film/photo app → Shared exports: imports transition
- Celebrations app → Shared exports: imports transition
- Woodworking app → Shared exports: imports transition
- Software app → Shared exports: imports transition