# rostomiii/webdevlab1 architecture

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

- Interactive diagram: https://gitdiagram.com/rostomiii/webdevlab1
- Repository: https://github.com/rostomiii/webdevlab1

## Overview

This repository is a React personal-portfolio website. A visitor enters through the home page, uses the shared navigation or home-page links to reach portfolio sections, and can view a résumé or submit the contact form. The contact form logs its captured data in the browser and returns to the home route; no message-delivery service is shown. The graph reflects the sampled routing and page components; the README is empty.

Main entry points: [`client/MainRouter.jsx`](https://github.com/rostomiii/webdevlab1/blob/main/client/MainRouter.jsx) (Main Router), [`client/src/contact.jsx`](https://github.com/rostomiii/webdevlab1/blob/main/client/src/contact.jsx) (Contact Page), [`client/components/Layout.jsx`](https://github.com/rostomiii/webdevlab1/blob/main/client/components/Layout.jsx) (Site Navigation), [`client/components/Home.jsx`](https://github.com/rostomiii/webdevlab1/blob/main/client/components/Home.jsx) (Home Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and Routing"]
  node_main["React Entry<br/>[main.jsx]"]
  node_app_component["App<br/>[App.jsx]"]
  node_router["Main Router<br/>[MainRouter.jsx]"]
  node_layout["Site Navigation<br/>[Layout.jsx]"]
end

subgraph group_portfolio["Portfolio Pages"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_about["About Page<br/>[about.jsx]"]
  node_education["Education Page<br/>[education.jsx]"]
  node_projects["Projects Page<br/>[project.jsx]"]
  node_services["Services Page<br/>[services.jsx]"]
  node_resume["Résumé PDF<br/>[Rostomlamadrid.pdf]"]
end

subgraph group_contact["Contact Interaction"]
  node_contact["Contact Page<br/>[contact.jsx]"]
end

node_visitor(("Visitor"))
node_console["Browser Console"]

node_main -->|"renders"| node_app_component
node_app_component -->|"renders within router"| node_router
node_router -->|"renders"| node_layout
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_about
node_router -->|"routes to"| node_education
node_router -->|"routes to"| node_projects
node_router -->|"routes to"| node_services
node_router -->|"routes to"| node_contact
node_visitor -->|"uses navigation"| node_layout
node_layout -->|"navigates routes"| node_router
node_visitor -->|"views"| node_home
node_home -->|"links to routes"| node_router
node_about -->|"links to"| node_resume
node_visitor -->|"submits form"| node_contact
node_contact -->|"logs form data"| node_console
node_contact -->|"navigates home"| node_router

click node_main "https://github.com/rostomiii/webdevlab1/blob/main/client/src/main.jsx"
click node_app_component "https://github.com/rostomiii/webdevlab1/blob/main/client/src/App.jsx"
click node_router "https://github.com/rostomiii/webdevlab1/blob/main/client/MainRouter.jsx"
click node_layout "https://github.com/rostomiii/webdevlab1/blob/main/client/components/Layout.jsx"
click node_home "https://github.com/rostomiii/webdevlab1/blob/main/client/components/Home.jsx"
click node_about "https://github.com/rostomiii/webdevlab1/blob/main/client/src/about.jsx"
click node_education "https://github.com/rostomiii/webdevlab1/blob/main/client/src/education.jsx"
click node_projects "https://github.com/rostomiii/webdevlab1/blob/main/client/src/project.jsx"
click node_services "https://github.com/rostomiii/webdevlab1/blob/main/client/src/services.jsx"
click node_resume "https://github.com/rostomiii/webdevlab1/blob/main/client/public/Rostomlamadrid.pdf"
click node_contact "https://github.com/rostomiii/webdevlab1/blob/main/client/src/contact.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_main,node_app_component,node_router,node_layout,node_console toneBlue
class node_home,node_about,node_education,node_projects,node_services,node_resume toneAmber
class node_contact toneMint
class node_visitor toneIndigo
```

## Components

### App and Routing

- [React Entry](https://github.com/rostomiii/webdevlab1/blob/main/client/src/main.jsx): `client/src/main.jsx`
- [App](https://github.com/rostomiii/webdevlab1/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Main Router](https://github.com/rostomiii/webdevlab1/blob/main/client/MainRouter.jsx): `client/MainRouter.jsx`
- [Site Navigation](https://github.com/rostomiii/webdevlab1/blob/main/client/components/Layout.jsx): `client/components/Layout.jsx`

### Portfolio Pages

- [Home Page](https://github.com/rostomiii/webdevlab1/blob/main/client/components/Home.jsx): `client/components/Home.jsx`
- [About Page](https://github.com/rostomiii/webdevlab1/blob/main/client/src/about.jsx): `client/src/about.jsx`
- [Education Page](https://github.com/rostomiii/webdevlab1/blob/main/client/src/education.jsx): `client/src/education.jsx`
- [Projects Page](https://github.com/rostomiii/webdevlab1/blob/main/client/src/project.jsx): `client/src/project.jsx`
- [Services Page](https://github.com/rostomiii/webdevlab1/blob/main/client/src/services.jsx): `client/src/services.jsx`
- [Résumé PDF](https://github.com/rostomiii/webdevlab1/blob/main/client/public/Rostomlamadrid.pdf): `client/public/Rostomlamadrid.pdf`

### Contact Interaction

- [Contact Page](https://github.com/rostomiii/webdevlab1/blob/main/client/src/contact.jsx): `client/src/contact.jsx`

### Other components

- **Visitor**
- **Browser Console**

## Connections

- React Entry → App: renders
- App → Main Router: renders within router
- Main Router → Site Navigation: renders
- Main Router → Home Page: routes to
- Main Router → About Page: routes to
- Main Router → Education Page: routes to
- Main Router → Projects Page: routes to
- Main Router → Services Page: routes to
- Main Router → Contact Page: routes to
- Visitor → Site Navigation: uses navigation
- Site Navigation → Main Router: navigates routes
- Visitor → Home Page: views
- Home Page → Main Router: links to routes
- About Page → Résumé PDF: links to
- Visitor → Contact Page: submits form
- Contact Page → Browser Console: logs form data
- Contact Page → Main Router: navigates home