# joaoptoaldo/meu-portfolio architecture
> Architecture diagram of the GitHub repository joaoptoaldo/meu-portfolio, 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/joaoptoaldo/meu-portfolio
- Repository: https://github.com/joaoptoaldo/meu-portfolio
## Overview
Este é um portfólio pessoal apresentado como uma IDE interativa: a pessoa navega pelo Explorer ou por ferramentas de busca/atalho, abre arquivos simulados e consulta seções sobre perfil, habilidades, projetos, experiência, formação e contato. A aplicação também oferece terminal simulado, histórico de commits, personalização, estado persistido e navegação móvel. As relações abaixo se limitam aos imports, chamadas e capacidades explicitamente descritos nos trechos e no README; subsistemas não amostrados aparecem com caminhos respaldados pela árvore, sem conexões presumidas.
Main entry points: [`src/components/layout/Workspace.jsx`](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Workspace.jsx) (Workspace IDE), [`src/data/searchIndex.js`](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/searchIndex.js) (Índice de busca), [`src/hooks/useGlobalShortcuts.js`](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/hooks/useGlobalShortcuts.js) (Atalhos globais), [`src/hooks/useWorkspace.js`](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/hooks/useWorkspace.js) (Hook de workspace)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_workspace["Workspace e estado"]
node_app["Aplicação raiz
[App.jsx]"]
node_workspace_ui["Workspace IDE
[Workspace.jsx]"]
node_provider["Estado do workspace"]
node_context["Contexto"]
node_workspace_hook["Hook de workspace
[useWorkspace.js]"]
end
subgraph group_navigation["Navegação IDE"]
node_editor["Editor e abas
[Editor.jsx]"]
node_explorer["Explorer
[Explorer.jsx]"]
node_search_view["Busca global
[SearchView.jsx]"]
node_mobile["Navegação móvel
[MobileNav.jsx]"]
end
subgraph group_portfolio["Conteúdo do portfólio"]
node_search_index["Índice de busca
[searchIndex.js]"]
node_sections["Seções de conteúdo"]
node_profile_data["Perfil e apresentação
[profile.js]"]
node_projects_data["Projetos
[projects.js]"]
node_skills_data["Habilidades
[skills.js]"]
node_experience_data["Experiência
[experience.js]"]
node_education_data["Formação
[education.js]"]
node_contact_data["Contato
[contact.js]"]
end
subgraph group_tools["Ferramentas e preferências"]
node_terminal["Terminal simulado
[Terminal.jsx]"]
node_scm["Histórico de commits
[ScmView.jsx]"]
node_shortcuts["Atalhos globais"]
node_overlays["Paleta e overlays
[CommandPalette.jsx]"]
node_search_file["Busca no arquivo
[SearchInFile.jsx]"]
node_quick_open["Quick Open
[QuickOpen.jsx]"]
node_symbol_nav["Go to Symbol
[GoToSymbol.jsx]"]
node_preferences["Configurações"]
end
subgraph group_shared["Persistência e UI"]
node_persist["Persistência local
[persist.js]"]
end
node_visitor(("Visitante"))
node_visitor -->|"acessa"| node_app
node_app -->|"envolve"| node_provider
node_app -->|"monta"| node_workspace_ui
node_provider -->|"usa"| node_context
node_provider -->|"persiste estado"| node_persist
node_workspace_ui -->|"consulta estado"| node_workspace_hook
node_workspace_hook -->|"lê contexto"| node_context
node_workspace_ui -->|"renderiza"| node_editor
node_workspace_ui -->|"renderiza"| node_explorer
node_workspace_ui -->|"registra atalhos"| node_shortcuts
node_workspace_ui -->|"renderiza"| node_overlays
node_workspace_ui -->|"renderiza"| node_quick_open
node_workspace_ui -->|"renderiza"| node_symbol_nav
node_workspace_ui -->|"renderiza"| node_search_file
node_workspace_ui -->|"renderiza"| node_preferences
node_workspace_ui -.->|"renderiza painel"| node_terminal
node_workspace_ui -.->|"renderiza view"| node_scm
node_workspace_ui -.->|"adapta navegação"| node_mobile
node_search_view -->|"consulta"| node_search_index
node_search_view -->|"abre resultado"| node_workspace_hook
node_search_index -->|"indexa conteúdo"| node_profile_data
node_search_index -->|"indexa conteúdo"| node_projects_data
node_search_index -->|"indexa conteúdo"| node_skills_data
node_search_index -->|"indexa conteúdo"| node_experience_data
node_search_index -->|"indexa conteúdo"| node_education_data
node_search_index -->|"indexa conteúdo"| node_contact_data
node_editor -.->|"apresenta seção"| node_sections
node_sections -->|"apresenta projetos"| node_projects_data
node_sections -->|"apresenta habilidades"| node_skills_data
node_sections -->|"apresenta perfil"| node_profile_data
node_terminal -->|"usa dados"| node_profile_data
node_terminal -->|"consulta estado"| node_workspace_hook
node_shortcuts -->|"aciona ações"| node_workspace_hook
node_shortcuts -.->|"abre busca"| node_search_file
node_shortcuts -.->|"abre modal"| node_quick_open
node_shortcuts -.->|"abre navegação"| node_symbol_nav
node_shortcuts -.->|"aciona paleta"| node_overlays
click node_app "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/App.jsx"
click node_workspace_ui "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Workspace.jsx"
click node_provider "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/context/WorkspaceProvider.jsx"
click node_context "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/context/WorkspaceContext.js"
click node_workspace_hook "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/hooks/useWorkspace.js"
click node_editor "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/Editor.jsx"
click node_explorer "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Explorer.jsx"
click node_search_view "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/SearchView.jsx"
click node_search_index "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/searchIndex.js"
click node_sections "https://github.com/joaoptoaldo/meu-portfolio/tree/main/src/components/sections"
click node_profile_data "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/profile.js"
click node_projects_data "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/projects.js"
click node_skills_data "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/skills.js"
click node_experience_data "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/experience.js"
click node_education_data "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/education.js"
click node_contact_data "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/contact.js"
click node_terminal "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Terminal.jsx"
click node_scm "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/ScmView.jsx"
click node_shortcuts "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/hooks/useGlobalShortcuts.js"
click node_overlays "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/CommandPalette.jsx"
click node_search_file "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/SearchInFile.jsx"
click node_quick_open "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/QuickOpen.jsx"
click node_symbol_nav "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/GoToSymbol.jsx"
click node_preferences "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/SettingsOverlay.jsx"
click node_persist "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/utils/persist.js"
click node_mobile "https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/MobileNav.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_app,node_workspace_ui,node_provider,node_context,node_workspace_hook toneBlue
class node_editor,node_explorer,node_search_view,node_mobile toneAmber
class node_search_index,node_sections,node_profile_data,node_projects_data,node_skills_data,node_experience_data,node_education_data,node_contact_data toneMint
class node_terminal,node_scm,node_shortcuts,node_overlays,node_search_file,node_quick_open,node_symbol_nav,node_preferences toneRose
class node_persist,node_visitor toneIndigo
```
## Components
### Workspace e estado
- [Aplicação raiz](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Workspace IDE](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Workspace.jsx): `src/components/layout/Workspace.jsx`
- [Estado do workspace](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/context/WorkspaceProvider.jsx): `src/context/WorkspaceProvider.jsx`
- [Contexto](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/context/WorkspaceContext.js): `src/context/WorkspaceContext.js`
- [Hook de workspace](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/hooks/useWorkspace.js): `src/hooks/useWorkspace.js`
### Navegação IDE
- [Editor e abas](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/Editor.jsx): `src/components/editor/Editor.jsx`
- [Explorer](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Explorer.jsx): `src/components/layout/Explorer.jsx`
- [Busca global](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/SearchView.jsx): `src/components/layout/SearchView.jsx`
- [Navegação móvel](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/MobileNav.jsx): `src/components/layout/MobileNav.jsx`
### Conteúdo do portfólio
- [Índice de busca](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/searchIndex.js): `src/data/searchIndex.js`
- [Seções de conteúdo](https://github.com/joaoptoaldo/meu-portfolio/tree/main/src/components/sections): `src/components/sections`
- [Perfil e apresentação](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/profile.js): `src/data/profile.js`
- [Projetos](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/projects.js): `src/data/projects.js`
- [Habilidades](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/skills.js): `src/data/skills.js`
- [Experiência](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/experience.js): `src/data/experience.js`
- [Formação](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/education.js): `src/data/education.js`
- [Contato](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/data/contact.js): `src/data/contact.js`
### Ferramentas e preferências
- [Terminal simulado](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/Terminal.jsx): `src/components/layout/Terminal.jsx`
- [Histórico de commits](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/ScmView.jsx): `src/components/layout/ScmView.jsx`
- [Atalhos globais](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/hooks/useGlobalShortcuts.js): `src/hooks/useGlobalShortcuts.js`
- [Paleta e overlays](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/CommandPalette.jsx): `src/components/editor/CommandPalette.jsx`
- [Busca no arquivo](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/SearchInFile.jsx): `src/components/editor/SearchInFile.jsx`
- [Quick Open](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/QuickOpen.jsx): `src/components/editor/QuickOpen.jsx`
- [Go to Symbol](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/editor/GoToSymbol.jsx): `src/components/editor/GoToSymbol.jsx`
- [Configurações](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/components/layout/SettingsOverlay.jsx): `src/components/layout/SettingsOverlay.jsx`
### Persistência e UI
- [Persistência local](https://github.com/joaoptoaldo/meu-portfolio/blob/main/src/utils/persist.js): `src/utils/persist.js`
### Other components
- **Visitante**
## Connections
- Visitante → Aplicação raiz: acessa (evidence: `README.md`)
- Aplicação raiz → Estado do workspace: envolve (evidence: `src/App.jsx`)
- Aplicação raiz → Workspace IDE: monta (evidence: `src/App.jsx`)
- Estado do workspace → Contexto: usa (evidence: `src/context/WorkspaceProvider.jsx`)
- Estado do workspace → Persistência local: persiste estado (evidence: `src/context/WorkspaceProvider.jsx`)
- Workspace IDE → Hook de workspace: consulta estado (evidence: `src/components/layout/Workspace.jsx`)
- Hook de workspace → Contexto: lê contexto (evidence: `src/hooks/useWorkspace.js`)
- Workspace IDE → Editor e abas: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Explorer: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Atalhos globais: registra atalhos (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Paleta e overlays: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Quick Open: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Go to Symbol: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Busca no arquivo: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Configurações: renderiza (evidence: `src/components/layout/Workspace.jsx`)
- Workspace IDE → Terminal simulado: renderiza painel (evidence: `README.md`)
- Workspace IDE → Histórico de commits: renderiza view (evidence: `README.md`)
- Workspace IDE → Navegação móvel: adapta navegação (evidence: `README.md`)
- Busca global → Índice de busca: consulta (evidence: `src/components/layout/SearchView.jsx`)
- Busca global → Hook de workspace: abre resultado (evidence: `src/components/layout/SearchView.jsx`)
- Índice de busca → Perfil e apresentação: indexa conteúdo (evidence: `src/data/searchIndex.js`)
- Índice de busca → Projetos: indexa conteúdo (evidence: `src/data/searchIndex.js`)
- Índice de busca → Habilidades: indexa conteúdo (evidence: `src/data/searchIndex.js`)
- Índice de busca → Experiência: indexa conteúdo (evidence: `src/data/searchIndex.js`)
- Índice de busca → Formação: indexa conteúdo (evidence: `src/data/searchIndex.js`)
- Índice de busca → Contato: indexa conteúdo (evidence: `src/data/searchIndex.js`)
- Editor e abas → Seções de conteúdo: apresenta seção (evidence: `README.md`)
- Seções de conteúdo → Projetos: apresenta projetos (evidence: `src/components/sections/Projects.jsx`)
- Seções de conteúdo → Habilidades: apresenta habilidades (evidence: `src/components/sections/Skills.jsx`)
- Seções de conteúdo → Perfil e apresentação: apresenta perfil (evidence: `src/components/sections/Welcome.jsx`)
- Terminal simulado → Perfil e apresentação: usa dados (evidence: `src/components/layout/Terminal.jsx`)
- Terminal simulado → Hook de workspace: consulta estado (evidence: `src/components/layout/Terminal.jsx`)
- Atalhos globais → Hook de workspace: aciona ações (evidence: `src/hooks/useGlobalShortcuts.js`)
- Atalhos globais → Busca no arquivo: abre busca (evidence: `src/hooks/useGlobalShortcuts.js`)
- Atalhos globais → Quick Open: abre modal (evidence: `src/hooks/useGlobalShortcuts.js`)
- Atalhos globais → Go to Symbol: abre navegação (evidence: `src/hooks/useGlobalShortcuts.js`)
- Atalhos globais → Paleta e overlays: aciona paleta (evidence: `src/hooks/useGlobalShortcuts.js`)