# joshua-ryz/personal-website architecture

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

- Interactive diagram: https://gitdiagram.com/joshua-ryz/personal-website
- Repository: https://github.com/joshua-ryz/personal-website

## Overview

This is a React portfolio site presenting a student’s profile, projects, skills, interests, philosophy, and contact options. A visitor enters through the browser-mounted React app, sees the composed portfolio sections, and can navigate to contact or submit the contact form, which is initialized with client-side validation. Content is centralized in one data module; navigation and scroll animations are initialized separately at startup. The graph reflects the sampled imports and documented content use; it does not imply a server-side message service or inspect unsampled implementations.

Main entry points: [`personal-portfolio/src/App.jsx`](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/App.jsx) (Page Composition), [`personal-portfolio/src/data/content.js`](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/data/content.js) (Portfolio Content), [`personal-portfolio/src/main.jsx`](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/main.jsx) (React Bootstrap), [`personal-portfolio/src/components/Projects.jsx`](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Projects.jsx) (Project Gallery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_bootstrap["React Bootstrap<br/>[main.jsx]"]
  node_app_root["Page Composition<br/>[App.jsx]"]
end

subgraph group_portfolio["Portfolio Sections"]
  node_header["Site Navigation<br/>[Header.jsx]"]
  node_hero["Hero Introduction<br/>[Hero.jsx]"]
  node_about["About Profile<br/>[About.jsx]"]
  node_projects["Project Gallery<br/>[Projects.jsx]"]
  node_project_card["Project Card<br/>[ProjectCard.jsx]"]
  node_skills["Skills Display<br/>[Skills.jsx]"]
  node_interests["Career Interests<br/>[Interests.jsx]"]
  node_philosophy["Personal Philosophy<br/>[Philosophy.jsx]"]
  node_contact["Contact Section<br/>[Contact.jsx]"]
  node_footer["Footer and Socials<br/>[Footer.jsx]"]
  node_marquee["Content Marquee<br/>[Marquee.jsx]"]
end

subgraph group_content["Content and Cards"]
  node_content_data["Portfolio Content<br/>[content.js]"]
end

subgraph group_interaction["Client Interactions"]
  node_form_validation["Form Validation<br/>[formValidation.js]"]
  node_navigation_script["Navigation Behavior<br/>[navigation.js]"]
  node_animations["Scroll Animations<br/>[animations.js]"]
end

node_visitor(("Portfolio Visitor"))

node_visitor -->|"opens site"| node_bootstrap
node_bootstrap -->|"mounts"| node_app_root
node_app_root -->|"renders"| node_header
node_app_root -->|"renders"| node_hero
node_app_root -->|"renders"| node_about
node_app_root -->|"renders"| node_projects
node_app_root -->|"renders"| node_skills
node_app_root -->|"renders"| node_interests
node_app_root -->|"renders"| node_philosophy
node_app_root -->|"renders"| node_contact
node_app_root -->|"renders"| node_footer
node_app_root -->|"renders"| node_marquee
node_projects -->|"renders"| node_project_card
node_header -->|"reads navigation"| node_content_data
node_hero -->|"reads profile"| node_content_data
node_about -->|"reads profile"| node_content_data
node_projects -->|"reads projects"| node_content_data
node_skills -->|"reads skills"| node_content_data
node_interests -->|"reads interests"| node_content_data
node_philosophy -->|"reads philosophy"| node_content_data
node_contact -->|"reads contact details"| node_content_data
node_footer -->|"reads footer data"| node_content_data
node_marquee -->|"reads marquee data"| node_content_data
node_contact -->|"initializes form"| node_form_validation
node_bootstrap -->|"initializes navigation"| node_navigation_script
node_bootstrap -->|"initializes animations"| node_animations

click node_bootstrap "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/main.jsx"
click node_app_root "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/App.jsx"
click node_header "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Header.jsx"
click node_hero "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Hero.jsx"
click node_about "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/About.jsx"
click node_projects "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Projects.jsx"
click node_project_card "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/ProjectCard.jsx"
click node_skills "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Skills.jsx"
click node_interests "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Interests.jsx"
click node_philosophy "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Philosophy.jsx"
click node_contact "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Contact.jsx"
click node_footer "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Footer.jsx"
click node_marquee "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Marquee.jsx"
click node_content_data "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/data/content.js"
click node_form_validation "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/scripts/formValidation.js"
click node_navigation_script "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/scripts/navigation.js"
click node_animations "https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/scripts/animations.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_bootstrap,node_app_root toneBlue
class node_header,node_hero,node_about,node_projects,node_project_card,node_skills,node_interests,node_philosophy,node_contact,node_footer,node_marquee toneAmber
class node_content_data toneMint
class node_form_validation,node_navigation_script,node_animations toneRose
class node_visitor toneIndigo
```

## Components

### Application Shell

- [React Bootstrap](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/main.jsx): `personal-portfolio/src/main.jsx`
- [Page Composition](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/App.jsx): `personal-portfolio/src/App.jsx`

### Portfolio Sections

- [Site Navigation](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Header.jsx): `personal-portfolio/src/components/Header.jsx`
- [Hero Introduction](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Hero.jsx): `personal-portfolio/src/components/Hero.jsx`
- [About Profile](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/About.jsx): `personal-portfolio/src/components/About.jsx`
- [Project Gallery](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Projects.jsx): `personal-portfolio/src/components/Projects.jsx`
- [Project Card](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/ProjectCard.jsx): `personal-portfolio/src/components/ProjectCard.jsx`
- [Skills Display](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Skills.jsx): `personal-portfolio/src/components/Skills.jsx`
- [Career Interests](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Interests.jsx): `personal-portfolio/src/components/Interests.jsx`
- [Personal Philosophy](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Philosophy.jsx): `personal-portfolio/src/components/Philosophy.jsx`
- [Contact Section](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Contact.jsx): `personal-portfolio/src/components/Contact.jsx`
- [Footer and Socials](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Footer.jsx): `personal-portfolio/src/components/Footer.jsx`
- [Content Marquee](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/components/Marquee.jsx): `personal-portfolio/src/components/Marquee.jsx`

### Content and Cards

- [Portfolio Content](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/data/content.js): `personal-portfolio/src/data/content.js`

### Client Interactions

- [Form Validation](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/scripts/formValidation.js): `personal-portfolio/src/scripts/formValidation.js`
- [Navigation Behavior](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/scripts/navigation.js): `personal-portfolio/src/scripts/navigation.js`
- [Scroll Animations](https://github.com/joshua-ryz/personal-website/blob/main/personal-portfolio/src/scripts/animations.js): `personal-portfolio/src/scripts/animations.js`

### Other components

- **Portfolio Visitor**

## Connections

- Portfolio Visitor → React Bootstrap: opens site
- React Bootstrap → Page Composition: mounts (evidence: `personal-portfolio/src/main.jsx`)
- Page Composition → Site Navigation: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Hero Introduction: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → About Profile: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Project Gallery: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Skills Display: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Career Interests: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Personal Philosophy: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Contact Section: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Footer and Socials: renders (evidence: `personal-portfolio/src/App.jsx`)
- Page Composition → Content Marquee: renders (evidence: `personal-portfolio/src/App.jsx`)
- Project Gallery → Project Card: renders (evidence: `personal-portfolio/src/components/Projects.jsx`)
- Site Navigation → Portfolio Content: reads navigation (evidence: `personal-portfolio/src/components/Header.jsx`)
- Hero Introduction → Portfolio Content: reads profile (evidence: `personal-portfolio/src/components/Hero.jsx`)
- About Profile → Portfolio Content: reads profile (evidence: `personal-portfolio/src/components/About.jsx`)
- Project Gallery → Portfolio Content: reads projects (evidence: `personal-portfolio/src/components/Projects.jsx`)
- Skills Display → Portfolio Content: reads skills (evidence: `personal-portfolio/src/components/Skills.jsx`)
- Career Interests → Portfolio Content: reads interests (evidence: `personal-portfolio/src/components/Interests.jsx`)
- Personal Philosophy → Portfolio Content: reads philosophy (evidence: `personal-portfolio/src/components/Philosophy.jsx`)
- Contact Section → Portfolio Content: reads contact details (evidence: `personal-portfolio/src/components/Contact.jsx`)
- Footer and Socials → Portfolio Content: reads footer data (evidence: `personal-portfolio/src/components/Footer.jsx`)
- Content Marquee → Portfolio Content: reads marquee data (evidence: `personal-portfolio/src/components/Marquee.jsx`)
- Contact Section → Form Validation: initializes form (evidence: `personal-portfolio/src/components/Contact.jsx`)
- React Bootstrap → Navigation Behavior: initializes navigation (evidence: `personal-portfolio/src/main.jsx`)
- React Bootstrap → Scroll Animations: initializes animations (evidence: `personal-portfolio/src/main.jsx`)