# edilson-nantes/portifolio-edilson architecture

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

- Interactive diagram: https://gitdiagram.com/edilson-nantes/portifolio-edilson
- Repository: https://github.com/edilson-nantes/portifolio-edilson

## Overview

This is a bilingual personal portfolio that presents Edilson Nantes’s profile, services, work, experience, skills, and contact options. A visitor opens the React page, browses its sections, can switch Portuguese/English in the header, and can follow contact links. The main page composes the sections and reads their text and contact details from data modules. README documents responsive navigation and reduced-motion-aware animations; the sampled App source also shows reveal behavior. Section rendering is consolidated in App.jsx rather than implemented as separate modules.

Main entry points: [`src/App.jsx`](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx) (Portfolio page), [`src/main.jsx`](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/main.jsx) (React entry), [`src/components/Header.jsx`](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/components/Header.jsx) (Header navigation), [`src/index.css`](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/index.css) (Global styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Page presentation"]
  node_entry["React entry<br/>[main.jsx]"]
  node_page["Portfolio page<br/>[App.jsx]"]
  node_header["Header navigation<br/>[Header.jsx]"]
  node_globalstyle["Global styles<br/>[index.css]"]
  node_pagestyle["Page styles<br/>[App.css]"]
end

subgraph group_portfolio["Portfolio content"]
  node_profile["Profile<br/>[App.jsx]"]
  node_services["Services<br/>[App.jsx]"]
  node_process["Work process<br/>[App.jsx]"]
  node_projects["Projects<br/>[App.jsx]"]
  node_experience["Experience<br/>[App.jsx]"]
  node_skills["Skills<br/>[App.jsx]"]
  node_content["Bilingual content<br/>[content.jsx]"]
end

subgraph group_contact["Contact channels"]
  node_contactsection["Contact section<br/>[App.jsx]"]
  node_contactdata["Contact details<br/>[contact.js]"]
end

node_visitor(("Visitor"))
node_email["Email service"]
node_whatsapp["WhatsApp"]
node_linkedin["LinkedIn"]
node_github["GitHub"]

node_visitor -.->|"opens site"| node_entry
node_entry -->|"renders"| node_page
node_page -->|"renders"| node_header
node_page -->|"selects language text"| node_content
node_page -->|"reads details"| node_contactdata
node_page -->|"renders"| node_profile
node_page -->|"renders"| node_services
node_page -->|"renders"| node_process
node_page -->|"renders"| node_projects
node_page -->|"renders"| node_experience
node_page -->|"renders"| node_skills
node_page -->|"renders"| node_contactsection
node_entry -->|"imports styles"| node_globalstyle
node_page -->|"imports styles"| node_pagestyle
node_contactsection -->|"links to"| node_email
node_contactsection -->|"links to"| node_whatsapp
node_contactsection -->|"links to"| node_linkedin
node_contactsection -->|"links to"| node_github

click node_entry "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/main.jsx"
click node_page "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_header "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/components/Header.jsx"
click node_globalstyle "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/index.css"
click node_pagestyle "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.css"
click node_profile "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_services "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_process "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_projects "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_experience "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_skills "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_content "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/data/content.jsx"
click node_contactsection "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx"
click node_contactdata "https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/data/contact.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_page,node_header,node_globalstyle,node_pagestyle toneBlue
class node_profile,node_services,node_process,node_projects,node_experience,node_skills,node_content toneAmber
class node_contactsection,node_contactdata toneMint
class node_visitor,node_email,node_whatsapp,node_linkedin,node_github toneIndigo
```

## Components

### Page presentation

- [React entry](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/main.jsx): `src/main.jsx`
- [Portfolio page](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Header navigation](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Global styles](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/index.css): `src/index.css`
- [Page styles](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.css): `src/App.css`

### Portfolio content

- [Profile](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Services](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Work process](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Projects](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Experience](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Skills](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Bilingual content](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/data/content.jsx): `src/data/content.jsx`

### Contact channels

- [Contact section](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/App.jsx): `src/App.jsx`
- [Contact details](https://github.com/edilson-nantes/portifolio-edilson/blob/main/src/data/contact.js): `src/data/contact.js`

### Other components

- **Visitor**
- **Email service**
- **WhatsApp**
- **LinkedIn**
- **GitHub**

## Connections

- Visitor → React entry: opens site
- React entry → Portfolio page: renders (evidence: `src/main.jsx`)
- Portfolio page → Header navigation: renders (evidence: `src/App.jsx`)
- Portfolio page → Bilingual content: selects language text (evidence: `src/App.jsx`)
- Portfolio page → Contact details: reads details (evidence: `src/App.jsx`)
- Portfolio page → Profile: renders (evidence: `src/App.jsx`)
- Portfolio page → Services: renders (evidence: `src/App.jsx`)
- Portfolio page → Work process: renders (evidence: `src/App.jsx`)
- Portfolio page → Projects: renders (evidence: `src/App.jsx`)
- Portfolio page → Experience: renders (evidence: `src/App.jsx`)
- Portfolio page → Skills: renders (evidence: `src/App.jsx`)
- Portfolio page → Contact section: renders (evidence: `src/App.jsx`)
- React entry → Global styles: imports styles (evidence: `src/main.jsx`)
- Portfolio page → Page styles: imports styles (evidence: `src/App.jsx`)
- Contact section → Email service: links to (evidence: `src/App.jsx`)
- Contact section → WhatsApp: links to (evidence: `src/App.jsx`)
- Contact section → LinkedIn: links to (evidence: `src/App.jsx`)
- Contact section → GitHub: links to (evidence: `src/App.jsx`)