# 6ems9/astroboy architecture

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

- Interactive diagram: https://gitdiagram.com/6ems9/astroboy
- Repository: https://github.com/6ems9/astroboy

## Overview

AstroBoy is a lightweight, single-page personal portfolio and vCard. A visitor views profile, resume, portfolio, and contact content presented by the Astro page; maintainers edit the profile and project data in separate data files. The README documents responsive layout, smooth scrolling, and active navigation. The page source was not sampled, so the section relationships below follow the documented product structure rather than verified implementation details.

Main entry points: [`src/pages/index.astro`](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro) (Astro page), [`src/styles/global.css`](https://github.com/6ems9/astroboy/blob/master/src/styles/global.css) (Global styles), [`src/data/about_resume.ts`](https://github.com/6ems9/astroboy/blob/master/src/data/about_resume.ts) (Profile and resume data), [`src/data/portfolio.ts`](https://github.com/6ems9/astroboy/blob/master/src/data/portfolio.ts) (Portfolio item data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_page["Astro page<br/>[index.astro]"]
  node_about["About section<br/>[index.astro]"]
  node_resume["Resume section<br/>[index.astro]"]
  node_work["Portfolio section<br/>[index.astro]"]
  node_contact["Contact section<br/>[index.astro]"]
  node_navigation["Section navigation<br/>[index.astro]"]
end

subgraph group_content["Editable content"]
  node_profiledata["Profile and resume data<br/>[about_resume.ts]"]
  node_workdata["Portfolio item data<br/>[portfolio.ts]"]
end

subgraph group_styling["Page styling"]
  node_styles["Global styles<br/>[global.css]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_page
node_page -->|"renders"| node_about
node_page -->|"renders"| node_resume
node_page -->|"renders"| node_work
node_page -->|"renders"| node_contact
node_page -->|"presents"| node_navigation
node_page -->|"uses content"| node_profiledata
node_page -->|"uses content"| node_workdata
node_styles -->|"styles"| node_page

click node_page "https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro"
click node_about "https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro"
click node_resume "https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro"
click node_work "https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro"
click node_contact "https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro"
click node_navigation "https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro"
click node_profiledata "https://github.com/6ems9/astroboy/blob/master/src/data/about_resume.ts"
click node_workdata "https://github.com/6ems9/astroboy/blob/master/src/data/portfolio.ts"
click node_styles "https://github.com/6ems9/astroboy/blob/master/src/styles/global.css"

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_page,node_about,node_resume,node_work,node_contact,node_navigation toneBlue
class node_profiledata,node_workdata toneAmber
class node_styles toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [Astro page](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro): `src/pages/index.astro`
- [About section](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro): `src/pages/index.astro`
- [Resume section](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro): `src/pages/index.astro`
- [Portfolio section](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro): `src/pages/index.astro`
- [Contact section](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro): `src/pages/index.astro`
- [Section navigation](https://github.com/6ems9/astroboy/blob/master/src/pages/index.astro): `src/pages/index.astro`

### Editable content

- [Profile and resume data](https://github.com/6ems9/astroboy/blob/master/src/data/about_resume.ts): `src/data/about_resume.ts`
- [Portfolio item data](https://github.com/6ems9/astroboy/blob/master/src/data/portfolio.ts): `src/data/portfolio.ts`

### Page styling

- [Global styles](https://github.com/6ems9/astroboy/blob/master/src/styles/global.css): `src/styles/global.css`

### Other components

- **Visitor**

## Connections

- Visitor → Astro page: views
- Astro page → About section: renders
- Astro page → Resume section: renders
- Astro page → Portfolio section: renders
- Astro page → Contact section: renders
- Astro page → Section navigation: presents
- Astro page → Profile and resume data: uses content
- Astro page → Portfolio item data: uses content
- Global styles → Astro page: styles