# josedelacruz81/portafolio architecture

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

- Interactive diagram: https://gitdiagram.com/josedelacruz81/portafolio
- Repository: https://github.com/josedelacruz81/portafolio

## Overview

This repository is a single-page personal portfolio for a software developer and IT analyst. The runtime mounts the app, which composes navigation, an introduction, biography, skills, project portfolio, contact form, and footer. Visitors navigate between sections, review filtered projects and contact links, or submit the form; the shown contact submission is simulated rather than connected to a backend. Theme state is managed by a hook and persisted in browser localStorage. The graph follows explicit imports and calls; no separate server or durable application data store is evidenced.

Main entry points: [`src/App.jsx`](https://github.com/josedelacruz81/portafolio/blob/main/src/App.jsx) (Page composition), [`src/components/Navbar.jsx`](https://github.com/josedelacruz81/portafolio/blob/main/src/components/Navbar.jsx) (Navigation bar), [`src/main.jsx`](https://github.com/josedelacruz81/portafolio/blob/main/src/main.jsx) (React entry), [`src/hooks/useDarkMode.jsx`](https://github.com/josedelacruz81/portafolio/blob/main/src/hooks/useDarkMode.jsx) (Theme state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Page assembly"]
  node_entry["React entry<br/>[main.jsx]"]
  node_approot["Page composition<br/>[App.jsx]"]
end

subgraph group_presentation["Portfolio sections"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_about["Biography<br/>[About.jsx]"]
  node_skills["Skills overview<br/>[Skills.jsx]"]
  node_projects["Project portfolio<br/>[Projects.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_footer["Social footer<br/>[Footer.jsx]"]
end

subgraph group_interaction["Navigation and theme"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_theme["Theme state<br/>[useDarkMode.jsx]"]
end

node_visitor(("Portfolio visitor"))
node_localstorage[("Browser storage")]

node_visitor -.->|"opens"| node_entry
node_entry -->|"renders"| node_approot
node_approot -->|"renders"| node_navbar
node_approot -->|"renders"| node_hero
node_approot -->|"renders"| node_about
node_approot -->|"renders"| node_skills
node_approot -->|"renders"| node_projects
node_approot -->|"renders"| node_contact
node_approot -->|"renders"| node_footer
node_navbar -->|"uses"| node_theme
node_theme -->|"reads and writes"| node_localstorage
node_visitor -.->|"navigates"| node_navbar
node_visitor -.->|"filters projects"| node_projects
node_visitor -.->|"submits form"| node_contact

click node_entry "https://github.com/josedelacruz81/portafolio/blob/main/src/main.jsx"
click node_approot "https://github.com/josedelacruz81/portafolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/josedelacruz81/portafolio/blob/main/src/components/Navbar.jsx"
click node_theme "https://github.com/josedelacruz81/portafolio/blob/main/src/hooks/useDarkMode.jsx"
click node_hero "https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Hero.jsx"
click node_about "https://github.com/josedelacruz81/portafolio/blob/main/src/sections/About.jsx"
click node_skills "https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Skills.jsx"
click node_projects "https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Projects.jsx"
click node_contact "https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Contact.jsx"
click node_footer "https://github.com/josedelacruz81/portafolio/blob/main/src/components/Footer.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_entry,node_approot toneBlue
class node_hero,node_about,node_skills,node_projects,node_contact,node_footer,node_localstorage toneAmber
class node_navbar,node_theme toneMint
class node_visitor toneIndigo
```

## Components

### Page assembly

- [React entry](https://github.com/josedelacruz81/portafolio/blob/main/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/josedelacruz81/portafolio/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio sections

- [Introduction](https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Hero.jsx): `src/sections/Hero.jsx`
- [Biography](https://github.com/josedelacruz81/portafolio/blob/main/src/sections/About.jsx): `src/sections/About.jsx`
- [Skills overview](https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Skills.jsx): `src/sections/Skills.jsx`
- [Project portfolio](https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Projects.jsx): `src/sections/Projects.jsx`
- [Contact form](https://github.com/josedelacruz81/portafolio/blob/main/src/sections/Contact.jsx): `src/sections/Contact.jsx`
- [Social footer](https://github.com/josedelacruz81/portafolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Navigation and theme

- [Navigation bar](https://github.com/josedelacruz81/portafolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Theme state](https://github.com/josedelacruz81/portafolio/blob/main/src/hooks/useDarkMode.jsx): `src/hooks/useDarkMode.jsx`

### Other components

- **Portfolio visitor**
- **Browser storage**

## Connections

- Portfolio visitor → React entry: opens
- React entry → Page composition: renders (evidence: `src/main.jsx`)
- Page composition → Navigation bar: renders (evidence: `src/App.jsx`)
- Page composition → Introduction: renders (evidence: `src/App.jsx`)
- Page composition → Biography: renders (evidence: `src/App.jsx`)
- Page composition → Skills overview: renders (evidence: `src/App.jsx`)
- Page composition → Project portfolio: renders (evidence: `src/App.jsx`)
- Page composition → Contact form: renders (evidence: `src/App.jsx`)
- Page composition → Social footer: renders (evidence: `src/App.jsx`)
- Navigation bar → Theme state: uses (evidence: `src/components/Navbar.jsx`)
- Theme state → Browser storage: reads and writes (evidence: `src/hooks/useDarkMode.jsx`)
- Portfolio visitor → Navigation bar: navigates
- Portfolio visitor → Project portfolio: filters projects
- Portfolio visitor → Contact form: submits form