# chunmenghor/react-tailwind-personal-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/chunmenghor/react-tailwind-personal-portfolio
- Repository: https://github.com/chunmenghor/react-tailwind-personal-portfolio

## Overview

This is a React personal-portfolio site: visitors browse the developer’s introduction, biography, selected projects, career history and testimonials, then can send a contact message. The App component assembles the page sections; the contact form uses EmailJS, while the other sections present locally defined content and navigation. Edges reflect the sampled imports and render calls. About was read in full; other core sections are represented from the supplied excerpts and source index, so unsampled behaviors are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/App.jsx) (Page Assembly), [`src/sections/Contact.jsx`](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Contact.jsx) (Contact Form), [`src/sections/Hero.jsx`](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Hero.jsx) (Introduction), [`src/layout/Navbar.jsx`](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/layout/Navbar.jsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio Page"]
  node_entry["React Mount<br/>[main.jsx]"]
  node_app["Page Assembly<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer Links<br/>[Footer.jsx]"]
end

subgraph group_content["Portfolio Content"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_about["About Profile<br/>[About.jsx]"]
  node_projects["Featured Projects<br/>[Projects.jsx]"]
  node_experience["Career Timeline<br/>[Experience.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
end

subgraph group_interaction["Visitor Interaction"]
  node_contact["Contact Form<br/>[Contact.jsx]"]
  node_emailjs["EmailJS"]
end

subgraph group_shared["Shared UI"]
  node_button["Button<br/>[Button.jsx]"]
  node_animated["Animated Button"]
end

node_visitor(("Visitor"))

node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_navbar -->|"uses"| node_button
node_hero -->|"uses"| node_button
node_hero -->|"uses"| node_animated
node_projects -->|"uses"| node_animated
node_contact -->|"uses"| node_button
node_contact -->|"sends via"| node_emailjs
node_visitor -.->|"navigates"| node_navbar
node_visitor -.->|"submits message"| node_contact

click node_entry "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/layout/Navbar.jsx"
click node_footer "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/layout/Footer.jsx"
click node_hero "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Hero.jsx"
click node_about "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/About.jsx"
click node_projects "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Projects.jsx"
click node_experience "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Experience.jsx"
click node_testimonials "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Testimonials.jsx"
click node_contact "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Contact.jsx"
click node_button "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/components/Button.jsx"
click node_animated "https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/components/AnimatedBorderButton.jsx"

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,node_navbar,node_footer toneBlue
class node_hero,node_about,node_projects,node_experience,node_testimonials toneAmber
class node_contact,node_emailjs toneMint
class node_button,node_animated toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio Page

- [React Mount](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Page Assembly](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/layout/Navbar.jsx): `src/layout/Navbar.jsx`
- [Footer Links](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/layout/Footer.jsx): `src/layout/Footer.jsx`

### Portfolio Content

- [Introduction](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Hero.jsx): `src/sections/Hero.jsx`
- [About Profile](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/About.jsx): `src/sections/About.jsx`
- [Featured Projects](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Projects.jsx): `src/sections/Projects.jsx`
- [Career Timeline](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Experience.jsx): `src/sections/Experience.jsx`
- [Testimonials](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Testimonials.jsx): `src/sections/Testimonials.jsx`

### Visitor Interaction

- [Contact Form](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/sections/Contact.jsx): `src/sections/Contact.jsx`
- **EmailJS**

### Shared UI

- [Button](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/components/Button.jsx): `src/components/Button.jsx`
- [Animated Button](https://github.com/chunmenghor/react-tailwind-personal-portfolio/blob/main/src/components/AnimatedBorderButton.jsx): `src/components/AnimatedBorderButton.jsx`

### Other components

- **Visitor**

## Connections

- React Mount → Page Assembly: renders (evidence: `src/main.jsx`)
- Page Assembly → Navigation: renders (evidence: `src/App.jsx`)
- Page Assembly → Introduction: renders (evidence: `src/App.jsx`)
- Page Assembly → About Profile: renders (evidence: `src/App.jsx`)
- Page Assembly → Featured Projects: renders (evidence: `src/App.jsx`)
- Page Assembly → Career Timeline: renders (evidence: `src/App.jsx`)
- Page Assembly → Testimonials: renders (evidence: `src/App.jsx`)
- Page Assembly → Contact Form: renders (evidence: `src/App.jsx`)
- Page Assembly → Footer Links: renders (evidence: `src/App.jsx`)
- Navigation → Button: uses (evidence: `src/layout/Navbar.jsx`)
- Introduction → Button: uses (evidence: `src/sections/Hero.jsx`)
- Introduction → Animated Button: uses (evidence: `src/sections/Hero.jsx`)
- Featured Projects → Animated Button: uses (evidence: `src/sections/Projects.jsx`)
- Contact Form → Button: uses (evidence: `src/sections/Contact.jsx`)
- Contact Form → EmailJS: sends via (evidence: `src/sections/Contact.jsx`)
- Visitor → Navigation: navigates
- Visitor → Contact Form: submits message