# mirajg/aeroisland_3d architecture

> Architecture diagram of the GitHub repository mirajg/aeroisland_3d, 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/mirajg/aeroisland_3d
- Repository: https://github.com/mirajg/aeroisland_3d

## Overview

AeroIsland 3D is an interactive portfolio: visitors rotate a 3D island with mouse, touch, or arrow keys; angular zones reveal route popups, while a plane responds to rotation. The Next.js app also provides About and Contact pages, a first-visit guide, and scene-loading feedback. The main page’s component calls and route mapping are excerpted; other routing, styling, and runtime details are not expanded beyond the available evidence.

Main entry points: [`src/app/page.js`](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/page.js) (Island Experience), [`src/components/PopUp.jsx`](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/PopUp.jsx) (Zone Popup), [`src/components/Plane.jsx`](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Plane.jsx) (Plane Companion), [`src/app/contact/page.jsx`](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/contact/page.jsx) (Contact Form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["3D Experience"]
  node_home["Island Experience<br/>[page.js]"]
  node_orbit["Orbit Controls<br/>[page.js]"]
  node_island["Island Model<br/>[FoxsIslands.jsx]"]
  node_cloud["Cloud Backdrop<br/>[Cloud.jsx]"]
  node_plane["Plane Companion<br/>[Plane.jsx]"]
  node_sceneassets["3D Scene Assets<br/>[foxs_islands.glb]"]
  node_zonepopup["Zone Popup<br/>[PopUp.jsx]"]
end

subgraph group_guidance["Visitor Guidance"]
  node_loader["Scene Loader<br/>[Loader.jsx]"]
  node_welcome["Welcome Guide<br/>[WelcomeModal.jsx]"]
end

subgraph group_pages["Portfolio Pages"]
  node_about["About Page<br/>[page.jsx]"]
  node_contact["Contact Form<br/>[page.jsx]"]
  node_button["Navigation Button<br/>[Button.jsx]"]
end

subgraph group_platform["App Platform"]
  node_layout["Root Layout<br/>[layout.js]"]
  node_analytics["Vercel Analytics"]
  node_formspree["Formspree"]
end

node_visitor(("Visitor"))
node_portfolioexternal["External Portfolio"]

node_visitor -->|"interacts with"| node_home
node_home -->|"configures"| node_orbit
node_orbit -->|"reports rotation"| node_home
node_home -->|"renders"| node_island
node_home -->|"renders"| node_cloud
node_home -->|"renders"| node_plane
node_home -->|"shows by zone"| node_zonepopup
node_home -->|"shows while loading"| node_loader
node_home -->|"shows on first visit"| node_welcome
node_plane -->|"uses rotation state"| node_home
node_island -->|"loads model"| node_sceneassets
node_cloud -->|"loads model"| node_sceneassets
node_plane -->|"loads model"| node_sceneassets
node_zonepopup -->|"routes to"| node_about
node_zonepopup -->|"routes to"| node_contact
node_zonepopup -->|"links to"| node_portfolioexternal
node_about -->|"renders"| node_button
node_contact -->|"renders"| node_button
node_contact -->|"submits through"| node_formspree
node_layout -->|"renders"| node_analytics

click node_home "https://github.com/mirajg/aeroisland_3d/blob/main/src/app/page.js"
click node_orbit "https://github.com/mirajg/aeroisland_3d/blob/main/src/app/page.js"
click node_island "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/FoxsIslands.jsx"
click node_cloud "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Cloud.jsx"
click node_plane "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Plane.jsx"
click node_sceneassets "https://github.com/mirajg/aeroisland_3d/blob/main/public/models/foxs_islands.glb"
click node_zonepopup "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/PopUp.jsx"
click node_loader "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Loader.jsx"
click node_welcome "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/WelcomeModal.jsx"
click node_about "https://github.com/mirajg/aeroisland_3d/blob/main/src/app/about/page.jsx"
click node_contact "https://github.com/mirajg/aeroisland_3d/blob/main/src/app/contact/page.jsx"
click node_button "https://github.com/mirajg/aeroisland_3d/blob/main/src/components/ui/Button.jsx"
click node_layout "https://github.com/mirajg/aeroisland_3d/blob/main/src/app/layout.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_orbit,node_island,node_cloud,node_plane,node_sceneassets,node_zonepopup toneBlue
class node_loader,node_welcome toneAmber
class node_about,node_contact,node_button toneMint
class node_layout,node_analytics,node_formspree toneRose
class node_visitor,node_portfolioexternal toneIndigo
```

## Components

### 3D Experience

- [Island Experience](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/page.js): `src/app/page.js`
- [Orbit Controls](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/page.js): `src/app/page.js`
- [Island Model](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/FoxsIslands.jsx): `src/components/FoxsIslands.jsx`
- [Cloud Backdrop](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Cloud.jsx): `src/components/Cloud.jsx`
- [Plane Companion](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Plane.jsx): `src/components/Plane.jsx`
- [3D Scene Assets](https://github.com/mirajg/aeroisland_3d/blob/main/public/models/foxs_islands.glb): `public/models/foxs_islands.glb`
- [Zone Popup](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/PopUp.jsx): `src/components/PopUp.jsx`

### Visitor Guidance

- [Scene Loader](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/Loader.jsx): `src/components/Loader.jsx`
- [Welcome Guide](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/WelcomeModal.jsx): `src/components/WelcomeModal.jsx`

### Portfolio Pages

- [About Page](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/about/page.jsx): `src/app/about/page.jsx`
- [Contact Form](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/contact/page.jsx): `src/app/contact/page.jsx`
- [Navigation Button](https://github.com/mirajg/aeroisland_3d/blob/main/src/components/ui/Button.jsx): `src/components/ui/Button.jsx`

### App Platform

- [Root Layout](https://github.com/mirajg/aeroisland_3d/blob/main/src/app/layout.js): `src/app/layout.js`
- **Vercel Analytics**
- **Formspree**

### Other components

- **Visitor**
- **External Portfolio**

## Connections

- Visitor → Island Experience: interacts with (evidence: `README.md`)
- Island Experience → Orbit Controls: configures (evidence: `src/app/page.js`)
- Orbit Controls → Island Experience: reports rotation (evidence: `src/app/page.js`)
- Island Experience → Island Model: renders (evidence: `src/app/page.js`)
- Island Experience → Cloud Backdrop: renders (evidence: `src/app/page.js`)
- Island Experience → Plane Companion: renders (evidence: `src/app/page.js`)
- Island Experience → Zone Popup: shows by zone (evidence: `src/app/page.js`)
- Island Experience → Scene Loader: shows while loading (evidence: `src/app/page.js`)
- Island Experience → Welcome Guide: shows on first visit (evidence: `src/app/page.js`)
- Plane Companion → Island Experience: uses rotation state (evidence: `src/app/page.js`)
- Island Model → 3D Scene Assets: loads model (evidence: `src/components/FoxsIslands.jsx`)
- Cloud Backdrop → 3D Scene Assets: loads model (evidence: `src/components/Cloud.jsx`)
- Plane Companion → 3D Scene Assets: loads model (evidence: `src/components/Plane.jsx`)
- Zone Popup → About Page: routes to (evidence: `src/components/PopUp.jsx`)
- Zone Popup → Contact Form: routes to (evidence: `src/components/PopUp.jsx`)
- Zone Popup → External Portfolio: links to (evidence: `src/components/PopUp.jsx`)
- About Page → Navigation Button: renders (evidence: `src/app/about/page.jsx`)
- Contact Form → Navigation Button: renders (evidence: `src/app/contact/page.jsx`)
- Contact Form → Formspree: submits through (evidence: `src/app/contact/page.jsx`)
- Root Layout → Vercel Analytics: renders (evidence: `src/app/layout.js`)