How 4ronjohn/gutierrez-portfolio works
This is a React personal portfolio for presenting a candidate’s profile, work history, projects, skills, education, and contact options. A visitor enters through the app, browses the rendered sections, and can follow contact links; the hero and navigation also scroll to page sections. The components are composed by App, while several use a shared scroll-reveal hook. Source excerpts show the composition and hook usage; unsampled component internals and asset wiring are not inferred.
Main entry points: App.jsx Page composition · useScrollAnimation.js Scroll reveal · main.jsx React entry · About.jsx About profile
Components 13
App entry
- React entry
src/main.jsx - Page composition
src/App.jsx
Profile sections
- Navigation
src/components/Navbar.jsx - Introduction
src/components/Hero.jsx - About profile
src/components/About.jsx - Contact options
src/components/Contact.jsx - Footer
src/components/Footer.jsx
Career showcase
- Experience
src/components/Experience.jsx - Projects gallery
src/components/Projects.jsx - Technical skills
src/components/Skills.jsx - Education
src/components/Education.jsx
Shared behavior
- Scroll reveal
src/hooks/useScrollAnimation.js
Other components
- Visitor
Connections 17
- Visitor → React entry: opens portfolio
- React entry → Page composition: renders
src/main.jsx - Page composition → Navigation: renders
src/App.jsx - Page composition → Introduction: renders
src/App.jsx - Page composition → About profile: renders
src/App.jsx - Page composition → Experience: renders
src/App.jsx - Page composition → Projects gallery: renders
src/App.jsx - Page composition → Technical skills: renders
src/App.jsx - Page composition → Education: renders
src/App.jsx - Page composition → Contact options: renders
src/App.jsx - Page composition → Footer: renders
src/App.jsx - About profile → Scroll reveal: uses
src/components/About.jsx - Experience → Scroll reveal: uses
src/components/Experience.jsx - Projects gallery → Scroll reveal: uses
src/components/Projects.jsx - Technical skills → Scroll reveal: uses
src/components/Skills.jsx - Education → Scroll reveal: uses
src/components/Education.jsx - Contact options → Scroll reveal: uses
src/components/Contact.jsx