# johann-09/coder-entregable-clase4 architecture

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

- Interactive diagram: https://gitdiagram.com/johann-09/coder-entregable-clase4
- Repository: https://github.com/johann-09/coder-entregable-clase4

## Overview

#### Purpose and delivery model
This is a static Spanish-language personal/professional website. It has no application source, backend, package manifest, or README-defined build process; deployment consists of serving the HTML, CSS, and image assets directly.

#### Entry points and site topology
`index.html` is the primary landing-page entry point. The rest of the site is split into independently served HTML documents under `pages/`:
- `pages/sobre-mi.html` — profile/about content
- `pages/servicios.html` — services
- `pages/proyectos.html` — projects
- `pages/contactos.html` — contact information
- `pages/preguntas.html` — questions/FAQ-style content
- `pages/temas.html` — topics

Navigation and inter-page behavior are expected to be standard browser links between these documents rather than client-side routing.

#### Presentation layer
A shared stylesheet at `css/style.css` is the central visual-system boundary. Each HTML page likely references this common asset, making it the primary place for shared layout, typography, responsive behavior, navigation styling, and page-level visual consistency.

Relevant paths:
- `css/style.css`
- `index.html`
- `pages/servicios.html`

#### Content architecture
Content is page-centric and authored directly in HTML rather than sourced from a CMS, API, or data layer. Each page owns its document structure and copy, so changes to a section’s content or markup occur in its respective file.

Relevant paths:
- `pages/proyectos.html`
- `pages/preguntas.html`
- `pages/temas.html`

#### Asset boundary
`img/` is the repository’s static media boundary. HTML pages and the shared stylesheet may reference images by relative path. Asset naming, optimization, and relative URL correctness are important because there is no bundler or asset pipeline visible in the repository.

Relevant paths:
- `img`
- `index.html`
- `css/style.css`

#### Runtime and infrastructure
The runtime is a browser plus any static-file host (for example, GitHub Pages, Netlify static hosting, or a conventional web server). No server-side runtime, database, authentication system, API integration, or third-party service is evidenced by the supplied tree. The key deployment concern is preserving directory structure so root and `pages/` documents resolve CSS, image, and cross-page links correctly.

Main entry points: [`img`](https://github.com/johann-09/coder-entregable-clase4/tree/main/img) (Image assets), [`index.html`](https://github.com/johann-09/coder-entregable-clase4/blob/main/index.html) (Landing page), [`css/style.css`](https://github.com/johann-09/coder-entregable-clase4/blob/main/css/style.css) (Shared stylesheet), [`pages/sobre-mi.html`](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/sobre-mi.html) (About page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_documents["HTML documents"]
  node_home["Landing page<br/>HTML entry point<br/>[index.html]"]
  node_about["About page<br/>HTML page<br/>[sobre-mi.html]"]
  node_services["Services page<br/>HTML page<br/>[servicios.html]"]
  node_projects["Projects page<br/>HTML page<br/>[proyectos.html]"]
  node_contact["Contact page<br/>HTML page<br/>[contactos.html]"]
  node_faq["Questions page<br/>HTML page<br/>[preguntas.html]"]
  node_topics["Topics page<br/>HTML page<br/>[temas.html]"]
end

subgraph group_static["Static assets"]
  node_styles["Shared stylesheet<br/>CSS visual system<br/>[style.css]"]
  node_images["Image assets<br/>static media"]
end

node_browser(("Browser<br/>runtime"))
node_static_host{{"Static file host<br/>deployment"}}

node_static_host -->|"serves site"| node_browser
node_browser -->|"loads"| node_home
node_browser -->|"follows links"| node_about
node_browser -->|"follows links"| node_services
node_browser -->|"follows links"| node_projects
node_browser -->|"follows links"| node_contact
node_browser -->|"follows links"| node_faq
node_browser -->|"follows links"| node_topics
node_home -->|"uses"| node_styles
node_services -->|"uses"| node_styles
node_styles -.->|"may reference"| node_images
node_home -->|"references"| node_images
node_about -.->|"may reference"| node_images
node_projects -.->|"may reference"| node_images

click node_home "https://github.com/johann-09/coder-entregable-clase4/blob/main/index.html"
click node_about "https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/sobre-mi.html"
click node_services "https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/servicios.html"
click node_projects "https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/proyectos.html"
click node_contact "https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/contactos.html"
click node_faq "https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/preguntas.html"
click node_topics "https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/temas.html"
click node_styles "https://github.com/johann-09/coder-entregable-clase4/blob/main/css/style.css"
click node_images "https://github.com/johann-09/coder-entregable-clase4/tree/main/img"

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_services,node_projects,node_contact,node_faq,node_topics toneBlue
class node_styles,node_images toneAmber
class node_browser,node_static_host toneNeutral
```

## Components

### HTML documents

Independently served, page-centric site content.

- [Landing page](https://github.com/johann-09/coder-entregable-clase4/blob/main/index.html): HTML entry point · Primary site entry point. · `index.html`
- [About page](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/sobre-mi.html): HTML page · `pages/sobre-mi.html`
- [Services page](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/servicios.html): HTML page · `pages/servicios.html`
- [Projects page](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/proyectos.html): HTML page · `pages/proyectos.html`
- [Contact page](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/contactos.html): HTML page · `pages/contactos.html`
- [Questions page](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/preguntas.html): HTML page · `pages/preguntas.html`
- [Topics page](https://github.com/johann-09/coder-entregable-clase4/blob/main/pages/temas.html): HTML page · `pages/temas.html`

### Static assets

Shared presentation and media files served directly.

- [Shared stylesheet](https://github.com/johann-09/coder-entregable-clase4/blob/main/css/style.css): CSS visual system · Centralizes layout, typography, responsive behavior, and navigation styling. · `css/style.css`
- [Image assets](https://github.com/johann-09/coder-entregable-clase4/tree/main/img): static media · Relative media resources without an asset pipeline. · `img`

### Other components

- **Browser**: runtime · Resolves document links and relative asset URLs.
- **Static file host**: deployment · Serves the repository while preserving directory structure.

## Connections

- Static file host → Browser: serves site
- Browser → Landing page: loads
- Browser → About page: follows links
- Browser → Services page: follows links
- Browser → Projects page: follows links
- Browser → Contact page: follows links
- Browser → Questions page: follows links
- Browser → Topics page: follows links
- Landing page → Shared stylesheet: uses
- Services page → Shared stylesheet: uses
- Shared stylesheet → Image assets: may reference
- Landing page → Image assets: references
- About page → Image assets: may reference
- Projects page → Image assets: may reference