# barry-far/personal-website architecture

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

- Interactive diagram: https://gitdiagram.com/barry-far/personal-website
- Repository: https://github.com/barry-far/personal-website

## Overview

This is a static personal portfolio website. A visitor browses the portfolio and project work, can open project details or an image gallery, share project links, and use the contact form to compose an email. The sampled JavaScript shows event-driven interactions rather than a server-side application or persistent data store. The README describes the site’s HTML, CSS, JavaScript, and Sass foundation; unsampled page markup and styling are represented at their exact tree paths, without inferring unshown wiring.

Main entry points: [`app/js/custom.js`](https://github.com/barry-far/personal-website/blob/main/app/js/custom.js) (Project interactions), [`app/js/gallery-init.js`](https://github.com/barry-far/personal-website/blob/main/app/js/gallery-init.js) (Image gallery), [`app/index.html`](https://github.com/barry-far/personal-website/blob/main/app/index.html) (Portfolio page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_projects["Project details<br/>[index.html]"]
end

subgraph group_interaction["Interactive features"]
  node_project_interactions["Project interactions<br/>[custom.js]"]
  node_gallery["Image gallery<br/>[gallery-init.js]"]
  node_sharing["Project sharing<br/>[gallery-init.js]"]
  node_contact["Contact form<br/>[custom.js]"]
end

subgraph group_presentation["Presentation assets"]
  node_styles["Page styles<br/>[main.css]"]
  node_media["Portfolio media"]
end

node_visitor(("Visitor"))
node_email["Email application"]
node_social["Social platforms"]

node_visitor -->|"browses"| node_portfolio
node_project_interactions -->|"opens panels"| node_projects
node_gallery -->|"opens project links"| node_social
node_sharing -->|"shares links"| node_social
node_contact -->|"opens mailto"| node_email
node_visitor -->|"activates controls"| node_project_interactions
node_visitor -->|"opens thumbnails"| node_gallery
node_visitor -->|"submits form"| node_contact

click node_portfolio "https://github.com/barry-far/personal-website/blob/main/app/index.html"
click node_projects "https://github.com/barry-far/personal-website/blob/main/app/index.html"
click node_project_interactions "https://github.com/barry-far/personal-website/blob/main/app/js/custom.js"
click node_gallery "https://github.com/barry-far/personal-website/blob/main/app/js/gallery-init.js"
click node_sharing "https://github.com/barry-far/personal-website/blob/main/app/js/gallery-init.js"
click node_contact "https://github.com/barry-far/personal-website/blob/main/app/js/custom.js"
click node_styles "https://github.com/barry-far/personal-website/blob/main/app/css/main.css"
click node_media "https://github.com/barry-far/personal-website/tree/main/app/img/works"

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_portfolio,node_projects toneBlue
class node_project_interactions,node_gallery,node_sharing,node_contact toneAmber
class node_styles,node_media toneMint
class node_visitor,node_email,node_social toneIndigo
```

## Components

### Portfolio site

- [Portfolio page](https://github.com/barry-far/personal-website/blob/main/app/index.html): `app/index.html`
- [Project details](https://github.com/barry-far/personal-website/blob/main/app/index.html): `app/index.html`

### Interactive features

- [Project interactions](https://github.com/barry-far/personal-website/blob/main/app/js/custom.js): `app/js/custom.js`
- [Image gallery](https://github.com/barry-far/personal-website/blob/main/app/js/gallery-init.js): `app/js/gallery-init.js`
- [Project sharing](https://github.com/barry-far/personal-website/blob/main/app/js/gallery-init.js): `app/js/gallery-init.js`
- [Contact form](https://github.com/barry-far/personal-website/blob/main/app/js/custom.js): `app/js/custom.js`

### Presentation assets

- [Page styles](https://github.com/barry-far/personal-website/blob/main/app/css/main.css): `app/css/main.css`
- [Portfolio media](https://github.com/barry-far/personal-website/tree/main/app/img/works): `app/img/works`

### Other components

- **Visitor**
- **Email application**
- **Social platforms**

## Connections

- Visitor → Portfolio page: browses (evidence: `README.md`)
- Project interactions → Project details: opens panels (evidence: `app/js/custom.js`)
- Image gallery → Social platforms: opens project links (evidence: `app/js/gallery-init.js`)
- Project sharing → Social platforms: shares links (evidence: `app/js/gallery-init.js`)
- Contact form → Email application: opens mailto (evidence: `app/js/custom.js`)
- Visitor → Project interactions: activates controls (evidence: `app/js/custom.js`)
- Visitor → Image gallery: opens thumbnails (evidence: `app/js/gallery-init.js`)
- Visitor → Contact form: submits form (evidence: `app/js/custom.js`)