# bachvo/azure-portfolio-react architecture

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

- Interactive diagram: https://gitdiagram.com/bachvo/azure-portfolio-react
- Repository: https://github.com/bachvo/azure-portfolio-react

## Overview

This is a React portfolio site presenting Bach Vo’s profile, skills, work experience, projects, contact links, and project media. A visitor loads the app; the app fetches its portfolio model, renders the home sections, and routes work or project selections to detail pages with galleries. The sampled code shows the API request and component handoffs; the API implementation and several component files were not sampled, so their internal behavior and some wiring are represented only where supported by the tree or excerpts.

Main entry points: [`src/App.tsx`](https://github.com/bachvo/azure-portfolio-react/blob/master/src/App.tsx) (App), [`src/components/card-detail.tsx`](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/card-detail.tsx) (Card details), [`src/components/home.tsx`](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/home.tsx) (Home page), [`src/components/nav.tsx`](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/nav.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and routing"]
  node_app["App<br/>[App.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home page<br/>[home.tsx]"]
  node_nav["Navigation<br/>[nav.tsx]"]
  node_cards["Card collections"]
  node_footer["Footer<br/>[footer.tsx]"]
  node_model["Portfolio model<br/>[model.tsx]"]
  node_markup["Markup utility<br/>[create-markup.tsx]"]
  node_resume["Resume PDF<br/>[bachvo.resume.pdf]"]
end

subgraph group_details["Details and media"]
  node_detail["Card details<br/>[card-detail.tsx]"]
  node_gallery["Media gallery<br/>[gallery.tsx]"]
  node_publicmedia["Portfolio assets"]
  node_links["Anchor utilities<br/>[hash-link-url.tsx]"]
  node_mediautil["Media utilities<br/>[is-media-video.tsx]"]
end

subgraph group_integrations["External integrations"]
  node_api["Portfolio API"]
  node_analytics["Google Analytics"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"fetches model"| node_api
node_api -->|"returns model"| node_app
node_app -->|"renders route"| node_home
node_app -->|"routes detail"| node_detail
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_footer
node_app -->|"reports errors"| node_analytics
node_home -->|"renders collections"| node_cards
node_home -->|"formats descriptions"| node_markup
node_home -->|"tracks pageview"| node_analytics
node_nav -->|"builds anchors"| node_links
node_nav -->|"links resume"| node_resume
node_nav -->|"tracks outbound"| node_analytics
node_detail -->|"renders gallery"| node_gallery
node_detail -->|"builds anchors"| node_links
node_detail -->|"checks media"| node_mediautil
node_detail -->|"tracks pageview"| node_analytics
node_gallery -->|"loads images"| node_publicmedia
node_gallery -->|"tracks interactions"| node_analytics

click node_app "https://github.com/bachvo/azure-portfolio-react/blob/master/src/App.tsx"
click node_home "https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/home.tsx"
click node_nav "https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/nav.tsx"
click node_cards "https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/card-collection.tsx"
click node_footer "https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/footer.tsx"
click node_model "https://github.com/bachvo/azure-portfolio-react/blob/master/src/data/model.tsx"
click node_detail "https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/card-detail.tsx"
click node_gallery "https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/gallery.tsx"
click node_publicmedia "https://github.com/bachvo/azure-portfolio-react/tree/master/public/gallery"
click node_markup "https://github.com/bachvo/azure-portfolio-react/blob/master/src/utils/create-markup.tsx"
click node_links "https://github.com/bachvo/azure-portfolio-react/blob/master/src/utils/hash-link-url.tsx"
click node_mediautil "https://github.com/bachvo/azure-portfolio-react/blob/master/src/utils/is-media-video.tsx"
click node_resume "https://github.com/bachvo/azure-portfolio-react/blob/master/public/resources/resume/bachvo.resume.pdf"

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 toneBlue
class node_home,node_nav,node_cards,node_footer,node_model,node_markup,node_resume toneAmber
class node_detail,node_gallery,node_publicmedia,node_links,node_mediautil toneMint
class node_api,node_analytics toneRose
class node_visitor toneIndigo
```

## Components

### App and routing

- [App](https://github.com/bachvo/azure-portfolio-react/blob/master/src/App.tsx): `src/App.tsx`

### Portfolio content

- [Home page](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/home.tsx): `src/components/home.tsx`
- [Navigation](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/nav.tsx): `src/components/nav.tsx`
- [Card collections](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/card-collection.tsx): `src/components/card-collection.tsx`
- [Footer](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/footer.tsx): `src/components/footer.tsx`
- [Portfolio model](https://github.com/bachvo/azure-portfolio-react/blob/master/src/data/model.tsx): `src/data/model.tsx`
- [Markup utility](https://github.com/bachvo/azure-portfolio-react/blob/master/src/utils/create-markup.tsx): `src/utils/create-markup.tsx`
- [Resume PDF](https://github.com/bachvo/azure-portfolio-react/blob/master/public/resources/resume/bachvo.resume.pdf): `public/resources/resume/bachvo.resume.pdf`

### Details and media

- [Card details](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/card-detail.tsx): `src/components/card-detail.tsx`
- [Media gallery](https://github.com/bachvo/azure-portfolio-react/blob/master/src/components/gallery.tsx): `src/components/gallery.tsx`
- [Portfolio assets](https://github.com/bachvo/azure-portfolio-react/tree/master/public/gallery): `public/gallery`
- [Anchor utilities](https://github.com/bachvo/azure-portfolio-react/blob/master/src/utils/hash-link-url.tsx): `src/utils/hash-link-url.tsx`
- [Media utilities](https://github.com/bachvo/azure-portfolio-react/blob/master/src/utils/is-media-video.tsx): `src/utils/is-media-video.tsx`

### External integrations

- **Portfolio API**
- **Google Analytics**

### Other components

- **Visitor**

## Connections

- Visitor → App: opens
- App → Portfolio API: fetches model
- Portfolio API → App: returns model
- App → Home page: renders route
- App → Card details: routes detail
- App → Navigation: renders
- App → Footer: renders
- App → Google Analytics: reports errors
- Home page → Card collections: renders collections
- Home page → Markup utility: formats descriptions
- Home page → Google Analytics: tracks pageview
- Navigation → Anchor utilities: builds anchors
- Navigation → Resume PDF: links resume
- Navigation → Google Analytics: tracks outbound
- Card details → Media gallery: renders gallery
- Card details → Anchor utilities: builds anchors
- Card details → Media utilities: checks media
- Card details → Google Analytics: tracks pageview
- Media gallery → Portfolio assets: loads images
- Media gallery → Google Analytics: tracks interactions