How reymax164/dev-portfolio-v0 works
This is a data-driven React portfolio site: visitors browse the developer profile, skills, projects, credentials, education and contact information, with links to resume and social profiles. The app entry renders the page sections; those sections display shared portfolio data, and project and skill lists delegate card rendering to child components. The contact form only simulates submission locally. Source excerpts establish the main composition and several integrations; the separate GitHub section is present in the tree but its wiring into the page is not shown.
Main entry points: App.tsx Portfolio app · portfolioData.ts Portfolio data · ProjectsSection.tsx Projects section · portfolio.ts Portfolio types
Components 19
App runtime
- React entry
src/main.tsx - Portfolio app
src/App.tsx
Portfolio content
- Portfolio data
src/data/portfolioData.ts - Portfolio types
src/types/portfolio.ts
Page presentation
- Navigation
src/components/Navbar.tsx - Profile hero
src/components/sections/HeroSection.tsx - Skills section
src/components/sections/SkillsSection.tsx - Skill card
src/components/SkillCard.tsx - Projects section
src/components/sections/ProjectsSection.tsx - Project card
src/components/ProjectCard.tsx - Certifications
src/components/sections/CertificationsSection.tsx - Education section
src/components/sections/EducationSection.tsx - Contact section
src/components/sections/ContactSection.tsx - Footer
src/components/Footer.tsx - GitHub section
src/components/sections/GithubSection.tsx
External resources
- Resume PDF
public/pdfs/resume.pdf - Skill icon CDN
- GitHub activity chart
Other components
- Site visitor
Connections 27
- Site visitor → React entry: opens site
src/main.tsx - React entry → Portfolio app: renders
src/main.tsx - Portfolio app → Navigation: renders
src/App.tsx - Portfolio app → Profile hero: renders
src/App.tsx - Portfolio app → Skills section: renders
src/App.tsx - Portfolio app → Projects section: renders
src/App.tsx - Portfolio app → Certifications: renders
src/App.tsx - Portfolio app → Education section: renders
src/App.tsx - Portfolio app → Contact section: renders
src/App.tsx - Portfolio app → Footer: renders
src/App.tsx - Navigation → Portfolio data: reads links
src/components/Navbar.tsx - Profile hero → Portfolio data: reads profile
src/components/sections/HeroSection.tsx - Skills section → Portfolio data: reads skills
src/components/sections/SkillsSection.tsx - Skills section → Skill card: renders cards
src/components/sections/SkillsSection.tsx - Skill card → Portfolio types: uses types
src/components/SkillCard.tsx - Projects section → Portfolio data: reads projects
src/components/sections/ProjectsSection.tsx - Projects section → Project card: renders cards
src/components/sections/ProjectsSection.tsx - Project card → Portfolio types: uses types
src/components/ProjectCard.tsx - Certifications → Portfolio data: reads credentials
src/components/sections/CertificationsSection.tsx - Certifications → Portfolio types: uses types
src/components/sections/CertificationsSection.tsx - Education section → Portfolio data: reads education
src/components/sections/EducationSection.tsx - Contact section → Portfolio data: reads profile links
src/components/sections/ContactSection.tsx - Footer → Portfolio data: reads profile data
src/components/Footer.tsx - Portfolio data → Portfolio types: types records
src/data/portfolioData.ts - Portfolio data → Resume PDF: sets resume path
src/data/portfolioData.ts - Skill card → Skill icon CDN: loads icons
src/components/SkillCard.tsx - Projects section → GitHub activity chart: loads contribution chart
src/components/sections/ProjectsSection.tsx