# 4ronjohn/gutierrez-portfolio architecture

> Architecture diagram of the GitHub repository 4ronjohn/gutierrez-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/4ronjohn/gutierrez-portfolio
- Repository: https://github.com/4ronjohn/gutierrez-portfolio

## Overview

This is a React personal portfolio for presenting a candidate’s profile, work history, projects, skills, education, and contact options. A visitor enters through the app, browses the rendered sections, and can follow contact links; the hero and navigation also scroll to page sections. The components are composed by App, while several use a shared scroll-reveal hook. Source excerpts show the composition and hook usage; unsampled component internals and asset wiring are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/App.jsx) (Page composition), [`src/hooks/useScrollAnimation.js`](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/hooks/useScrollAnimation.js) (Scroll reveal), [`src/main.jsx`](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/main.jsx) (React entry), [`src/components/About.jsx`](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/About.jsx) (About profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_main["React entry<br/>[main.jsx]"]
  node_app["Page composition<br/>[App.jsx]"]
end

subgraph group_profile["Profile sections"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_contact["Contact options<br/>[Contact.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_career["Career showcase"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_projects["Projects gallery<br/>[Projects.jsx]"]
  node_skills["Technical skills<br/>[Skills.jsx]"]
  node_education["Education<br/>[Education.jsx]"]
end

subgraph group_shared["Shared behavior"]
  node_scroll["Scroll reveal"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens portfolio"| node_main
node_main -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_education
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_about -->|"uses"| node_scroll
node_experience -->|"uses"| node_scroll
node_projects -->|"uses"| node_scroll
node_skills -->|"uses"| node_scroll
node_education -->|"uses"| node_scroll
node_contact -->|"uses"| node_scroll

click node_main "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/About.jsx"
click node_experience "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Experience.jsx"
click node_projects "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Projects.jsx"
click node_skills "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Skills.jsx"
click node_education "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Education.jsx"
click node_contact "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Footer.jsx"
click node_scroll "https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/hooks/useScrollAnimation.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_main,node_app toneBlue
class node_navbar,node_hero,node_about,node_contact,node_footer toneAmber
class node_experience,node_projects,node_skills,node_education toneMint
class node_scroll toneRose
class node_visitor toneIndigo
```

## Components

### App entry

- [React entry](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Profile sections

- [Navigation](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Introduction](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About profile](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Contact options](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Footer](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Career showcase

- [Experience](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Projects gallery](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Technical skills](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Education](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/components/Education.jsx): `src/components/Education.jsx`

### Shared behavior

- [Scroll reveal](https://github.com/4ronjohn/gutierrez-portfolio/blob/main/src/hooks/useScrollAnimation.js): `src/hooks/useScrollAnimation.js`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens portfolio
- React entry → Page composition: renders (evidence: `src/main.jsx`)
- Page composition → Navigation: renders (evidence: `src/App.jsx`)
- Page composition → Introduction: renders (evidence: `src/App.jsx`)
- Page composition → About profile: renders (evidence: `src/App.jsx`)
- Page composition → Experience: renders (evidence: `src/App.jsx`)
- Page composition → Projects gallery: renders (evidence: `src/App.jsx`)
- Page composition → Technical skills: renders (evidence: `src/App.jsx`)
- Page composition → Education: renders (evidence: `src/App.jsx`)
- Page composition → Contact options: renders (evidence: `src/App.jsx`)
- Page composition → Footer: renders (evidence: `src/App.jsx`)
- About profile → Scroll reveal: uses (evidence: `src/components/About.jsx`)
- Experience → Scroll reveal: uses (evidence: `src/components/Experience.jsx`)
- Projects gallery → Scroll reveal: uses (evidence: `src/components/Projects.jsx`)
- Technical skills → Scroll reveal: uses (evidence: `src/components/Skills.jsx`)
- Education → Scroll reveal: uses (evidence: `src/components/Education.jsx`)
- Contact options → Scroll reveal: uses (evidence: `src/components/Contact.jsx`)