How rayartmasbate/csit340-lab3-masbate works
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: App.jsx Page app · SectionHeading.jsx Section heading · ProjectsSection.jsx Projects · ContactSection.jsx Contact details
Components 20
Page composition
- React entry
src/main.jsx - Page app
src/App.jsx
Portfolio content
- Introduction
src/components/Hero.jsx - About profile
src/components/AboutSection.jsx - Skills
src/components/SkillsSection.jsx - Projects
src/components/ProjectsSection.jsx - Education timeline
src/components/ExperienceSection.jsx - Section heading
src/components/SectionHeading.jsx - Skill tag
src/components/SkillTag.jsx - Project card
src/components/ProjectCard.jsx - Timeline item
src/components/TimelineItem.jsx - Profile fact
src/components/Fact.jsx
Navigation and contact
- Contact details
src/components/ContactSection.jsx - Section navigation
src/components/Navbar.jsx - Footer
src/components/Footer.jsx - Contact link
src/components/ContactLink.jsx - Navigation link
src/components/NavLink.jsx
Other components
- Visitor
- GitHub
- Social destinations
Connections 23
- 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