# carilloandrei9264/my-portfolio architecture

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

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

## Overview

This repository is a static personal portfolio: visitors browse the page’s profile and portfolio sections, inspect projects, skills and certifications, and can access the CV. The page content lives in index.html, with styling in css/styles.css and browser-side behavior in js/main.js. The README also documents image loading and retry states, connection notices, and empty-list handling. The HTML was not excerpted, so relationships involving page sections and assets are based on README documentation; the script’s internal behaviors are supported by its excerpt.

Main entry points: [`index.html`](https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html) (Portfolio page), [`js/main.js`](https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js) (Image states), [`assets/Andrei_Carillo_CV.pdf`](https://github.com/carilloandrei9264/my-portfolio/blob/main/assets/Andrei_Carillo_CV.pdf) (CV document), [`assets/projects`](https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/projects) (Project previews)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio content"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_profile["Profile and contact<br/>[index.html]"]
  node_projects["Project showcase<br/>[index.html]"]
  node_skills["Skills showcase<br/>[index.html]"]
  node_certifications["Certifications<br/>[index.html]"]
  node_cv["CV document"]
  node_project_media["Project previews"]
  node_skill_icons["Skill icons"]
  node_cert_badges["Certificate badges"]
  node_profile_photo["Profile photo"]
end

subgraph group_presentation["Presentation"]
  node_styles["Site styling<br/>[styles.css]"]
end

subgraph group_behavior["Browser behavior"]
  node_theme_nav["Theme and navigation<br/>[main.js]"]
  node_media_states["Image states<br/>[main.js]"]
  node_connection["Connection notices<br/>[main.js]"]
  node_empty_states["Empty-list handling<br/>[main.js]"]
  node_footer_year["Footer year<br/>[main.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"browses"| node_portfolio
node_portfolio -->|"presents"| node_profile
node_portfolio -->|"presents"| node_projects
node_portfolio -->|"presents"| node_skills
node_portfolio -->|"presents"| node_certifications
node_portfolio -->|"offers"| node_cv
node_projects -->|"uses previews"| node_project_media
node_skills -->|"references icons"| node_skill_icons
node_certifications -->|"uses badges"| node_cert_badges
node_profile -->|"uses photo"| node_profile_photo
node_portfolio -->|"styled by"| node_styles
node_theme_nav -->|"updates page"| node_portfolio
node_media_states -->|"updates image states"| node_portfolio
node_connection -->|"retries failures"| node_media_states
node_empty_states -->|"fills empty lists"| node_portfolio
node_footer_year -->|"sets year"| node_portfolio

click node_portfolio "https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html"
click node_profile "https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html"
click node_projects "https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html"
click node_skills "https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html"
click node_certifications "https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html"
click node_cv "https://github.com/carilloandrei9264/my-portfolio/blob/main/assets/Andrei_Carillo_CV.pdf"
click node_project_media "https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/projects"
click node_skill_icons "https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/skills"
click node_cert_badges "https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/certifications"
click node_profile_photo "https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/profile"
click node_styles "https://github.com/carilloandrei9264/my-portfolio/blob/main/css/styles.css"
click node_theme_nav "https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js"
click node_media_states "https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js"
click node_connection "https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js"
click node_empty_states "https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js"
click node_footer_year "https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.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_portfolio,node_profile,node_projects,node_skills,node_certifications,node_cv,node_project_media,node_skill_icons,node_cert_badges,node_profile_photo toneBlue
class node_styles toneAmber
class node_theme_nav,node_media_states,node_connection,node_empty_states,node_footer_year toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html): `index.html`
- [Profile and contact](https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html): `index.html`
- [Project showcase](https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html): `index.html`
- [Skills showcase](https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html): `index.html`
- [Certifications](https://github.com/carilloandrei9264/my-portfolio/blob/main/index.html): `index.html`
- [CV document](https://github.com/carilloandrei9264/my-portfolio/blob/main/assets/Andrei_Carillo_CV.pdf): `assets/Andrei_Carillo_CV.pdf`
- [Project previews](https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/projects): `assets/projects`
- [Skill icons](https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/skills): `assets/skills`
- [Certificate badges](https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/certifications): `assets/certifications`
- [Profile photo](https://github.com/carilloandrei9264/my-portfolio/tree/main/assets/profile): `assets/profile`

### Presentation

- [Site styling](https://github.com/carilloandrei9264/my-portfolio/blob/main/css/styles.css): `css/styles.css`

### Browser behavior

- [Theme and navigation](https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js): `js/main.js`
- [Image states](https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js): `js/main.js`
- [Connection notices](https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js): `js/main.js`
- [Empty-list handling](https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js): `js/main.js`
- [Footer year](https://github.com/carilloandrei9264/my-portfolio/blob/main/js/main.js): `js/main.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → Portfolio page: browses (evidence: `README.md`)
- Portfolio page → Profile and contact: presents (evidence: `README.md`)
- Portfolio page → Project showcase: presents (evidence: `README.md`)
- Portfolio page → Skills showcase: presents (evidence: `README.md`)
- Portfolio page → Certifications: presents (evidence: `README.md`)
- Portfolio page → CV document: offers (evidence: `README.md`)
- Project showcase → Project previews: uses previews (evidence: `README.md`)
- Skills showcase → Skill icons: references icons (evidence: `README.md`)
- Certifications → Certificate badges: uses badges (evidence: `README.md`)
- Profile and contact → Profile photo: uses photo (evidence: `README.md`)
- Portfolio page → Site styling: styled by (evidence: `README.md`)
- Theme and navigation → Portfolio page: updates page (evidence: `js/main.js`)
- Image states → Portfolio page: updates image states (evidence: `js/main.js`)
- Connection notices → Image states: retries failures (evidence: `js/main.js`)
- Empty-list handling → Portfolio page: fills empty lists (evidence: `js/main.js`)
- Footer year → Portfolio page: sets year (evidence: `js/main.js`)