# kwuraa/portifolio-v2 architecture

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

## Overview

Portfólio pessoal em React que apresenta perfil, competências, serviços, formação, experiência e projetos num layout inspirado em terminais, com variantes desktop/mobile. O fluxo principal vai da inicialização e tela de boot à navegação pelas seções; a área de projetos busca repositórios públicos no GitHub e usa dados de fallback em caso de falha. A arquitetura abaixo segue o README e os trechos disponíveis; ligações de componentes não amostrados são incluídas apenas quando documentadas, e não se detalham integrações cuja ligação no código não foi verificada.

Main entry points: [`src/App.jsx`](https://github.com/kwuraa/portifolio-v2/blob/main/src/App.jsx) (App), [`src/pages/Projects.jsx`](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Projects.jsx) (Galeria de projetos), [`src/hooks/useTypewriter.jsx`](https://github.com/kwuraa/portifolio-v2/blob/main/src/hooks/useTypewriter.jsx) (Efeito de digitação), [`src/components/TerminalContents/ExperienceTerminalContent.jsx`](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/ExperienceTerminalContent.jsx) (Experiência)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Aplicação"]
  node_app["App<br/>[App.jsx]"]
  node_boot["Tela de boot<br/>[BootLoader.jsx]"]
end

subgraph group_terminal["Conteúdo terminal"]
  node_desktop["Janelas terminal<br/>[Terminal.jsx]"]
  node_welcome["Apresentação"]
  node_about["Stack tecnológica"]
  node_services["Serviços"]
  node_education["Formação"]
  node_experience["Experiência"]
  node_bio_data["Dados biográficos<br/>[aboutData.js]"]
  node_mobile_terminal["Terminal mobile<br/>[MobileTerminal.jsx]"]
  node_mobile_about["Sobre mobile<br/>[MobileAbout.jsx]"]
  node_typewriter["Efeito de digitação<br/>[useTypewriter.jsx]"]
end

subgraph group_profile["Perfil e navegação"]
  node_navbar["Navegação<br/>[Navbar.jsx]"]
  node_profile["Perfil e contato<br/>[Profile.jsx]"]
  node_cv["Currículo PDF"]
  node_footer["Rodapé<br/>[Footer.jsx]"]
end

subgraph group_projects["Projetos"]
  node_projects["Galeria de projetos<br/>[Projects.jsx]"]
end

node_visitor(("Visitante"))
node_github[("API do GitHub")]
node_microlink(("Preview de sites"))
node_analytics(("Analytics Vercel"))
node_speed(("Speed Insights"))

node_visitor -->|"abre aplicação"| node_app
node_app -->|"exibe no início"| node_boot
node_boot -->|"sinaliza conclusão"| node_app
node_app -->|"renderiza"| node_navbar
node_app -->|"renderiza desktop"| node_desktop
node_app -->|"renderiza mobile"| node_mobile_terminal
node_app -->|"renderiza mobile"| node_mobile_about
node_app -->|"renderiza desktop"| node_profile
node_app -->|"renderiza"| node_projects
node_app -->|"renderiza"| node_footer
node_app -->|"insere conteúdo"| node_welcome
node_app -->|"insere conteúdo"| node_about
node_app -->|"insere conteúdo"| node_services
node_app -->|"insere conteúdo"| node_education
node_app -->|"insere conteúdo"| node_experience
node_desktop -->|"usa animação"| node_typewriter
node_welcome -->|"anima texto"| node_typewriter
node_services -->|"anima texto"| node_typewriter
node_experience -->|"anima texto"| node_typewriter
node_experience -->|"lê experiência"| node_bio_data
node_education -->|"lê formação"| node_bio_data
node_visitor -->|"navega seções"| node_navbar
node_navbar -->|"oferece download"| node_cv
node_profile -->|"oferece download"| node_cv
node_visitor -->|"acessa contato"| node_profile
node_projects -->|"busca repositórios"| node_github
node_github -->|"retorna repositórios"| node_projects
node_projects -.->|"solicita screenshots"| node_microlink
node_visitor -->|"consulta projetos"| node_projects
node_app -->|"monta integração"| node_analytics
node_app -->|"monta integração"| node_speed

click node_app "https://github.com/kwuraa/portifolio-v2/blob/main/src/App.jsx"
click node_boot "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/BootLoader.jsx"
click node_navbar "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Navbar.jsx"
click node_desktop "https://github.com/kwuraa/portifolio-v2/blob/main/src/components/Terminal.jsx"
click node_welcome "https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/WelcomeTerminalContent.jsx"
click node_about "https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/AboutTerminalContent.jsx"
click node_services "https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/ServicesTerminalContent.jsx"
click node_education "https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/EducationTerminalContent.jsx"
click node_experience "https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/ExperienceTerminalContent.jsx"
click node_bio_data "https://github.com/kwuraa/portifolio-v2/blob/main/src/data/aboutData.js"
click node_mobile_terminal "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/MobileTerminal.jsx"
click node_mobile_about "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/MobileAbout.jsx"
click node_typewriter "https://github.com/kwuraa/portifolio-v2/blob/main/src/hooks/useTypewriter.jsx"
click node_profile "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Profile.jsx"
click node_cv "https://github.com/kwuraa/portifolio-v2/blob/main/public/Matheus_Kawamura_CV.pdf"
click node_footer "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Footer.jsx"
click node_projects "https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Projects.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_boot,node_microlink toneBlue
class node_desktop,node_welcome,node_about,node_services,node_education,node_experience,node_bio_data,node_mobile_terminal,node_mobile_about,node_typewriter,node_github toneAmber
class node_navbar,node_profile,node_cv,node_footer toneMint
class node_projects toneRose
class node_visitor,node_analytics,node_speed toneIndigo
```

## Components

### Aplicação

- [App](https://github.com/kwuraa/portifolio-v2/blob/main/src/App.jsx): `src/App.jsx`
- [Tela de boot](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/BootLoader.jsx): `src/pages/BootLoader.jsx`

### Conteúdo terminal

- [Janelas terminal](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/Terminal.jsx): `src/components/Terminal.jsx`
- [Apresentação](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/WelcomeTerminalContent.jsx): `src/components/TerminalContents/WelcomeTerminalContent.jsx`
- [Stack tecnológica](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/AboutTerminalContent.jsx): `src/components/TerminalContents/AboutTerminalContent.jsx`
- [Serviços](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/ServicesTerminalContent.jsx): `src/components/TerminalContents/ServicesTerminalContent.jsx`
- [Formação](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/EducationTerminalContent.jsx): `src/components/TerminalContents/EducationTerminalContent.jsx`
- [Experiência](https://github.com/kwuraa/portifolio-v2/blob/main/src/components/TerminalContents/ExperienceTerminalContent.jsx): `src/components/TerminalContents/ExperienceTerminalContent.jsx`
- [Dados biográficos](https://github.com/kwuraa/portifolio-v2/blob/main/src/data/aboutData.js): `src/data/aboutData.js`
- [Terminal mobile](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/MobileTerminal.jsx): `src/pages/MobileTerminal.jsx`
- [Sobre mobile](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/MobileAbout.jsx): `src/pages/MobileAbout.jsx`
- [Efeito de digitação](https://github.com/kwuraa/portifolio-v2/blob/main/src/hooks/useTypewriter.jsx): `src/hooks/useTypewriter.jsx`

### Perfil e navegação

- [Navegação](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Navbar.jsx): `src/pages/Navbar.jsx`
- [Perfil e contato](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Profile.jsx): `src/pages/Profile.jsx`
- [Currículo PDF](https://github.com/kwuraa/portifolio-v2/blob/main/public/Matheus_Kawamura_CV.pdf): `public/Matheus_Kawamura_CV.pdf`
- [Rodapé](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Footer.jsx): `src/pages/Footer.jsx`

### Projetos

- [Galeria de projetos](https://github.com/kwuraa/portifolio-v2/blob/main/src/pages/Projects.jsx): `src/pages/Projects.jsx`

### Other components

- **Visitante**
- **API do GitHub**
- **Preview de sites**
- **Analytics Vercel**
- **Speed Insights**

## Connections

- Visitante → App: abre aplicação
- App → Tela de boot: exibe no início
- Tela de boot → App: sinaliza conclusão
- App → Navegação: renderiza
- App → Janelas terminal: renderiza desktop
- App → Terminal mobile: renderiza mobile
- App → Sobre mobile: renderiza mobile
- App → Perfil e contato: renderiza desktop
- App → Galeria de projetos: renderiza
- App → Rodapé: renderiza
- App → Apresentação: insere conteúdo
- App → Stack tecnológica: insere conteúdo
- App → Serviços: insere conteúdo
- App → Formação: insere conteúdo
- App → Experiência: insere conteúdo
- Janelas terminal → Efeito de digitação: usa animação
- Apresentação → Efeito de digitação: anima texto
- Serviços → Efeito de digitação: anima texto
- Experiência → Efeito de digitação: anima texto
- Experiência → Dados biográficos: lê experiência
- Formação → Dados biográficos: lê formação
- Visitante → Navegação: navega seções
- Navegação → Currículo PDF: oferece download
- Perfil e contato → Currículo PDF: oferece download
- Visitante → Perfil e contato: acessa contato
- Galeria de projetos → API do GitHub: busca repositórios
- API do GitHub → Galeria de projetos: retorna repositórios
- Galeria de projetos → Preview de sites: solicita screenshots
- Visitante → Galeria de projetos: consulta projetos
- App → Analytics Vercel: monta integração
- App → Speed Insights: monta integração