# joao-cost/portifolio-htmlecss architecture

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

## Overview

Cost Tech is a static personal portfolio, started from index.html. Visitors can explore the home page and the documented About, Skills, Projects, Contact, and Privacy Policy sections; the project page presents projects with images, and Contact offers a form. The README describes HTML and CSS but no source excerpts were provided, so links between individual pages and stylesheets, or form submission behavior, cannot be verified. The graph preserves the documented pages and stylesheet files without inferring those relationships.

Main entry points: [`index.html`](https://github.com/joao-cost/portifolio-htmlecss/blob/main/index.html) (Home), [`projetos.html`](https://github.com/joao-cost/portifolio-htmlecss/blob/main/projetos.html) (Projects), [`sobre.html`](https://github.com/joao-cost/portifolio-htmlecss/blob/main/sobre.html) (About), [`habilidades.html`](https://github.com/joao-cost/portifolio-htmlecss/blob/main/habilidades.html) (Skills)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home<br/>[index.html]"]
  node_about["About<br/>[sobre.html]"]
  node_skills["Skills<br/>[habilidades.html]"]
  node_projects["Projects<br/>[projetos.html]"]
  node_contact["Contact<br/>[contato.html]"]
  node_privacy["Privacy Policy"]
end

subgraph group_styles["Page styling"]
  node_home_css["Home styles<br/>[main.css]"]
  node_about_css["About styles<br/>[sobre.css]"]
  node_skills_css["Skills styles<br/>[habilidades.css]"]
  node_projects_css["Projects styles<br/>[projetos.css]"]
  node_contact_css["Contact styles<br/>[contato.css]"]
  node_privacy_css["Privacy styles<br/>[politica.css]"]
end

subgraph group_assets["Project media"]
  node_images["Project images"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"navigates to"| node_about
node_home -->|"navigates to"| node_skills
node_home -->|"navigates to"| node_projects
node_home -->|"navigates to"| node_contact
node_home -->|"navigates to"| node_privacy
node_projects -->|"presents"| node_images

click node_home "https://github.com/joao-cost/portifolio-htmlecss/blob/main/index.html"
click node_about "https://github.com/joao-cost/portifolio-htmlecss/blob/main/sobre.html"
click node_skills "https://github.com/joao-cost/portifolio-htmlecss/blob/main/habilidades.html"
click node_projects "https://github.com/joao-cost/portifolio-htmlecss/blob/main/projetos.html"
click node_contact "https://github.com/joao-cost/portifolio-htmlecss/blob/main/contato.html"
click node_privacy "https://github.com/joao-cost/portifolio-htmlecss/blob/main/politica-privacidade.html"
click node_home_css "https://github.com/joao-cost/portifolio-htmlecss/blob/main/main.css"
click node_about_css "https://github.com/joao-cost/portifolio-htmlecss/blob/main/sobre.css"
click node_skills_css "https://github.com/joao-cost/portifolio-htmlecss/blob/main/habilidades.css"
click node_projects_css "https://github.com/joao-cost/portifolio-htmlecss/blob/main/projetos.css"
click node_contact_css "https://github.com/joao-cost/portifolio-htmlecss/blob/main/contato.css"
click node_privacy_css "https://github.com/joao-cost/portifolio-htmlecss/blob/main/politica.css"
click node_images "https://github.com/joao-cost/portifolio-htmlecss/tree/main/imagens"

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_about,node_skills,node_projects,node_contact,node_privacy toneBlue
class node_home_css,node_about_css,node_skills_css,node_projects_css,node_contact_css,node_privacy_css toneAmber
class node_images toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio pages

- [Home](https://github.com/joao-cost/portifolio-htmlecss/blob/main/index.html): `index.html`
- [About](https://github.com/joao-cost/portifolio-htmlecss/blob/main/sobre.html): `sobre.html`
- [Skills](https://github.com/joao-cost/portifolio-htmlecss/blob/main/habilidades.html): `habilidades.html`
- [Projects](https://github.com/joao-cost/portifolio-htmlecss/blob/main/projetos.html): `projetos.html`
- [Contact](https://github.com/joao-cost/portifolio-htmlecss/blob/main/contato.html): `contato.html`
- [Privacy Policy](https://github.com/joao-cost/portifolio-htmlecss/blob/main/politica-privacidade.html): `politica-privacidade.html`

### Page styling

- [Home styles](https://github.com/joao-cost/portifolio-htmlecss/blob/main/main.css): `main.css`
- [About styles](https://github.com/joao-cost/portifolio-htmlecss/blob/main/sobre.css): `sobre.css`
- [Skills styles](https://github.com/joao-cost/portifolio-htmlecss/blob/main/habilidades.css): `habilidades.css`
- [Projects styles](https://github.com/joao-cost/portifolio-htmlecss/blob/main/projetos.css): `projetos.css`
- [Contact styles](https://github.com/joao-cost/portifolio-htmlecss/blob/main/contato.css): `contato.css`
- [Privacy styles](https://github.com/joao-cost/portifolio-htmlecss/blob/main/politica.css): `politica.css`

### Project media

- [Project images](https://github.com/joao-cost/portifolio-htmlecss/tree/main/imagens): `imagens`

### Other components

- **Visitor**

## Connections

- Visitor → Home: opens (evidence: `readme.md`)
- Home → About: navigates to (evidence: `readme.md`)
- Home → Skills: navigates to (evidence: `readme.md`)
- Home → Projects: navigates to (evidence: `readme.md`)
- Home → Contact: navigates to (evidence: `readme.md`)
- Home → Privacy Policy: navigates to (evidence: `readme.md`)
- Projects → Project images: presents (evidence: `readme.md`)