# ericwang0516/test-for-hank architecture

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

- Interactive diagram: https://gitdiagram.com/ericwang0516/test-for-hank
- Repository: https://github.com/ericwang0516/test-for-hank

## Overview

This is a small Next.js portfolio site: visitors browse a project gallery, open the Suzaku snowmobile project, and inspect its interactive 3D model alongside project details and photos. The main rendering path is explicit in the sampled pages and components. The README is empty, so the graph reflects sampled source; static assets are shown only where the viewer’s source explicitly loads the model.

Main entry points: [`app/suzaku/page.js`](https://github.com/ericwang0516/test-for-hank/blob/main/app/suzaku/page.js) (Suzaku project), [`app/page.js`](https://github.com/ericwang0516/test-for-hank/blob/main/app/page.js) (Project gallery), [`app/components/ThreeBoxWrapper.js`](https://github.com/ericwang0516/test-for-hank/blob/main/app/components/ThreeBoxWrapper.js) (Viewer wrapper), [`app/components/ThreeBox.js`](https://github.com/ericwang0516/test-for-hank/blob/main/app/components/ThreeBox.js) (3D scene viewer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio pages"]
  node_home["Project gallery<br/>[page.js]"]
  node_suzaku["Suzaku project<br/>[page.js]"]
  node_notfound["Not found page<br/>[not-found.js]"]
  node_layout["Root layout<br/>[layout.js]"]
  node_robots["Crawler rules<br/>[robots.js]"]
end

subgraph group_viewer["3D viewer"]
  node_viewerwrapper["Viewer wrapper<br/>[ThreeBoxWrapper.js]"]
  node_viewer["3D scene viewer<br/>[ThreeBox.js]"]
  node_model["Snowmobile model<br/>[smi.glb]"]
end

node_visitor(("Visitor"))
node_analytics["Analytics service"]

node_visitor -->|"opens"| node_home
node_home -->|"links to"| node_suzaku
node_visitor -->|"opens"| node_suzaku
node_suzaku -->|"renders"| node_viewerwrapper
node_viewerwrapper -->|"loads dynamically"| node_viewer
node_viewer -->|"loads"| node_model
node_layout -->|"renders"| node_analytics
node_visitor -.->|"may reach"| node_notfound
node_visitor -.->|"crawler requests"| node_robots

click node_home "https://github.com/ericwang0516/test-for-hank/blob/main/app/page.js"
click node_suzaku "https://github.com/ericwang0516/test-for-hank/blob/main/app/suzaku/page.js"
click node_notfound "https://github.com/ericwang0516/test-for-hank/blob/main/app/not-found.js"
click node_layout "https://github.com/ericwang0516/test-for-hank/blob/main/app/layout.js"
click node_viewerwrapper "https://github.com/ericwang0516/test-for-hank/blob/main/app/components/ThreeBoxWrapper.js"
click node_viewer "https://github.com/ericwang0516/test-for-hank/blob/main/app/components/ThreeBox.js"
click node_model "https://github.com/ericwang0516/test-for-hank/blob/main/public/3dfiles/smi.glb"
click node_robots "https://github.com/ericwang0516/test-for-hank/blob/main/app/robots.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_home,node_suzaku,node_notfound,node_layout,node_robots toneBlue
class node_viewerwrapper,node_viewer,node_model toneAmber
class node_visitor,node_analytics toneIndigo
```

## Components

### Portfolio pages

- [Project gallery](https://github.com/ericwang0516/test-for-hank/blob/main/app/page.js): `app/page.js`
- [Suzaku project](https://github.com/ericwang0516/test-for-hank/blob/main/app/suzaku/page.js): `app/suzaku/page.js`
- [Not found page](https://github.com/ericwang0516/test-for-hank/blob/main/app/not-found.js): `app/not-found.js`
- [Root layout](https://github.com/ericwang0516/test-for-hank/blob/main/app/layout.js): `app/layout.js`
- [Crawler rules](https://github.com/ericwang0516/test-for-hank/blob/main/app/robots.js): `app/robots.js`

### 3D viewer

- [Viewer wrapper](https://github.com/ericwang0516/test-for-hank/blob/main/app/components/ThreeBoxWrapper.js): `app/components/ThreeBoxWrapper.js`
- [3D scene viewer](https://github.com/ericwang0516/test-for-hank/blob/main/app/components/ThreeBox.js): `app/components/ThreeBox.js`
- [Snowmobile model](https://github.com/ericwang0516/test-for-hank/blob/main/public/3dfiles/smi.glb): `public/3dfiles/smi.glb`

### Other components

- **Visitor**
- **Analytics service**

## Connections

- Visitor → Project gallery: opens (evidence: `app/page.js`)
- Project gallery → Suzaku project: links to (evidence: `app/page.js`)
- Visitor → Suzaku project: opens (evidence: `app/suzaku/page.js`)
- Suzaku project → Viewer wrapper: renders (evidence: `app/suzaku/page.js`)
- Viewer wrapper → 3D scene viewer: loads dynamically (evidence: `app/components/ThreeBoxWrapper.js`)
- 3D scene viewer → Snowmobile model: loads (evidence: `app/components/ThreeBox.js`)
- Root layout → Analytics service: renders (evidence: `app/layout.js`)
- Visitor → Not found page: may reach
- Visitor → Crawler rules: crawler requests