# marto993/portfolio architecture

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

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

## Overview

Este repositorio es un portfolio personal React que presenta el perfil profesional, proyectos y contacto, junto con un blog de artículos. El flujo principal va desde la visita al portfolio hasta explorar proyectos o abrir el blog; en el blog se cargan artículos estáticos, se filtran y se muestran en una página de lectura con opciones para compartir. README también documenta un formulario de contacto integrado con n8n, SEO y diseño adaptable. Las rutas y componentes concretos de proyectos y formulario no se muestrean; se representan desde `src/App.jsx`, que los contiene. La arquitectura se infiere del README y de los extractos disponibles.

Main entry points: [`src/App.jsx`](https://github.com/marto993/portfolio/blob/main/src/App.jsx) (Portfolio y rutas), [`src/blog/pages/ArticlePage.jsx`](https://github.com/marto993/portfolio/blob/main/src/blog/pages/ArticlePage.jsx) (Lectura de artículo), [`src/blog/pages/BlogPage.jsx`](https://github.com/marto993/portfolio/blob/main/src/blog/pages/BlogPage.jsx) (Listado del blog), [`src/blog/hooks/useArticles.js`](https://github.com/marto993/portfolio/blob/main/src/blog/hooks/useArticles.js) (Carga de artículos)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio"]
  node_app["Portfolio y rutas<br/>[App.jsx]"]
  node_projects["Proyectos y galería<br/>[App.jsx]"]
  node_carousel["Carrusel de imágenes<br/>[ImageCarousel.jsx]"]
  node_modal["Visor de imágenes<br/>[ImageModal.jsx]"]
  node_contact["Formulario contacto<br/>[App.jsx]"]
end

subgraph group_blog["Blog"]
  node_articledata["Artículos estáticos<br/>[articles.js]"]
  node_articlehook["Carga de artículos<br/>[useArticles.js]"]
  node_blogpage["Listado del blog<br/>[BlogPage.jsx]"]
  node_filters["Búsqueda y filtros<br/>[useBlogFilters.js]"]
  node_articleutils["Utilidades de artículos<br/>[articleUtils.js]"]
  node_articlepage["Lectura de artículo<br/>[ArticlePage.jsx]"]
  node_articlecontent["Contenido de artículo<br/>[ArticleContent.jsx]"]
  node_share["Compartir artículo<br/>[ShareButtons.jsx]"]
end

subgraph group_shared["Servicios compartidos"]
  node_analytics["Analítica<br/>[Analytics.jsx]"]
  node_analytics_hook["Eventos analíticos<br/>[useAnalytics.js]"]
  node_seo["SEO<br/>[SEO.jsx]"]
  node_performance["Optimización"]
  node_errors["Límite de errores<br/>[ErrorBoundary.jsx]"]
  node_entry["Entrada React<br/>[main.jsx]"]
end

node_visitor(("Visitante"))
node_n8n{{"Webhook n8n"}}
node_social{{"Redes sociales"}}

node_visitor -->|"visita"| node_app
node_entry -->|"renderiza"| node_app
node_app -->|"muestra"| node_projects
node_app -->|"renderiza"| node_carousel
node_carousel -->|"abre"| node_modal
node_app -->|"muestra"| node_contact
node_contact -.->|"envía formulario"| node_n8n
node_app -->|"abre blog"| node_blogpage
node_blogpage -->|"carga artículos"| node_articlehook
node_articlehook -->|"lee datos"| node_articledata
node_articlehook -->|"ordena fechas"| node_articleutils
node_blogpage -->|"aplica filtros"| node_filters
node_filters -->|"filtra y busca"| node_articleutils
node_blogpage -->|"abre artículo"| node_articlepage
node_articlepage -->|"obtiene artículo"| node_articlehook
node_articlepage -->|"muestra contenido"| node_articlecontent
node_articlepage -->|"ofrece compartir"| node_share
node_share -->|"comparte enlace"| node_social
node_articlepage -->|"registra lectura"| node_analytics_hook
node_share -->|"registra difusión"| node_analytics_hook
node_analytics_hook -.->|"envía eventos"| node_analytics
node_app -->|"integra SEO"| node_seo
node_blogpage -->|"define SEO"| node_seo
node_articlepage -->|"define SEO"| node_seo
node_app -->|"aplica optimización"| node_performance
node_app -->|"contiene fallos"| node_errors

click node_app "https://github.com/marto993/portfolio/blob/main/src/App.jsx"
click node_projects "https://github.com/marto993/portfolio/blob/main/src/App.jsx"
click node_carousel "https://github.com/marto993/portfolio/blob/main/src/components/ImageCarousel.jsx"
click node_modal "https://github.com/marto993/portfolio/blob/main/src/components/ImageModal.jsx"
click node_contact "https://github.com/marto993/portfolio/blob/main/src/App.jsx"
click node_articledata "https://github.com/marto993/portfolio/blob/main/src/blog/data/articles.js"
click node_articlehook "https://github.com/marto993/portfolio/blob/main/src/blog/hooks/useArticles.js"
click node_blogpage "https://github.com/marto993/portfolio/blob/main/src/blog/pages/BlogPage.jsx"
click node_filters "https://github.com/marto993/portfolio/blob/main/src/blog/hooks/useBlogFilters.js"
click node_articleutils "https://github.com/marto993/portfolio/blob/main/src/blog/utils/articleUtils.js"
click node_articlepage "https://github.com/marto993/portfolio/blob/main/src/blog/pages/ArticlePage.jsx"
click node_articlecontent "https://github.com/marto993/portfolio/blob/main/src/blog/components/ArticleContent.jsx"
click node_share "https://github.com/marto993/portfolio/blob/main/src/blog/components/ShareButtons.jsx"
click node_analytics "https://github.com/marto993/portfolio/blob/main/src/components/Analytics.jsx"
click node_analytics_hook "https://github.com/marto993/portfolio/blob/main/src/hooks/useAnalytics.js"
click node_seo "https://github.com/marto993/portfolio/blob/main/src/components/SEO.jsx"
click node_performance "https://github.com/marto993/portfolio/blob/main/src/components/PerformanceOptimizer.jsx"
click node_errors "https://github.com/marto993/portfolio/blob/main/src/components/ErrorBoundary.jsx"
click node_entry "https://github.com/marto993/portfolio/blob/main/src/main.jsx"

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_app,node_projects,node_carousel,node_modal,node_contact toneBlue
class node_articledata,node_articlehook,node_blogpage,node_filters,node_articleutils,node_articlepage,node_articlecontent,node_share toneAmber
class node_analytics,node_analytics_hook,node_seo,node_performance,node_errors,node_entry,node_n8n toneMint
class node_visitor,node_social toneIndigo
```

## Components

### Portfolio

- [Portfolio y rutas](https://github.com/marto993/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Proyectos y galería](https://github.com/marto993/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Carrusel de imágenes](https://github.com/marto993/portfolio/blob/main/src/components/ImageCarousel.jsx): `src/components/ImageCarousel.jsx`
- [Visor de imágenes](https://github.com/marto993/portfolio/blob/main/src/components/ImageModal.jsx): `src/components/ImageModal.jsx`
- [Formulario contacto](https://github.com/marto993/portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Blog

- [Artículos estáticos](https://github.com/marto993/portfolio/blob/main/src/blog/data/articles.js): `src/blog/data/articles.js`
- [Carga de artículos](https://github.com/marto993/portfolio/blob/main/src/blog/hooks/useArticles.js): `src/blog/hooks/useArticles.js`
- [Listado del blog](https://github.com/marto993/portfolio/blob/main/src/blog/pages/BlogPage.jsx): `src/blog/pages/BlogPage.jsx`
- [Búsqueda y filtros](https://github.com/marto993/portfolio/blob/main/src/blog/hooks/useBlogFilters.js): `src/blog/hooks/useBlogFilters.js`
- [Utilidades de artículos](https://github.com/marto993/portfolio/blob/main/src/blog/utils/articleUtils.js): `src/blog/utils/articleUtils.js`
- [Lectura de artículo](https://github.com/marto993/portfolio/blob/main/src/blog/pages/ArticlePage.jsx): `src/blog/pages/ArticlePage.jsx`
- [Contenido de artículo](https://github.com/marto993/portfolio/blob/main/src/blog/components/ArticleContent.jsx): `src/blog/components/ArticleContent.jsx`
- [Compartir artículo](https://github.com/marto993/portfolio/blob/main/src/blog/components/ShareButtons.jsx): `src/blog/components/ShareButtons.jsx`

### Servicios compartidos

- [Analítica](https://github.com/marto993/portfolio/blob/main/src/components/Analytics.jsx): `src/components/Analytics.jsx`
- [Eventos analíticos](https://github.com/marto993/portfolio/blob/main/src/hooks/useAnalytics.js): `src/hooks/useAnalytics.js`
- [SEO](https://github.com/marto993/portfolio/blob/main/src/components/SEO.jsx): `src/components/SEO.jsx`
- [Optimización](https://github.com/marto993/portfolio/blob/main/src/components/PerformanceOptimizer.jsx): `src/components/PerformanceOptimizer.jsx`
- [Límite de errores](https://github.com/marto993/portfolio/blob/main/src/components/ErrorBoundary.jsx): `src/components/ErrorBoundary.jsx`
- [Entrada React](https://github.com/marto993/portfolio/blob/main/src/main.jsx): `src/main.jsx`

### Other components

- **Visitante**
- **Webhook n8n**
- **Redes sociales**

## Connections

- Visitante → Portfolio y rutas: visita
- Entrada React → Portfolio y rutas: renderiza
- Portfolio y rutas → Proyectos y galería: muestra
- Portfolio y rutas → Carrusel de imágenes: renderiza
- Carrusel de imágenes → Visor de imágenes: abre
- Portfolio y rutas → Formulario contacto: muestra
- Formulario contacto → Webhook n8n: envía formulario
- Portfolio y rutas → Listado del blog: abre blog
- Listado del blog → Carga de artículos: carga artículos
- Carga de artículos → Artículos estáticos: lee datos
- Carga de artículos → Utilidades de artículos: ordena fechas
- Listado del blog → Búsqueda y filtros: aplica filtros
- Búsqueda y filtros → Utilidades de artículos: filtra y busca
- Listado del blog → Lectura de artículo: abre artículo
- Lectura de artículo → Carga de artículos: obtiene artículo
- Lectura de artículo → Contenido de artículo: muestra contenido
- Lectura de artículo → Compartir artículo: ofrece compartir
- Compartir artículo → Redes sociales: comparte enlace
- Lectura de artículo → Eventos analíticos: registra lectura
- Compartir artículo → Eventos analíticos: registra difusión
- Eventos analíticos → Analítica: envía eventos
- Portfolio y rutas → SEO: integra SEO
- Listado del blog → SEO: define SEO
- Lectura de artículo → SEO: define SEO
- Portfolio y rutas → Optimización: aplica optimización
- Portfolio y rutas → Límite de errores: contiene fallos