# raphaelamonteiro/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/raphaelamonteiro/portfolio
- Repository: https://github.com/raphaelamonteiro/portfolio

## Overview

This is a bilingual personal portfolio site. A visitor enters through the shared Next.js layout, navigates portfolio sections, and reads profile, skills, project, experience, and service content; the About page also presents hobbies. The sampled source confirms shared translation/theme providers and the About page’s data usage. Other routes and shared components are represented from the tree and README, so their internal wiring is not inferred.

Main entry points: [`contexts/TranslationContext.tsx`](https://github.com/raphaelamonteiro/portfolio/blob/main/contexts/TranslationContext.tsx) (Translation context), [`app/layout.tsx`](https://github.com/raphaelamonteiro/portfolio/blob/main/app/layout.tsx) (Shared layout), [`app/about/page.tsx`](https://github.com/raphaelamonteiro/portfolio/blob/main/app/about/page.tsx) (About profile), [`app/page.tsx`](https://github.com/raphaelamonteiro/portfolio/blob/main/app/page.tsx) (Home page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Site shell"]
  node_layout["Shared layout<br/>[layout.tsx]"]
  node_header["Navigation header<br/>[header.tsx]"]
  node_footer["Site footer<br/>[footer.tsx]"]
  node_themecontrol["Theme toggle<br/>[toggle.tsx]"]
  node_particles["Particle background<br/>[stars.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_home["Home page<br/>[page.tsx]"]
  node_about["About profile<br/>[page.tsx]"]
  node_projects["Projects<br/>[page.tsx]"]
  node_experience["Experience<br/>[page.tsx]"]
  node_services["Services<br/>[page.tsx]"]
  node_contact["Contact<br/>[page.tsx]"]
  node_hobbies["Hobby carousel<br/>[hobby-carousel.tsx]"]
end

subgraph group_state["Presentation state"]
  node_translation["Translation context"]
  node_theme["Theme provider<br/>[theme-provider.tsx]"]
end

subgraph group_assets["Portfolio data"]
  node_english["English strings<br/>[en-US.ts]"]
  node_portuguese["Portuguese strings<br/>[pt-BR.ts]"]
  node_techstack["Technology lists<br/>[techStack.ts]"]
  node_resume["Resume documents"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_footer
node_layout -->|"provides translations"| node_translation
node_layout -->|"provides theme"| node_theme
node_visitor -->|"visits"| node_home
node_visitor -->|"visits"| node_about
node_visitor -->|"visits"| node_projects
node_visitor -->|"visits"| node_experience
node_visitor -->|"visits"| node_services
node_visitor -->|"visits"| node_contact
node_about -->|"reads content"| node_translation
node_projects -->|"reads content"| node_translation
node_experience -->|"reads content"| node_translation
node_services -->|"reads content"| node_translation
node_contact -->|"reads content"| node_translation
node_translation -->|"selects strings"| node_english
node_translation -->|"selects strings"| node_portuguese
node_about -->|"reads lists"| node_techstack
node_about -->|"renders carousel"| node_hobbies
node_themecontrol -->|"changes theme"| node_theme
node_home -.->|"uses background"| node_particles
node_about -.->|"links resume"| node_resume

click node_layout "https://github.com/raphaelamonteiro/portfolio/blob/main/app/layout.tsx"
click node_header "https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/header.tsx"
click node_footer "https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/footer.tsx"
click node_home "https://github.com/raphaelamonteiro/portfolio/blob/main/app/page.tsx"
click node_about "https://github.com/raphaelamonteiro/portfolio/blob/main/app/about/page.tsx"
click node_projects "https://github.com/raphaelamonteiro/portfolio/blob/main/app/projects/page.tsx"
click node_experience "https://github.com/raphaelamonteiro/portfolio/blob/main/app/experience/page.tsx"
click node_services "https://github.com/raphaelamonteiro/portfolio/blob/main/app/services/page.tsx"
click node_contact "https://github.com/raphaelamonteiro/portfolio/blob/main/app/contact/page.tsx"
click node_translation "https://github.com/raphaelamonteiro/portfolio/blob/main/contexts/TranslationContext.tsx"
click node_english "https://github.com/raphaelamonteiro/portfolio/blob/main/locales/en-US.ts"
click node_portuguese "https://github.com/raphaelamonteiro/portfolio/blob/main/locales/pt-BR.ts"
click node_techstack "https://github.com/raphaelamonteiro/portfolio/blob/main/app/data/techStack.ts"
click node_hobbies "https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/ui/hobbies/hobby-carousel.tsx"
click node_theme "https://github.com/raphaelamonteiro/portfolio/blob/main/app/theme-provider.tsx"
click node_themecontrol "https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/ui/theme-switcher/toggle.tsx"
click node_particles "https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/stars.tsx"
click node_resume "https://github.com/raphaelamonteiro/portfolio/tree/main/public/docs"

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_layout,node_header,node_footer,node_themecontrol,node_particles toneBlue
class node_home,node_about,node_projects,node_experience,node_services,node_contact,node_hobbies toneAmber
class node_translation,node_theme toneMint
class node_english,node_portuguese,node_techstack,node_resume toneRose
class node_visitor toneIndigo
```

## Components

### Site shell

- [Shared layout](https://github.com/raphaelamonteiro/portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation header](https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/header.tsx): `app/components/header.tsx`
- [Site footer](https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/footer.tsx): `app/components/footer.tsx`
- [Theme toggle](https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/ui/theme-switcher/toggle.tsx): `app/components/ui/theme-switcher/toggle.tsx`
- [Particle background](https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/stars.tsx): `app/components/stars.tsx`

### Portfolio content

- [Home page](https://github.com/raphaelamonteiro/portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [About profile](https://github.com/raphaelamonteiro/portfolio/blob/main/app/about/page.tsx): `app/about/page.tsx`
- [Projects](https://github.com/raphaelamonteiro/portfolio/blob/main/app/projects/page.tsx): `app/projects/page.tsx`
- [Experience](https://github.com/raphaelamonteiro/portfolio/blob/main/app/experience/page.tsx): `app/experience/page.tsx`
- [Services](https://github.com/raphaelamonteiro/portfolio/blob/main/app/services/page.tsx): `app/services/page.tsx`
- [Contact](https://github.com/raphaelamonteiro/portfolio/blob/main/app/contact/page.tsx): `app/contact/page.tsx`
- [Hobby carousel](https://github.com/raphaelamonteiro/portfolio/blob/main/app/components/ui/hobbies/hobby-carousel.tsx): `app/components/ui/hobbies/hobby-carousel.tsx`

### Presentation state

- [Translation context](https://github.com/raphaelamonteiro/portfolio/blob/main/contexts/TranslationContext.tsx): `contexts/TranslationContext.tsx`
- [Theme provider](https://github.com/raphaelamonteiro/portfolio/blob/main/app/theme-provider.tsx): `app/theme-provider.tsx`

### Portfolio data

- [English strings](https://github.com/raphaelamonteiro/portfolio/blob/main/locales/en-US.ts): `locales/en-US.ts`
- [Portuguese strings](https://github.com/raphaelamonteiro/portfolio/blob/main/locales/pt-BR.ts): `locales/pt-BR.ts`
- [Technology lists](https://github.com/raphaelamonteiro/portfolio/blob/main/app/data/techStack.ts): `app/data/techStack.ts`
- [Resume documents](https://github.com/raphaelamonteiro/portfolio/tree/main/public/docs): `public/docs`

### Other components

- **Visitor**

## Connections

- Visitor → Shared layout: opens site
- Shared layout → Navigation header: renders
- Shared layout → Site footer: renders
- Shared layout → Translation context: provides translations
- Shared layout → Theme provider: provides theme
- Visitor → Home page: visits
- Visitor → About profile: visits
- Visitor → Projects: visits
- Visitor → Experience: visits
- Visitor → Services: visits
- Visitor → Contact: visits
- About profile → Translation context: reads content
- Projects → Translation context: reads content
- Experience → Translation context: reads content
- Services → Translation context: reads content
- Contact → Translation context: reads content
- Translation context → English strings: selects strings
- Translation context → Portuguese strings: selects strings
- About profile → Technology lists: reads lists
- About profile → Hobby carousel: renders carousel
- Theme toggle → Theme provider: changes theme
- Home page → Particle background: uses background
- About profile → Resume documents: links resume