How joshua-ryz/personal-website works
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: App.jsx Page Composition · content.js Portfolio Content · main.jsx React Bootstrap · Projects.jsx Project Gallery
Components 18
Application Shell
- React Bootstrap
personal-portfolio/src/main.jsx - Page Composition
personal-portfolio/src/App.jsx
Portfolio Sections
- Site Navigation
personal-portfolio/src/components/Header.jsx - Hero Introduction
personal-portfolio/src/components/Hero.jsx - About Profile
personal-portfolio/src/components/About.jsx - Project Gallery
personal-portfolio/src/components/Projects.jsx - Project Card
personal-portfolio/src/components/ProjectCard.jsx - Skills Display
personal-portfolio/src/components/Skills.jsx - Career Interests
personal-portfolio/src/components/Interests.jsx - Personal Philosophy
personal-portfolio/src/components/Philosophy.jsx - Contact Section
personal-portfolio/src/components/Contact.jsx - Footer and Socials
personal-portfolio/src/components/Footer.jsx - Content Marquee
personal-portfolio/src/components/Marquee.jsx
Content and Cards
- Portfolio Content
personal-portfolio/src/data/content.js
Client Interactions
- Form Validation
personal-portfolio/src/scripts/formValidation.js - Navigation Behavior
personal-portfolio/src/scripts/navigation.js - Scroll Animations
personal-portfolio/src/scripts/animations.js
Other components
- Portfolio Visitor
Connections 26
- Portfolio Visitor → React Bootstrap: opens site
- React Bootstrap → Page Composition: mounts
personal-portfolio/src/main.jsx - Page Composition → Site Navigation: renders
personal-portfolio/src/App.jsx - Page Composition → Hero Introduction: renders
personal-portfolio/src/App.jsx - Page Composition → About Profile: renders
personal-portfolio/src/App.jsx - Page Composition → Project Gallery: renders
personal-portfolio/src/App.jsx - Page Composition → Skills Display: renders
personal-portfolio/src/App.jsx - Page Composition → Career Interests: renders
personal-portfolio/src/App.jsx - Page Composition → Personal Philosophy: renders
personal-portfolio/src/App.jsx - Page Composition → Contact Section: renders
personal-portfolio/src/App.jsx - Page Composition → Footer and Socials: renders
personal-portfolio/src/App.jsx - Page Composition → Content Marquee: renders
personal-portfolio/src/App.jsx - Project Gallery → Project Card: renders
personal-portfolio/src/components/Projects.jsx - Site Navigation → Portfolio Content: reads navigation
personal-portfolio/src/components/Header.jsx - Hero Introduction → Portfolio Content: reads profile
personal-portfolio/src/components/Hero.jsx - About Profile → Portfolio Content: reads profile
personal-portfolio/src/components/About.jsx - Project Gallery → Portfolio Content: reads projects
personal-portfolio/src/components/Projects.jsx - Skills Display → Portfolio Content: reads skills
personal-portfolio/src/components/Skills.jsx - Career Interests → Portfolio Content: reads interests
personal-portfolio/src/components/Interests.jsx - Personal Philosophy → Portfolio Content: reads philosophy
personal-portfolio/src/components/Philosophy.jsx - Contact Section → Portfolio Content: reads contact details
personal-portfolio/src/components/Contact.jsx - Footer and Socials → Portfolio Content: reads footer data
personal-portfolio/src/components/Footer.jsx - Content Marquee → Portfolio Content: reads marquee data
personal-portfolio/src/components/Marquee.jsx - Contact Section → Form Validation: initializes form
personal-portfolio/src/components/Contact.jsx - React Bootstrap → Navigation Behavior: initializes navigation
personal-portfolio/src/main.jsx - React Bootstrap → Scroll Animations: initializes animations
personal-portfolio/src/main.jsx