# xavvygabby/about-me-website architecture

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

- Interactive diagram: https://gitdiagram.com/xavvygabby/about-me-website
- Repository: https://github.com/xavvygabby/about-me-website

## Overview

This is a small static digital business card: visitors browse its home, about, and contact pages. The sampled JavaScript implements carousel controls and client-side contact-form checks; successful submissions are demo-only, logged in the browser rather than sent to a service. Page markup and stylesheet contents were not sampled, so page-to-page navigation and asset wiring are not shown.

Main entry points: [`script.js`](https://github.com/xavvygabby/about-me-website/blob/main/script.js) (Carousel controls), [`home.html`](https://github.com/xavvygabby/about-me-website/blob/main/home.html) (Home page), [`about.html`](https://github.com/xavvygabby/about-me-website/blob/main/about.html) (About page), [`contact.html`](https://github.com/xavvygabby/about-me-website/blob/main/contact.html) (Contact page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Card pages"]
  node_home["Home page<br/>[home.html]"]
  node_about["About page<br/>[about.html]"]
  node_contact["Contact page<br/>[contact.html]"]
end

subgraph group_interactions["Page interactions"]
  node_carousel["Carousel controls<br/>[script.js]"]
  node_contact_handler["Form validation<br/>[script.js]"]
end

subgraph group_presentation["Presentation assets"]
  node_stylesheet["Site stylesheet<br/>[style.css]"]
  node_hynds_images["Hynds images"]
  node_phlw_images["PHLW images"]
end

node_visitor(("Visitor"))
node_browser_console["Browser console"]

node_visitor -->|"visits"| node_home
node_visitor -->|"visits"| node_about
node_visitor -->|"visits"| node_contact
node_visitor -->|"clicks controls"| node_carousel
node_carousel -->|"updates slides"| node_visitor
node_visitor -->|"submits form"| node_contact_handler
node_contact_handler -->|"logs demo"| node_browser_console

click node_home "https://github.com/xavvygabby/about-me-website/blob/main/home.html"
click node_about "https://github.com/xavvygabby/about-me-website/blob/main/about.html"
click node_contact "https://github.com/xavvygabby/about-me-website/blob/main/contact.html"
click node_carousel "https://github.com/xavvygabby/about-me-website/blob/main/script.js"
click node_contact_handler "https://github.com/xavvygabby/about-me-website/blob/main/script.js"
click node_stylesheet "https://github.com/xavvygabby/about-me-website/blob/main/css/style.css"
click node_hynds_images "https://github.com/xavvygabby/about-me-website/tree/main/images/Hynds"
click node_phlw_images "https://github.com/xavvygabby/about-me-website/tree/main/images/PHLW"

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_contact,node_browser_console toneBlue
class node_carousel,node_contact_handler toneAmber
class node_stylesheet,node_hynds_images,node_phlw_images toneMint
class node_visitor toneIndigo
```

## Components

### Card pages

- [Home page](https://github.com/xavvygabby/about-me-website/blob/main/home.html): `home.html`
- [About page](https://github.com/xavvygabby/about-me-website/blob/main/about.html): `about.html`
- [Contact page](https://github.com/xavvygabby/about-me-website/blob/main/contact.html): `contact.html`

### Page interactions

- [Carousel controls](https://github.com/xavvygabby/about-me-website/blob/main/script.js): `script.js`
- [Form validation](https://github.com/xavvygabby/about-me-website/blob/main/script.js): `script.js`

### Presentation assets

- [Site stylesheet](https://github.com/xavvygabby/about-me-website/blob/main/css/style.css): `css/style.css`
- [Hynds images](https://github.com/xavvygabby/about-me-website/tree/main/images/Hynds): `images/Hynds`
- [PHLW images](https://github.com/xavvygabby/about-me-website/tree/main/images/PHLW): `images/PHLW`

### Other components

- **Visitor**
- **Browser console**

## Connections

- Visitor → Home page: visits
- Visitor → About page: visits
- Visitor → Contact page: visits
- Visitor → Carousel controls: clicks controls
- Carousel controls → Visitor: updates slides
- Visitor → Form validation: submits form
- Form validation → Browser console: logs demo