# cheikhebeoumar/myportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/cheikhebeoumar/myportfolio
- Repository: https://github.com/cheikhebeoumar/myportfolio

## Overview

This is a React developer-portfolio site: visitors browse an introduction, biography, skills, project examples, and contact form. The sampled App.js contains these sections and a contact submission, while src/components contains separate section implementations whose connection to the rendered app is not established by the excerpts. The graph focuses on the visible App workflow; no data store is evident.

Main entry points: [`src/App.js`](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js) (Portfolio app), [`src/index.js`](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/index.js) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Page runtime"]
  node_entry["React entry<br/>[index.js]"]
  node_app["Portfolio app<br/>[App.js]"]
end

subgraph group_portfolio["Portfolio sections"]
  node_navigation["Section navigation<br/>[App.js]"]
  node_home["Introduction<br/>[App.js]"]
  node_about["Biography<br/>[App.js]"]
  node_skills["Skills showcase<br/>[App.js]"]
  node_work["Project showcase<br/>[App.js]"]
  node_contact["Contact form<br/>[App.js]"]
end

node_visitor(("Visitor"))
node_formspree{{"Formspree"}}

node_entry -->|"renders"| node_app
node_visitor -->|"selects sections"| node_navigation
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_home
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_work
node_app -->|"renders"| node_contact
node_contact -->|"submits message"| node_formspree

click node_entry "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/index.js"
click node_app "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js"
click node_navigation "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js"
click node_home "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js"
click node_about "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js"
click node_skills "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js"
click node_work "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js"
click node_contact "https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.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_entry,node_app toneBlue
class node_navigation,node_home,node_about,node_skills,node_work,node_contact toneAmber
class node_visitor,node_formspree toneIndigo
```

## Components

### Page runtime

- [React entry](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/index.js): `src/index.js`
- [Portfolio app](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`

### Portfolio sections

- [Section navigation](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`
- [Introduction](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`
- [Biography](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`
- [Skills showcase](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`
- [Project showcase](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`
- [Contact form](https://github.com/cheikhebeoumar/myportfolio/blob/main/src/App.js): `src/App.js`

### Other components

- **Visitor**
- **Formspree**

## Connections

- React entry → Portfolio app: renders
- Visitor → Section navigation: selects sections
- Portfolio app → Section navigation: renders
- Portfolio app → Introduction: renders
- Portfolio app → Biography: renders
- Portfolio app → Skills showcase: renders
- Portfolio app → Project showcase: renders
- Portfolio app → Contact form: renders
- Contact form → Formspree: submits message