# miningcablehq/my-first-react-app architecture

> Architecture diagram of the GitHub repository miningcablehq/my-first-react-app, 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/miningcablehq/my-first-react-app
- Repository: https://github.com/miningcablehq/my-first-react-app

## Overview

This repository is a small React personal website. The browser entry point mounts the app; the app renders a header, the main content layout, and a footer. The main layout presents the profile, hobbies, skills, and contact sections, with hobby and skill card components rendering their respective lists. The header also controls app-level dark-mode state. The contact form is currently presentation-only: the excerpt shows no submission handler or backend integration. The small model files are not connected to the rendered workflow in the shown source.

Main entry points: [`src/components/layout/MainLayout.jsx`](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/MainLayout.jsx) (Main layout), [`src/App.jsx`](https://github.com/miningcablehq/my-first-react-app/blob/master/src/App.jsx) (App state), [`src/components/hobbies/Hobbies.jsx`](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/hobbies/Hobbies.jsx) (Hobbies), [`src/components/skills/Skills.jsx`](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/skills/Skills.jsx) (Skills)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App state<br/>[App.jsx]"]
  node_header["Header navigation<br/>[Header.jsx]"]
  node_mainlayout["Main layout<br/>[MainLayout.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_content["Profile sections"]
  node_about["About profile<br/>[AboutMe.jsx]"]
  node_hobbies["Hobbies<br/>[Hobbies.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
end

subgraph group_cards["Section cards"]
  node_hobbycard["Hobby card<br/>[CardHobby.jsx]"]
  node_skillcard["Skill card<br/>[CardSkill.jsx]"]
end

node_visitor(("Visitor"))

node_entry -->|"renders"| node_app
node_visitor -->|"uses navigation"| node_header
node_app -->|"passes theme state"| node_header
node_app -->|"renders"| node_mainlayout
node_app -->|"renders"| node_footer
node_mainlayout -->|"renders"| node_about
node_mainlayout -->|"renders"| node_hobbies
node_mainlayout -->|"renders"| node_skills
node_mainlayout -->|"renders"| node_contact
node_hobbies -->|"renders"| node_hobbycard
node_skills -->|"renders"| node_skillcard

click node_entry "https://github.com/miningcablehq/my-first-react-app/blob/master/src/main.jsx"
click node_app "https://github.com/miningcablehq/my-first-react-app/blob/master/src/App.jsx"
click node_header "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/Header.jsx"
click node_mainlayout "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/MainLayout.jsx"
click node_footer "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/Footer.jsx"
click node_about "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/about/AboutMe.jsx"
click node_hobbies "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/hobbies/Hobbies.jsx"
click node_skills "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/skills/Skills.jsx"
click node_contact "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/contact/Contact.jsx"
click node_hobbycard "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/hobbies/CardHobby.jsx"
click node_skillcard "https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/skills/CardSkill.jsx"

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_entry,node_app,node_header,node_mainlayout,node_footer toneBlue
class node_about,node_hobbies,node_skills,node_contact toneAmber
class node_hobbycard,node_skillcard toneMint
class node_visitor toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/miningcablehq/my-first-react-app/blob/master/src/main.jsx): `src/main.jsx`
- [App state](https://github.com/miningcablehq/my-first-react-app/blob/master/src/App.jsx): `src/App.jsx`
- [Header navigation](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/Header.jsx): `src/components/layout/Header.jsx`
- [Main layout](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/MainLayout.jsx): `src/components/layout/MainLayout.jsx`
- [Footer](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/layout/Footer.jsx): `src/components/layout/Footer.jsx`

### Profile sections

- [About profile](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/about/AboutMe.jsx): `src/components/about/AboutMe.jsx`
- [Hobbies](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/hobbies/Hobbies.jsx): `src/components/hobbies/Hobbies.jsx`
- [Skills](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/skills/Skills.jsx): `src/components/skills/Skills.jsx`
- [Contact form](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/contact/Contact.jsx): `src/components/contact/Contact.jsx`

### Section cards

- [Hobby card](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/hobbies/CardHobby.jsx): `src/components/hobbies/CardHobby.jsx`
- [Skill card](https://github.com/miningcablehq/my-first-react-app/blob/master/src/components/skills/CardSkill.jsx): `src/components/skills/CardSkill.jsx`

### Other components

- **Visitor**

## Connections

- React entry → App state: renders (evidence: `src/main.jsx`)
- Visitor → Header navigation: uses navigation (evidence: `src/components/layout/Header.jsx`)
- App state → Header navigation: passes theme state (evidence: `src/App.jsx`)
- App state → Main layout: renders (evidence: `src/App.jsx`)
- App state → Footer: renders (evidence: `src/App.jsx`)
- Main layout → About profile: renders (evidence: `src/components/layout/MainLayout.jsx`)
- Main layout → Hobbies: renders (evidence: `src/components/layout/MainLayout.jsx`)
- Main layout → Skills: renders (evidence: `src/components/layout/MainLayout.jsx`)
- Main layout → Contact form: renders (evidence: `src/components/layout/MainLayout.jsx`)
- Hobbies → Hobby card: renders (evidence: `src/components/hobbies/Hobbies.jsx`)
- Skills → Skill card: renders (evidence: `src/components/skills/Skills.jsx`)