# fanchimao/fanchimao.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/fanchimao/fanchimao.github.io
- Repository: https://github.com/fanchimao/fanchimao.github.io

## Overview

52hzfan.com is a multilingual personal portfolio and personal-world website. Visitors explore professional material or enter the personal section for albums, Ajie posts, Journey milestones, and achievement badges; an admin interface supports publishing content and posting Ajie material to Instagram. The map preserves README-documented capabilities even where their page implementations are not in the supplied tree. Some subsystem links are therefore documented rather than source-verified; standalone camera-playground wiring is not shown.

Main entry points: [`workers/site-admin/src/index.ts`](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/index.ts) (Site admin API), [`src/content`](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content) (Personal pages), [`src/admin/app.ts`](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/app.ts) (Admin dashboard), [`src/lib/passport.ts`](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/passport.ts) (Achievement logbook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Professional portfolio"]
  node_professional["Professional pages"]
  node_profile["Profile and experience<br/>[site.ts]"]
  node_research["Research and projects"]
  node_multilingual["Professional UI text<br/>[ui.ts]"]
end

subgraph group_personal["Personal world"]
  node_personal_pages["Personal pages"]
  node_personal_ui["Personal UI text<br/>[personal.ts]"]
  node_albums["Photo albums"]
  node_journey["Journey timeline"]
  node_globe["Journey globe<br/>[journey-globe.ts]"]
  node_globe_engine["Globe renderer<br/>[mini-globe.ts]"]
  node_ajie["Ajie posts and profile"]
  node_pixel_pet["Pixel Ajie companion<br/>[pet.ts]"]
  node_passport["Achievement logbook<br/>[passport.ts]"]
  node_achievement_rules["Achievement rules<br/>[achievements.ts]"]
  node_stats_client["Stats client<br/>[passport-stats.ts]"]
  node_camera_playground["Camera CV playground<br/>[cv-worker.js]"]
end

subgraph group_admin["Content administration"]
  node_admin_ui["Admin dashboard<br/>[app.ts]"]
  node_post_validation["Post validation<br/>[admin-post.ts]"]
  node_media_prep["Media preparation<br/>[media.ts]"]
  node_instagram_ui["Instagram publisher UI<br/>[ig.ts]"]
end

subgraph group_services["Backend services"]
  node_admin_worker["Site admin API<br/>[index.ts]"]
  node_access["Access verification<br/>[access.ts]"]
  node_publish["Content publishing<br/>[publish.ts]"]
  node_ig_service["Instagram integration<br/>[instagram.ts]"]
  node_stats_worker["Achievement stats API<br/>[index.ts]"]
  node_stats_db[("Stats database<br/>[index.ts]")]
end

node_visitor(("Site visitor"))
node_github["GitHub"]
node_r2[("Cloudflare R2 media")]
node_instagram["Instagram Graph API"]

node_visitor -->|"browses"| node_professional
node_visitor -->|"explores"| node_personal_pages
node_professional -->|"presents"| node_profile
node_professional -->|"presents"| node_research
node_professional -->|"uses text"| node_multilingual
node_personal_pages -->|"uses text"| node_personal_ui
node_personal_pages -->|"shows albums"| node_albums
node_personal_pages -->|"shows timeline"| node_journey
node_personal_pages -->|"shows posts"| node_ajie
node_journey -->|"renders milestones"| node_globe
node_globe -->|"uses renderer"| node_globe_engine
node_personal_pages -->|"shows logbook"| node_passport
node_passport -->|"checks rules"| node_achievement_rules
node_ajie -->|"hosts companion"| node_pixel_pet
node_admin_ui -->|"validates posts"| node_post_validation
node_admin_ui -->|"prepares uploads"| node_media_prep
node_admin_ui -->|"calls admin API"| node_admin_worker
node_instagram_ui -->|"calls IG API"| node_admin_worker
node_admin_worker -->|"verifies access"| node_access
node_admin_worker -->|"builds posts"| node_publish
node_admin_worker -->|"routes IG actions"| node_ig_service
node_admin_worker -->|"commits content"| node_github
node_admin_worker -->|"uploads media"| node_r2
node_ig_service -->|"publishes media"| node_instagram
node_ig_service -->|"stages media"| node_r2
node_passport -->|"reports badges"| node_stats_client
node_stats_client -->|"calls stats API"| node_stats_worker
node_stats_worker -.->|"reads and writes"| node_stats_db
node_stats_worker -->|"counts post likes"| node_ajie

click node_professional "https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content"
click node_profile "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/site.ts"
click node_research "https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content"
click node_multilingual "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/i18n/ui.ts"
click node_personal_pages "https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content"
click node_personal_ui "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/i18n/personal.ts"
click node_albums "https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content/albums"
click node_journey "https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content/journey"
click node_globe "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/journey-globe.ts"
click node_globe_engine "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/mini-globe.ts"
click node_ajie "https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content/ajie"
click node_pixel_pet "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/ajie-pet/pet.ts"
click node_passport "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/passport.ts"
click node_achievement_rules "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/achievements.ts"
click node_stats_client "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/passport-stats.ts"
click node_admin_ui "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/app.ts"
click node_post_validation "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/admin-post.ts"
click node_media_prep "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/media.ts"
click node_instagram_ui "https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/ig.ts"
click node_admin_worker "https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/index.ts"
click node_access "https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/access.ts"
click node_publish "https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/publish.ts"
click node_ig_service "https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/instagram.ts"
click node_stats_worker "https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/achievement-stats/src/index.ts"
click node_stats_db "https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/achievement-stats/src/index.ts"
click node_camera_playground "https://github.com/fanchimao/fanchimao.github.io/blob/main/public/playground/cam/cv-worker.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_professional,node_profile,node_research,node_multilingual toneBlue
class node_personal_pages,node_personal_ui,node_albums,node_journey,node_globe,node_globe_engine,node_ajie,node_pixel_pet,node_passport,node_achievement_rules,node_stats_client,node_camera_playground,node_r2 toneAmber
class node_admin_ui,node_post_validation,node_media_prep,node_instagram_ui,node_instagram toneMint
class node_admin_worker,node_access,node_publish,node_ig_service,node_stats_worker,node_stats_db toneRose
class node_visitor,node_github toneIndigo
```

## Components

### Professional portfolio

- [Professional pages](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content): `src/content`
- [Profile and experience](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/site.ts): `src/lib/site.ts`
- [Research and projects](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content): `src/content`
- [Professional UI text](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/i18n/ui.ts): `src/i18n/ui.ts`

### Personal world

- [Personal pages](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content): `src/content`
- [Personal UI text](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/i18n/personal.ts): `src/i18n/personal.ts`
- [Photo albums](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content/albums): `src/content/albums`
- [Journey timeline](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content/journey): `src/content/journey`
- [Journey globe](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/journey-globe.ts): `src/lib/journey-globe.ts`
- [Globe renderer](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/mini-globe.ts): `src/lib/mini-globe.ts`
- [Ajie posts and profile](https://github.com/fanchimao/fanchimao.github.io/tree/main/src/content/ajie): `src/content/ajie`
- [Pixel Ajie companion](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/ajie-pet/pet.ts): `src/lib/ajie-pet/pet.ts`
- [Achievement logbook](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/passport.ts): `src/lib/passport.ts`
- [Achievement rules](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/achievements.ts): `src/lib/achievements.ts`
- [Stats client](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/passport-stats.ts): `src/lib/passport-stats.ts`
- [Camera CV playground](https://github.com/fanchimao/fanchimao.github.io/blob/main/public/playground/cam/cv-worker.js): `public/playground/cam/cv-worker.js`

### Content administration

- [Admin dashboard](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/app.ts): `src/admin/app.ts`
- [Post validation](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/lib/admin-post.ts): `src/lib/admin-post.ts`
- [Media preparation](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/media.ts): `src/admin/media.ts`
- [Instagram publisher UI](https://github.com/fanchimao/fanchimao.github.io/blob/main/src/admin/ig.ts): `src/admin/ig.ts`

### Backend services

- [Site admin API](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/index.ts): `workers/site-admin/src/index.ts`
- [Access verification](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/access.ts): `workers/site-admin/src/access.ts`
- [Content publishing](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/publish.ts): `workers/site-admin/src/publish.ts`
- [Instagram integration](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/site-admin/src/instagram.ts): `workers/site-admin/src/instagram.ts`
- [Achievement stats API](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/achievement-stats/src/index.ts): `workers/achievement-stats/src/index.ts`
- [Stats database](https://github.com/fanchimao/fanchimao.github.io/blob/main/workers/achievement-stats/src/index.ts): `workers/achievement-stats/src/index.ts`

### Other components

- **Site visitor**
- **GitHub**
- **Cloudflare R2 media**
- **Instagram Graph API**

## Connections

- Site visitor → Professional pages: browses
- Site visitor → Personal pages: explores
- Professional pages → Profile and experience: presents
- Professional pages → Research and projects: presents
- Professional pages → Professional UI text: uses text
- Personal pages → Personal UI text: uses text
- Personal pages → Photo albums: shows albums
- Personal pages → Journey timeline: shows timeline
- Personal pages → Ajie posts and profile: shows posts
- Journey timeline → Journey globe: renders milestones
- Journey globe → Globe renderer: uses renderer (evidence: `src/lib/journey-globe.ts`)
- Personal pages → Achievement logbook: shows logbook
- Achievement logbook → Achievement rules: checks rules
- Ajie posts and profile → Pixel Ajie companion: hosts companion
- Admin dashboard → Post validation: validates posts (evidence: `src/admin/app.ts`)
- Admin dashboard → Media preparation: prepares uploads (evidence: `src/admin/app.ts`)
- Admin dashboard → Site admin API: calls admin API (evidence: `src/admin/app.ts`)
- Instagram publisher UI → Site admin API: calls IG API (evidence: `src/admin/ig.ts`)
- Site admin API → Access verification: verifies access (evidence: `workers/site-admin/src/index.ts`)
- Site admin API → Content publishing: builds posts (evidence: `workers/site-admin/src/index.ts`)
- Site admin API → Instagram integration: routes IG actions (evidence: `workers/site-admin/src/index.ts`)
- Site admin API → GitHub: commits content
- Site admin API → Cloudflare R2 media: uploads media
- Instagram integration → Instagram Graph API: publishes media (evidence: `workers/site-admin/src/instagram.ts`)
- Instagram integration → Cloudflare R2 media: stages media (evidence: `workers/site-admin/src/instagram.ts`)
- Achievement logbook → Stats client: reports badges (evidence: `src/lib/passport-stats.ts`)
- Stats client → Achievement stats API: calls stats API
- Achievement stats API → Stats database: reads and writes (evidence: `workers/achievement-stats/src/index.ts`)
- Achievement stats API → Ajie posts and profile: counts post likes (evidence: `workers/achievement-stats/src/index.ts`)