# rayartmasbate/csit340-lab3-masbate architecture

> Architecture diagram of the GitHub repository rayartmasbate/csit340-lab3-masbate, 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/rayartmasbate/csit340-lab3-masbate
- Repository: https://github.com/rayartmasbate/csit340-lab3-masbate

## Overview

This repository is a React single-page personal portfolio. A visitor enters at the introduction, browses profile, skills, projects, and education sections, then can follow contact links. The sampled code shows the app composition and several section-to-component relationships; the footer and some reusable components are present in the tree but their implementations were not sampled, so their internal behavior is not inferred.

Main entry points: [`src/App.jsx`](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/App.jsx) (Page app), [`src/components/SectionHeading.jsx`](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SectionHeading.jsx) (Section heading), [`src/components/ProjectsSection.jsx`](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ProjectsSection.jsx) (Projects), [`src/components/ContactSection.jsx`](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ContactSection.jsx) (Contact details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Page composition"]
  node_runtime["React entry<br/>[main.jsx]"]
  node_app["Page app<br/>[App.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_about["About profile<br/>[AboutSection.jsx]"]
  node_skills["Skills<br/>[SkillsSection.jsx]"]
  node_projects["Projects"]
  node_experience["Education timeline"]
  node_sectionheading["Section heading<br/>[SectionHeading.jsx]"]
  node_skilltag["Skill tag<br/>[SkillTag.jsx]"]
  node_projectcard["Project card<br/>[ProjectCard.jsx]"]
  node_timelineitem["Timeline item<br/>[TimelineItem.jsx]"]
  node_fact["Profile fact<br/>[Fact.jsx]"]
end

subgraph group_navigation["Navigation and contact"]
  node_contact["Contact details<br/>[ContactSection.jsx]"]
  node_navbar["Section navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_contactlink["Contact link<br/>[ContactLink.jsx]"]
  node_navlink["Navigation link<br/>[NavLink.jsx]"]
end

node_visitor(("Visitor"))
node_github(("GitHub"))
node_social(("Social destinations"))

node_visitor -->|"opens page"| node_runtime
node_runtime -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_navbar -->|"renders"| node_navlink
node_about -->|"renders"| node_sectionheading
node_about -->|"renders"| node_fact
node_skills -->|"renders"| node_sectionheading
node_skills -->|"renders"| node_skilltag
node_projects -->|"renders"| node_sectionheading
node_projects -->|"renders"| node_projectcard
node_experience -->|"renders"| node_sectionheading
node_experience -->|"renders"| node_timelineitem
node_contact -->|"renders"| node_sectionheading
node_contact -->|"renders"| node_contactlink
node_projects -.->|"links to"| node_github
node_contact -.->|"links to"| node_social

click node_runtime "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/main.jsx"
click node_app "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/App.jsx"
click node_hero "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/AboutSection.jsx"
click node_skills "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SkillsSection.jsx"
click node_projects "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ProjectsSection.jsx"
click node_experience "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ExperienceSection.jsx"
click node_contact "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ContactSection.jsx"
click node_navbar "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Footer.jsx"
click node_sectionheading "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SectionHeading.jsx"
click node_skilltag "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SkillTag.jsx"
click node_projectcard "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ProjectCard.jsx"
click node_timelineitem "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/TimelineItem.jsx"
click node_fact "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Fact.jsx"
click node_contactlink "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ContactLink.jsx"
click node_navlink "https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/NavLink.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_runtime,node_app toneBlue
class node_hero,node_about,node_skills,node_projects,node_experience,node_sectionheading,node_skilltag,node_projectcard,node_timelineitem,node_fact toneAmber
class node_contact,node_navbar,node_footer,node_contactlink,node_navlink toneMint
class node_visitor,node_github,node_social toneIndigo
```

## Components

### Page composition

- [React entry](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/main.jsx): `src/main.jsx`
- [Page app](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio content

- [Introduction](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About profile](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/AboutSection.jsx): `src/components/AboutSection.jsx`
- [Skills](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SkillsSection.jsx): `src/components/SkillsSection.jsx`
- [Projects](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ProjectsSection.jsx): `src/components/ProjectsSection.jsx`
- [Education timeline](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ExperienceSection.jsx): `src/components/ExperienceSection.jsx`
- [Section heading](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SectionHeading.jsx): `src/components/SectionHeading.jsx`
- [Skill tag](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/SkillTag.jsx): `src/components/SkillTag.jsx`
- [Project card](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ProjectCard.jsx): `src/components/ProjectCard.jsx`
- [Timeline item](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/TimelineItem.jsx): `src/components/TimelineItem.jsx`
- [Profile fact](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Fact.jsx): `src/components/Fact.jsx`

### Navigation and contact

- [Contact details](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ContactSection.jsx): `src/components/ContactSection.jsx`
- [Section navigation](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Contact link](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/ContactLink.jsx): `src/components/ContactLink.jsx`
- [Navigation link](https://github.com/rayartmasbate/csit340-lab3-masbate/blob/main/src/components/NavLink.jsx): `src/components/NavLink.jsx`

### Other components

- **Visitor**
- **GitHub**
- **Social destinations**

## Connections

- Visitor → React entry: opens page
- React entry → Page app: mounts
- Page app → Section navigation: renders
- Page app → Introduction: renders
- Page app → About profile: renders
- Page app → Skills: renders
- Page app → Projects: renders
- Page app → Education timeline: renders
- Page app → Contact details: renders
- Page app → Footer: renders
- Section navigation → Navigation link: renders
- About profile → Section heading: renders
- About profile → Profile fact: renders
- Skills → Section heading: renders
- Skills → Skill tag: renders
- Projects → Section heading: renders
- Projects → Project card: renders
- Education timeline → Section heading: renders
- Education timeline → Timeline item: renders
- Contact details → Section heading: renders
- Contact details → Contact link: renders
- Projects → GitHub: links to
- Contact details → Social destinations: links to