# triscravello/tristan-portfolio-site architecture

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

- Interactive diagram: https://gitdiagram.com/triscravello/tristan-portfolio-site
- Repository: https://github.com/triscravello/tristan-portfolio-site

## Overview

This repository is a React portfolio website: visitors browse an introduction, biography, categorized project showcase, and contact form. The browser entry point mounts the routed application; the application renders shared navigation and footer around the selected page. The projects page renders categorized records from project data through reusable cards, while the contact page submits messages to Formspree. The README documents additional showcased areas including AI/ML and distributed systems. Evidence is limited to the README and sampled source; unsampled details are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/App.jsx) (App router), [`src/pages/Projects.jsx`](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Projects.jsx) (Projects page), [`src/pages/Contact.jsx`](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Contact.jsx) (Contact form), [`src/main.jsx`](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/main.jsx) (Browser entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_browser["Browser entry<br/>[main.jsx]"]
  node_router["App router<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Social footer<br/>[Footer.jsx]"]
end

subgraph group_pages["Portfolio pages"]
  node_home["Home<br/>[Home.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_resume["Resume PDF"]
end

subgraph group_showcase["Project showcase"]
  node_projects["Projects page<br/>[Projects.jsx]"]
  node_projectdata["Project catalog<br/>[projectsData.jsx]"]
  node_projectcard["Project cards<br/>[ProjectCard.jsx]"]
end

subgraph group_contact["Contact workflow"]
  node_contactpage["Contact form<br/>[Contact.jsx]"]
end

node_visitor(("Visitor"))
node_formspree{{"Formspree"}}

node_visitor -->|"opens site"| node_browser
node_browser -->|"mounts"| node_router
node_router -->|"renders"| node_navbar
node_router -->|"renders"| node_footer
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_about
node_router -->|"routes to"| node_projects
node_router -->|"routes to"| node_contactpage
node_home -->|"links to"| node_projects
node_projects -->|"reads"| node_projectdata
node_projects -->|"renders"| node_projectcard
node_contactpage -->|"submits to"| node_formspree
node_navbar -->|"links to"| node_resume
node_visitor -->|"sends inquiry"| node_contactpage

click node_browser "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/main.jsx"
click node_router "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/App.jsx"
click node_navbar "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/components/Footer.jsx"
click node_home "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Home.jsx"
click node_about "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/About.jsx"
click node_projects "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Projects.jsx"
click node_projectdata "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/data/projectsData.jsx"
click node_projectcard "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/components/ProjectCard.jsx"
click node_contactpage "https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Contact.jsx"
click node_resume "https://github.com/triscravello/tristan-portfolio-site/blob/main/public/images/TristanCravello-SoftwareEngineerResume.docx.pdf"

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_browser,node_router,node_navbar,node_footer toneBlue
class node_home,node_about,node_resume toneAmber
class node_projects,node_projectdata,node_projectcard toneMint
class node_contactpage toneRose
class node_visitor,node_formspree toneIndigo
```

## Components

### Application shell

- [Browser entry](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/main.jsx): `src/main.jsx`
- [App router](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Social footer](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Portfolio pages

- [Home](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [About](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/About.jsx): `src/pages/About.jsx`
- [Resume PDF](https://github.com/triscravello/tristan-portfolio-site/blob/main/public/images/TristanCravello-SoftwareEngineerResume.docx.pdf): `public/images/TristanCravello-SoftwareEngineerResume.docx.pdf`

### Project showcase

- [Projects page](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Projects.jsx): `src/pages/Projects.jsx`
- [Project catalog](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/data/projectsData.jsx): `src/data/projectsData.jsx`
- [Project cards](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/components/ProjectCard.jsx): `src/components/ProjectCard.jsx`

### Contact workflow

- [Contact form](https://github.com/triscravello/tristan-portfolio-site/blob/main/src/pages/Contact.jsx): `src/pages/Contact.jsx`

### Other components

- **Visitor**
- **Formspree**

## Connections

- Visitor → Browser entry: opens site (evidence: `README.md`)
- Browser entry → App router: mounts (evidence: `src/main.jsx`)
- App router → Navigation: renders (evidence: `src/App.jsx`)
- App router → Social footer: renders (evidence: `src/App.jsx`)
- App router → Home: routes to (evidence: `src/App.jsx`)
- App router → About: routes to (evidence: `src/App.jsx`)
- App router → Projects page: routes to (evidence: `src/App.jsx`)
- App router → Contact form: routes to (evidence: `src/App.jsx`)
- Home → Projects page: links to (evidence: `src/pages/Home.jsx`)
- Projects page → Project catalog: reads (evidence: `src/pages/Projects.jsx`)
- Projects page → Project cards: renders (evidence: `src/pages/Projects.jsx`)
- Contact form → Formspree: submits to (evidence: `src/pages/Contact.jsx`)
- Navigation → Resume PDF: links to (evidence: `src/components/Navbar.jsx`)
- Visitor → Contact form: sends inquiry (evidence: `README.md`)