# gabriel-codes-droid/folio architecture

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

- Interactive diagram: https://gitdiagram.com/gabriel-codes-droid/folio
- Repository: https://github.com/gabriel-codes-droid/folio

## Overview

This repository is a 3D portfolio site: visitors enter through the homepage, follow an interactive space journey, explore project panels, then reach developer and contact content. The README documents these major capabilities; sampled source confirms the scene, project data, loading coordination, and contact submission path. Some page composition and scene wiring are unsampled, so the graph shows only documented or evidenced relationships.

Main entry points: [`src/components/SpaceCanvas.jsx`](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SpaceCanvas.jsx) (3D journey), [`src/pages/index.astro`](https://github.com/gabriel-codes-droid/folio/blob/main/src/pages/index.astro) (Homepage), [`src/components/PortfolioOutro.jsx`](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/PortfolioOutro.jsx) (Portfolio outro), [`src/components/TacticalAstronaut.jsx`](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/TacticalAstronaut.jsx) (Astronaut animation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_home["Homepage<br/>[index.astro]"]
  node_layout["Site layout<br/>[Layout.astro]"]
  node_intro["Portfolio intro"]
  node_outro["Portfolio outro<br/>[PortfolioOutro.jsx]"]
  node_sonar["Sonar background<br/>[SonarGrid.jsx]"]
end

subgraph group_journey["Space journey"]
  node_boot["Boot loader<br/>[BootLoader.astro]"]
  node_bootlogic["Loader behavior<br/>[bootLoader.js]"]
  node_canvas["3D journey<br/>[SpaceCanvas.jsx]"]
  node_astronaut["Astronaut animation"]
  node_journeylogic["Journey timing<br/>[journey.js]"]
  node_sceneassets["Scene assets"]
  node_readiness["Scene readiness<br/>[SceneReady.jsx]"]
  node_cube["Cube field"]
end

subgraph group_showcase["Project showcase"]
  node_moon["Moon and planets<br/>[MoonScene.jsx]"]
  node_projects["Project catalog<br/>[projects.js]"]
end

subgraph group_contact["Contact"]
  node_contactapi["Contact endpoint<br/>[contact.ts]"]
  node_resend["Resend email service"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"uses layout"| node_layout
node_home -->|"presents intro"| node_intro
node_home -->|"presents journey"| node_canvas
node_home -->|"presents outro"| node_outro
node_boot -->|"runs"| node_bootlogic
node_canvas -->|"tracks progress"| node_journeylogic
node_astronaut -->|"samples path"| node_journeylogic
node_canvas -->|"positions"| node_astronaut
node_canvas -->|"renders"| node_cube
node_canvas -->|"coordinates loading"| node_readiness
node_readiness -->|"prepares"| node_sceneassets
node_astronaut -->|"loads models"| node_sceneassets
node_moon -->|"loads models"| node_sceneassets
node_moon -->|"reads catalog"| node_projects
node_canvas -->|"hosts scene"| node_moon
node_outro -->|"renders background"| node_sonar
node_outro -->|"submits message"| node_contactapi
node_contactapi -->|"sends email"| node_resend
node_visitor -->|"interacts"| node_canvas
node_visitor -->|"composes message"| node_outro

click node_home "https://github.com/gabriel-codes-droid/folio/blob/main/src/pages/index.astro"
click node_layout "https://github.com/gabriel-codes-droid/folio/blob/main/src/layouts/Layout.astro"
click node_intro "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/PortfolioIntro.astro"
click node_outro "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/PortfolioOutro.jsx"
click node_boot "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/BootLoader.astro"
click node_bootlogic "https://github.com/gabriel-codes-droid/folio/blob/main/src/scripts/bootLoader.js"
click node_canvas "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SpaceCanvas.jsx"
click node_astronaut "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/TacticalAstronaut.jsx"
click node_journeylogic "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/journey.js"
click node_sceneassets "https://github.com/gabriel-codes-droid/folio/tree/main/public/models"
click node_readiness "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SceneReady.jsx"
click node_cube "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/ControlCubeField.jsx"
click node_moon "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/MoonScene.jsx"
click node_projects "https://github.com/gabriel-codes-droid/folio/blob/main/src/data/projects.js"
click node_sonar "https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SonarGrid.jsx"
click node_contactapi "https://github.com/gabriel-codes-droid/folio/blob/main/src/pages/api/contact.ts"

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_layout,node_intro,node_outro,node_sonar toneBlue
class node_boot,node_bootlogic,node_canvas,node_astronaut,node_journeylogic,node_sceneassets,node_readiness,node_cube toneAmber
class node_moon,node_projects toneMint
class node_contactapi,node_resend toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Homepage](https://github.com/gabriel-codes-droid/folio/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Site layout](https://github.com/gabriel-codes-droid/folio/blob/main/src/layouts/Layout.astro): `src/layouts/Layout.astro`
- [Portfolio intro](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/PortfolioIntro.astro): `src/components/PortfolioIntro.astro`
- [Portfolio outro](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/PortfolioOutro.jsx): `src/components/PortfolioOutro.jsx`
- [Sonar background](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SonarGrid.jsx): `src/components/SonarGrid.jsx`

### Space journey

- [Boot loader](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/BootLoader.astro): `src/components/BootLoader.astro`
- [Loader behavior](https://github.com/gabriel-codes-droid/folio/blob/main/src/scripts/bootLoader.js): `src/scripts/bootLoader.js`
- [3D journey](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SpaceCanvas.jsx): `src/components/SpaceCanvas.jsx`
- [Astronaut animation](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/TacticalAstronaut.jsx): `src/components/TacticalAstronaut.jsx`
- [Journey timing](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/journey.js): `src/components/journey.js`
- [Scene assets](https://github.com/gabriel-codes-droid/folio/tree/main/public/models): `public/models`
- [Scene readiness](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/SceneReady.jsx): `src/components/SceneReady.jsx`
- [Cube field](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/ControlCubeField.jsx): `src/components/ControlCubeField.jsx`

### Project showcase

- [Moon and planets](https://github.com/gabriel-codes-droid/folio/blob/main/src/components/MoonScene.jsx): `src/components/MoonScene.jsx`
- [Project catalog](https://github.com/gabriel-codes-droid/folio/blob/main/src/data/projects.js): `src/data/projects.js`

### Contact

- [Contact endpoint](https://github.com/gabriel-codes-droid/folio/blob/main/src/pages/api/contact.ts): `src/pages/api/contact.ts`
- **Resend email service**

### Other components

- **Visitor**

## Connections

- Visitor → Homepage: opens
- Homepage → Site layout: uses layout
- Homepage → Portfolio intro: presents intro
- Homepage → 3D journey: presents journey
- Homepage → Portfolio outro: presents outro
- Boot loader → Loader behavior: runs
- 3D journey → Journey timing: tracks progress
- Astronaut animation → Journey timing: samples path
- 3D journey → Astronaut animation: positions
- 3D journey → Cube field: renders
- 3D journey → Scene readiness: coordinates loading
- Scene readiness → Scene assets: prepares
- Astronaut animation → Scene assets: loads models
- Moon and planets → Scene assets: loads models
- Moon and planets → Project catalog: reads catalog
- 3D journey → Moon and planets: hosts scene
- Portfolio outro → Sonar background: renders background
- Portfolio outro → Contact endpoint: submits message
- Contact endpoint → Resend email service: sends email
- Visitor → 3D journey: interacts
- Visitor → Portfolio outro: composes message