# joaoluisdutra/portfolio architecture

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

## Overview

This is a static personal portfolio site: visitors browse the portfolio, project case studies, credentials, research and education pages. The sampled JavaScript adds interactive gallery, navigation, marker, skill-animation and back-to-top behaviors. The README is empty, and HTML files were not sampled, so page-to-page links and script-loading relationships are not asserted.

Main entry points: [`script.js`](https://github.com/joaoluisdutra/portfolio/blob/main/script.js) (Site interactions), [`back-to-top.js`](https://github.com/joaoluisdutra/portfolio/blob/main/back-to-top.js) (Back-to-top behavior), [`index.html`](https://github.com/joaoluisdutra/portfolio/blob/main/index.html) (Portfolio home), [`projetos.html`](https://github.com/joaoluisdutra/portfolio/blob/main/projetos.html) (Projects index)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_overview["Portfolio overview"]
  node_home["Portfolio home<br/>[index.html]"]
  node_projects["Projects index<br/>[projetos.html]"]
end

subgraph group_work["Project case studies"]
  node_ampara["App Ampara"]
  node_yannick["Yannick course"]
  node_google["Dev Alura Google"]
  node_dropit["Dropit"]
  node_ferdicakes["Ferdicakes"]
  node_imersao["Alura front-end"]
  node_jornada["EBAC design journey"]
  node_petly["Petly<br/>[projeto-petly.html]"]
  node_product["Product page"]
  node_adidas["Adidas slider"]
  node_social1["Social media content 1"]
  node_social2["Social media content 2"]
  node_tinybites["Tiny Bites"]
  node_tribute["Tribute page"]
end

subgraph group_profile["Profile and credentials"]
  node_exploration["Exploratory research"]
  node_certificates["Certifications<br/>[certificacoes.html]"]
  node_education["Information systems"]
end

subgraph group_interaction["Interface behavior"]
  node_sitejs["Site interactions<br/>[script.js]"]
  node_gallery["Project gallery"]
  node_sidebar["Navigation sidebar"]
  node_marker["Education marker popup"]
  node_skills["Skill animations"]
  node_topjs["Back-to-top behavior<br/>[back-to-top.js]"]
  node_topbutton["Back-to-top control"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_home
node_visitor -->|"views"| node_projects
node_visitor -->|"views"| node_exploration
node_visitor -->|"views"| node_certificates
node_visitor -->|"views"| node_education
node_visitor -->|"views"| node_ampara
node_visitor -->|"views"| node_yannick
node_visitor -->|"views"| node_google
node_visitor -->|"views"| node_dropit
node_visitor -->|"views"| node_ferdicakes
node_visitor -->|"views"| node_imersao
node_visitor -->|"views"| node_jornada
node_visitor -->|"views"| node_petly
node_visitor -->|"views"| node_product
node_visitor -->|"views"| node_adidas
node_visitor -->|"views"| node_social1
node_visitor -->|"views"| node_social2
node_visitor -->|"views"| node_tinybites
node_visitor -->|"views"| node_tribute
node_sitejs -->|"updates"| node_gallery
node_sitejs -->|"controls"| node_sidebar
node_sitejs -->|"positions"| node_marker
node_sitejs -->|"animates"| node_skills
node_topjs -->|"creates"| node_topbutton
node_topbutton -->|"scrolls page"| node_visitor

click node_home "https://github.com/joaoluisdutra/portfolio/blob/main/index.html"
click node_projects "https://github.com/joaoluisdutra/portfolio/blob/main/projetos.html"
click node_exploration "https://github.com/joaoluisdutra/portfolio/blob/main/pesquisa-exploratoria.html"
click node_certificates "https://github.com/joaoluisdutra/portfolio/blob/main/certificacoes.html"
click node_education "https://github.com/joaoluisdutra/portfolio/blob/main/sistemas-de-informacao-unibave.html"
click node_ampara "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-app-ampara.html"
click node_yannick "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-awwwards-yannick-course.html"
click node_google "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-dev-alura-google.html"
click node_dropit "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-dropit.html"
click node_ferdicakes "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-ferdicakes.html"
click node_imersao "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-imersao-front-end-alura.html"
click node_jornada "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-jornada-design-ebac.html"
click node_petly "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-petly.html"
click node_product "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-product-page.html"
click node_adidas "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-slider-adidas.html"
click node_social1 "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-social-media-content-1.html"
click node_social2 "https://github.com/joaoluisdutra/portfolio/blob/main/projeto_social_media_content_2.html"
click node_tinybites "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-tiny-bites.html"
click node_tribute "https://github.com/joaoluisdutra/portfolio/blob/main/projeto-tribute-page.html"
click node_sitejs "https://github.com/joaoluisdutra/portfolio/blob/main/script.js"
click node_topjs "https://github.com/joaoluisdutra/portfolio/blob/main/back-to-top.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_home,node_projects toneBlue
class node_ampara,node_yannick,node_google,node_dropit,node_ferdicakes,node_imersao,node_jornada,node_petly,node_product,node_adidas,node_social1,node_social2,node_tinybites,node_tribute toneAmber
class node_exploration,node_certificates,node_education toneMint
class node_sitejs,node_gallery,node_sidebar,node_marker,node_skills,node_topjs,node_topbutton toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio overview

- [Portfolio home](https://github.com/joaoluisdutra/portfolio/blob/main/index.html): `index.html`
- [Projects index](https://github.com/joaoluisdutra/portfolio/blob/main/projetos.html): `projetos.html`

### Project case studies

- [App Ampara](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-app-ampara.html): `projeto-app-ampara.html`
- [Yannick course](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-awwwards-yannick-course.html): `projeto-awwwards-yannick-course.html`
- [Dev Alura Google](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-dev-alura-google.html): `projeto-dev-alura-google.html`
- [Dropit](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-dropit.html): `projeto-dropit.html`
- [Ferdicakes](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-ferdicakes.html): `projeto-ferdicakes.html`
- [Alura front-end](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-imersao-front-end-alura.html): `projeto-imersao-front-end-alura.html`
- [EBAC design journey](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-jornada-design-ebac.html): `projeto-jornada-design-ebac.html`
- [Petly](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-petly.html): `projeto-petly.html`
- [Product page](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-product-page.html): `projeto-product-page.html`
- [Adidas slider](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-slider-adidas.html): `projeto-slider-adidas.html`
- [Social media content 1](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-social-media-content-1.html): `projeto-social-media-content-1.html`
- [Social media content 2](https://github.com/joaoluisdutra/portfolio/blob/main/projeto_social_media_content_2.html): `projeto_social_media_content_2.html`
- [Tiny Bites](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-tiny-bites.html): `projeto-tiny-bites.html`
- [Tribute page](https://github.com/joaoluisdutra/portfolio/blob/main/projeto-tribute-page.html): `projeto-tribute-page.html`

### Profile and credentials

- [Exploratory research](https://github.com/joaoluisdutra/portfolio/blob/main/pesquisa-exploratoria.html): `pesquisa-exploratoria.html`
- [Certifications](https://github.com/joaoluisdutra/portfolio/blob/main/certificacoes.html): `certificacoes.html`
- [Information systems](https://github.com/joaoluisdutra/portfolio/blob/main/sistemas-de-informacao-unibave.html): `sistemas-de-informacao-unibave.html`

### Interface behavior

- [Site interactions](https://github.com/joaoluisdutra/portfolio/blob/main/script.js): `script.js`
- **Project gallery**
- **Navigation sidebar**
- **Education marker popup**
- **Skill animations**
- [Back-to-top behavior](https://github.com/joaoluisdutra/portfolio/blob/main/back-to-top.js): `back-to-top.js`
- **Back-to-top control**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio home: views
- Visitor → Projects index: views
- Visitor → Exploratory research: views
- Visitor → Certifications: views
- Visitor → Information systems: views
- Visitor → App Ampara: views
- Visitor → Yannick course: views
- Visitor → Dev Alura Google: views
- Visitor → Dropit: views
- Visitor → Ferdicakes: views
- Visitor → Alura front-end: views
- Visitor → EBAC design journey: views
- Visitor → Petly: views
- Visitor → Product page: views
- Visitor → Adidas slider: views
- Visitor → Social media content 1: views
- Visitor → Social media content 2: views
- Visitor → Tiny Bites: views
- Visitor → Tribute page: views
- Site interactions → Project gallery: updates
- Site interactions → Navigation sidebar: controls
- Site interactions → Education marker popup: positions
- Site interactions → Skill animations: animates
- Back-to-top behavior → Back-to-top control: creates
- Back-to-top control → Visitor: scrolls page