# samueljmacedo/portfolio architecture

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

## Overview

This is a React personal portfolio/resume site with a second Career Hub route for editing profile JSON and viewing resume, LinkedIn, and website-bio outputs. The primary visitor workflow routes into a profile landing page, then presents biography, career history, skills, languages, and recommendations. The sampled source confirms the top-level composition and several data consumers; unsampled feature wiring is omitted where it cannot be verified.

Main entry points: [`src/content/content.js`](https://github.com/samueljmacedo/portfolio/blob/main/src/content/content.js) (Portfolio content), [`src/centralHub/CentralHub.jsx`](https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx) (Profile editor), [`src/data/info.js`](https://github.com/samueljmacedo/portfolio/blob/main/src/data/info.js) (Sample profile), [`src/App.js`](https://github.com/samueljmacedo/portfolio/blob/main/src/App.js) (App routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App routing"]
  node_app["App routes<br/>[App.js]"]
end

subgraph group_portfolio["Portfolio page"]
  node_main["Profile header<br/>[main.js]"]
  node_content["Portfolio content<br/>[content.js]"]
  node_fade["Fade sections<br/>[fadeInSection.js]"]
  node_section["Content section<br/>[section.js]"]
  node_timeline["Career timeline<br/>[timeline.js]"]
  node_title["Section title<br/>[title.js]"]
  node_button["Timeline controls<br/>[button.js]"]
  node_tags["Skills tags<br/>[tags.js]"]
  node_languages["Language levels"]
  node_progress["Progress display<br/>[progressBar.js]"]
  node_recommendations["Testimonials carousel<br/>[recommentations.js]"]
end

subgraph group_career["Career Hub"]
  node_hub["Profile editor<br/>[CentralHub.jsx]"]
  node_resume["Resume output<br/>[CentralHub.jsx]"]
  node_linkedin["LinkedIn output<br/>[CentralHub.jsx]"]
  node_bio["Website bio<br/>[CentralHub.jsx]"]
end

subgraph group_profiledata["Profile data"]
  node_profile["Sample profile<br/>[info.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"renders landing"| node_main
node_app -->|"renders landing"| node_content
node_app -->|"routes export"| node_hub
node_content -->|"wraps sections"| node_fade
node_content -->|"renders sections"| node_section
node_content -->|"renders"| node_timeline
node_content -->|"renders"| node_tags
node_content -->|"renders"| node_languages
node_content -->|"renders"| node_recommendations
node_timeline -->|"renders"| node_title
node_timeline -->|"renders"| node_button
node_languages -->|"renders"| node_progress
node_main -->|"reads"| node_profile
node_content -->|"reads"| node_profile
node_timeline -->|"reads"| node_profile
node_languages -->|"reads"| node_profile
node_hub -->|"initializes editor"| node_profile
node_hub -->|"selects output"| node_resume
node_hub -->|"selects output"| node_linkedin
node_hub -->|"selects output"| node_bio

click node_app "https://github.com/samueljmacedo/portfolio/blob/main/src/App.js"
click node_main "https://github.com/samueljmacedo/portfolio/blob/main/src/main/main.js"
click node_content "https://github.com/samueljmacedo/portfolio/blob/main/src/content/content.js"
click node_fade "https://github.com/samueljmacedo/portfolio/blob/main/src/section/fadeInSection.js"
click node_section "https://github.com/samueljmacedo/portfolio/blob/main/src/section/section.js"
click node_timeline "https://github.com/samueljmacedo/portfolio/blob/main/src/timeline/timeline.js"
click node_title "https://github.com/samueljmacedo/portfolio/blob/main/src/title/title.js"
click node_button "https://github.com/samueljmacedo/portfolio/blob/main/src/button/button.js"
click node_tags "https://github.com/samueljmacedo/portfolio/blob/main/src/tags/tags.js"
click node_languages "https://github.com/samueljmacedo/portfolio/blob/main/src/progressBar/languageProficiency.js"
click node_progress "https://github.com/samueljmacedo/portfolio/blob/main/src/progressBar/progressBar.js"
click node_recommendations "https://github.com/samueljmacedo/portfolio/blob/main/src/recommendations/recommentations.js"
click node_hub "https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx"
click node_resume "https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx"
click node_linkedin "https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx"
click node_bio "https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx"
click node_profile "https://github.com/samueljmacedo/portfolio/blob/main/src/data/info.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_app toneBlue
class node_main,node_content,node_fade,node_section,node_timeline,node_title,node_button,node_tags,node_languages,node_progress,node_recommendations toneAmber
class node_hub,node_resume,node_linkedin,node_bio toneMint
class node_profile toneRose
class node_visitor toneIndigo
```

## Components

### App routing

- [App routes](https://github.com/samueljmacedo/portfolio/blob/main/src/App.js): `src/App.js`

### Portfolio page

- [Profile header](https://github.com/samueljmacedo/portfolio/blob/main/src/main/main.js): `src/main/main.js`
- [Portfolio content](https://github.com/samueljmacedo/portfolio/blob/main/src/content/content.js): `src/content/content.js`
- [Fade sections](https://github.com/samueljmacedo/portfolio/blob/main/src/section/fadeInSection.js): `src/section/fadeInSection.js`
- [Content section](https://github.com/samueljmacedo/portfolio/blob/main/src/section/section.js): `src/section/section.js`
- [Career timeline](https://github.com/samueljmacedo/portfolio/blob/main/src/timeline/timeline.js): `src/timeline/timeline.js`
- [Section title](https://github.com/samueljmacedo/portfolio/blob/main/src/title/title.js): `src/title/title.js`
- [Timeline controls](https://github.com/samueljmacedo/portfolio/blob/main/src/button/button.js): `src/button/button.js`
- [Skills tags](https://github.com/samueljmacedo/portfolio/blob/main/src/tags/tags.js): `src/tags/tags.js`
- [Language levels](https://github.com/samueljmacedo/portfolio/blob/main/src/progressBar/languageProficiency.js): `src/progressBar/languageProficiency.js`
- [Progress display](https://github.com/samueljmacedo/portfolio/blob/main/src/progressBar/progressBar.js): `src/progressBar/progressBar.js`
- [Testimonials carousel](https://github.com/samueljmacedo/portfolio/blob/main/src/recommendations/recommentations.js): `src/recommendations/recommentations.js`

### Career Hub

- [Profile editor](https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx): `src/centralHub/CentralHub.jsx`
- [Resume output](https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx): `src/centralHub/CentralHub.jsx`
- [LinkedIn output](https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx): `src/centralHub/CentralHub.jsx`
- [Website bio](https://github.com/samueljmacedo/portfolio/blob/main/src/centralHub/CentralHub.jsx): `src/centralHub/CentralHub.jsx`

### Profile data

- [Sample profile](https://github.com/samueljmacedo/portfolio/blob/main/src/data/info.js): `src/data/info.js`

### Other components

- **Visitor**

## Connections

- Visitor → App routes: opens
- App routes → Profile header: renders landing
- App routes → Portfolio content: renders landing
- App routes → Profile editor: routes export
- Portfolio content → Fade sections: wraps sections
- Portfolio content → Content section: renders sections
- Portfolio content → Career timeline: renders
- Portfolio content → Skills tags: renders
- Portfolio content → Language levels: renders
- Portfolio content → Testimonials carousel: renders
- Career timeline → Section title: renders
- Career timeline → Timeline controls: renders
- Language levels → Progress display: renders
- Profile header → Sample profile: reads
- Portfolio content → Sample profile: reads
- Career timeline → Sample profile: reads
- Language levels → Sample profile: reads
- Profile editor → Sample profile: initializes editor
- Profile editor → Resume output: selects output
- Profile editor → LinkedIn output: selects output
- Profile editor → Website bio: selects output