# reymax164/dev-portfolio-v0 architecture

> Architecture diagram of the GitHub repository reymax164/dev-portfolio-v0, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/reymax164/dev-portfolio-v0
- Repository: https://github.com/reymax164/dev-portfolio-v0

## Overview

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: [`src/App.tsx`](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/App.tsx) (Portfolio app), [`src/data/portfolioData.ts`](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/data/portfolioData.ts) (Portfolio data), [`src/components/sections/ProjectsSection.tsx`](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/ProjectsSection.tsx) (Projects section), [`src/types/portfolio.ts`](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/types/portfolio.ts) (Portfolio types)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Portfolio app<br/>[App.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_data["Portfolio data<br/>[portfolioData.ts]"]
  node_types["Portfolio types<br/>[portfolio.ts]"]
end

subgraph group_presentation["Page presentation"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Profile hero<br/>[HeroSection.tsx]"]
  node_skills["Skills section<br/>[SkillsSection.tsx]"]
  node_skillcard["Skill card<br/>[SkillCard.tsx]"]
  node_projects["Projects section"]
  node_projectcard["Project card<br/>[ProjectCard.tsx]"]
  node_certifications["Certifications"]
  node_education["Education section"]
  node_contact["Contact section<br/>[ContactSection.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_githubsection["GitHub section<br/>[GithubSection.tsx]"]
end

subgraph group_integrations["External resources"]
  node_resume["Resume PDF<br/>[resume.pdf]"]
  node_skillicons{{"Skill icon CDN"}}
  node_githubactivity{{"GitHub activity chart"}}
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_certifications
node_app -->|"renders"| node_education
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_navbar -->|"reads links"| node_data
node_hero -->|"reads profile"| node_data
node_skills -->|"reads skills"| node_data
node_skills -->|"renders cards"| node_skillcard
node_skillcard -->|"uses types"| node_types
node_projects -->|"reads projects"| node_data
node_projects -->|"renders cards"| node_projectcard
node_projectcard -->|"uses types"| node_types
node_certifications -->|"reads credentials"| node_data
node_certifications -->|"uses types"| node_types
node_education -->|"reads education"| node_data
node_contact -->|"reads profile links"| node_data
node_footer -->|"reads profile data"| node_data
node_data -->|"types records"| node_types
node_data -->|"sets resume path"| node_resume
node_skillcard -->|"loads icons"| node_skillicons
node_projects -->|"loads contribution chart"| node_githubactivity

click node_entry "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/main.tsx"
click node_app "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/App.tsx"
click node_data "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/data/portfolioData.ts"
click node_types "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/types/portfolio.ts"
click node_navbar "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/HeroSection.tsx"
click node_skills "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/SkillsSection.tsx"
click node_skillcard "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/SkillCard.tsx"
click node_projects "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/ProjectsSection.tsx"
click node_projectcard "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/ProjectCard.tsx"
click node_certifications "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/CertificationsSection.tsx"
click node_education "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/EducationSection.tsx"
click node_contact "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/ContactSection.tsx"
click node_footer "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/Footer.tsx"
click node_githubsection "https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/GithubSection.tsx"
click node_resume "https://github.com/reymax164/dev-portfolio-v0/blob/main/public/pdfs/resume.pdf"

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_entry,node_app toneBlue
class node_data,node_types toneAmber
class node_navbar,node_hero,node_skills,node_skillcard,node_projects,node_projectcard,node_certifications,node_education,node_contact,node_footer,node_githubsection toneMint
class node_resume,node_skillicons,node_githubactivity toneRose
class node_visitor toneIndigo
```

## Components

### App runtime

- [React entry](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/main.tsx): `src/main.tsx`
- [Portfolio app](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/App.tsx): `src/App.tsx`

### Portfolio content

- [Portfolio data](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/data/portfolioData.ts): `src/data/portfolioData.ts`
- [Portfolio types](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/types/portfolio.ts): `src/types/portfolio.ts`

### Page presentation

- [Navigation](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Profile hero](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/HeroSection.tsx): `src/components/sections/HeroSection.tsx`
- [Skills section](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/SkillsSection.tsx): `src/components/sections/SkillsSection.tsx`
- [Skill card](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/SkillCard.tsx): `src/components/SkillCard.tsx`
- [Projects section](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/ProjectsSection.tsx): `src/components/sections/ProjectsSection.tsx`
- [Project card](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/ProjectCard.tsx): `src/components/ProjectCard.tsx`
- [Certifications](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/CertificationsSection.tsx): `src/components/sections/CertificationsSection.tsx`
- [Education section](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/EducationSection.tsx): `src/components/sections/EducationSection.tsx`
- [Contact section](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/ContactSection.tsx): `src/components/sections/ContactSection.tsx`
- [Footer](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [GitHub section](https://github.com/reymax164/dev-portfolio-v0/blob/main/src/components/sections/GithubSection.tsx): `src/components/sections/GithubSection.tsx`

### External resources

- [Resume PDF](https://github.com/reymax164/dev-portfolio-v0/blob/main/public/pdfs/resume.pdf): `public/pdfs/resume.pdf`
- **Skill icon CDN**
- **GitHub activity chart**

### Other components

- **Site visitor**

## Connections

- Site visitor → React entry: opens site (evidence: `src/main.tsx`)
- React entry → Portfolio app: renders (evidence: `src/main.tsx`)
- Portfolio app → Navigation: renders (evidence: `src/App.tsx`)
- Portfolio app → Profile hero: renders (evidence: `src/App.tsx`)
- Portfolio app → Skills section: renders (evidence: `src/App.tsx`)
- Portfolio app → Projects section: renders (evidence: `src/App.tsx`)
- Portfolio app → Certifications: renders (evidence: `src/App.tsx`)
- Portfolio app → Education section: renders (evidence: `src/App.tsx`)
- Portfolio app → Contact section: renders (evidence: `src/App.tsx`)
- Portfolio app → Footer: renders (evidence: `src/App.tsx`)
- Navigation → Portfolio data: reads links (evidence: `src/components/Navbar.tsx`)
- Profile hero → Portfolio data: reads profile (evidence: `src/components/sections/HeroSection.tsx`)
- Skills section → Portfolio data: reads skills (evidence: `src/components/sections/SkillsSection.tsx`)
- Skills section → Skill card: renders cards (evidence: `src/components/sections/SkillsSection.tsx`)
- Skill card → Portfolio types: uses types (evidence: `src/components/SkillCard.tsx`)
- Projects section → Portfolio data: reads projects (evidence: `src/components/sections/ProjectsSection.tsx`)
- Projects section → Project card: renders cards (evidence: `src/components/sections/ProjectsSection.tsx`)
- Project card → Portfolio types: uses types (evidence: `src/components/ProjectCard.tsx`)
- Certifications → Portfolio data: reads credentials (evidence: `src/components/sections/CertificationsSection.tsx`)
- Certifications → Portfolio types: uses types (evidence: `src/components/sections/CertificationsSection.tsx`)
- Education section → Portfolio data: reads education (evidence: `src/components/sections/EducationSection.tsx`)
- Contact section → Portfolio data: reads profile links (evidence: `src/components/sections/ContactSection.tsx`)
- Footer → Portfolio data: reads profile data (evidence: `src/components/Footer.tsx`)
- Portfolio data → Portfolio types: types records (evidence: `src/data/portfolioData.ts`)
- Portfolio data → Resume PDF: sets resume path (evidence: `src/data/portfolioData.ts`)
- Skill card → Skill icon CDN: loads icons (evidence: `src/components/SkillCard.tsx`)
- Projects section → GitHub activity chart: loads contribution chart (evidence: `src/components/sections/ProjectsSection.tsx`)