# natthapong-t/natthapongthaboran architecture

> Architecture diagram of the GitHub repository natthapong-t/natthapongthaboran, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/natthapong-t/natthapongthaboran
- Repository: https://github.com/natthapong-t/natthapongthaboran

## Overview

This repository is a personal portfolio website. Visitors land on a profile and can browse work history, technical skills, and featured projects; listing pages filter experiences or projects, and detail pages present an individual record. Navigation and calls to action lead visitors toward contact or hiring. Portfolio content is held in a TypeScript data module, with experience duration calculated by a small utility. The graph reflects sampled imports and calls; some section components are represented from the tree, but their internal behavior was not inspected.

Main entry points: [`app/page.tsx`](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/page.tsx) (Home Route), [`data/portfolio-data.ts`](https://github.com/natthapong-t/natthapongthaboran/blob/main/data/portfolio-data.ts) (Portfolio Records), [`components/Navbar.tsx`](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/Navbar.tsx) (Navigation), [`components/Footer.tsx`](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/Footer.tsx) (Footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio Site"]
  node_home["Home Route<br/>[page.tsx]"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Profile Hero<br/>[HeroSection.tsx]"]
  node_stack["Skills Section<br/>[StackSection.tsx]"]
  node_contact["Contact Section<br/>[ContactSection.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_browse["Work Browsing"]
  node_worksection["Work Preview"]
  node_projectssection["Project Preview"]
  node_worklist["Experience List<br/>[page.tsx]"]
  node_workdetail["Experience Detail<br/>[page.tsx]"]
  node_projectlist["Project List<br/>[page.tsx]"]
  node_projectdetail["Project Detail<br/>[page.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_portfolio["Portfolio Records<br/>[portfolio-data.ts]"]
  node_duration["Duration Calculator<br/>[duration.ts]"]
end

node_visitor(("Visitor"))
node_fastwork(("Fastwork"))

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_worklist
node_visitor -->|"browses"| node_projectlist
node_layout -->|"wraps"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_worksection
node_home -->|"renders"| node_stack
node_home -->|"renders"| node_projectssection
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_worksection -->|"reads"| node_portfolio
node_projectssection -->|"reads"| node_portfolio
node_navbar -->|"reads"| node_portfolio
node_worklist -->|"reads"| node_portfolio
node_worklist -->|"renders"| node_navbar
node_worklist -->|"renders"| node_footer
node_workdetail -->|"looks up"| node_portfolio
node_workdetail -->|"calculates duration"| node_duration
node_workdetail -->|"renders"| node_navbar
node_workdetail -->|"renders"| node_footer
node_projectlist -->|"reads"| node_portfolio
node_projectlist -->|"renders"| node_navbar
node_projectlist -->|"renders"| node_footer
node_projectdetail -->|"looks up"| node_portfolio
node_projectdetail -->|"renders"| node_navbar
node_projectdetail -->|"renders"| node_footer
node_hero -->|"reads"| node_portfolio
node_hero -.->|"links to"| node_fastwork
node_navbar -.->|"links to"| node_fastwork

click node_home "https://github.com/natthapong-t/natthapongthaboran/blob/main/app/page.tsx"
click node_layout "https://github.com/natthapong-t/natthapongthaboran/blob/main/app/layout.tsx"
click node_navbar "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/Navbar.tsx"
click node_hero "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/HeroSection.tsx"
click node_stack "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/StackSection.tsx"
click node_contact "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/ContactSection.tsx"
click node_footer "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/Footer.tsx"
click node_worksection "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/ExperienceSection.tsx"
click node_projectssection "https://github.com/natthapong-t/natthapongthaboran/blob/main/components/ProjectsSection.tsx"
click node_worklist "https://github.com/natthapong-t/natthapongthaboran/blob/main/app/experiences/page.tsx"
click node_workdetail "https://github.com/natthapong-t/natthapongthaboran/blob/main/app/experiences/%5Bslug%5D/page.tsx"
click node_projectlist "https://github.com/natthapong-t/natthapongthaboran/blob/main/app/projects/page.tsx"
click node_projectdetail "https://github.com/natthapong-t/natthapongthaboran/blob/main/app/projects/%5Bslug%5D/page.tsx"
click node_portfolio "https://github.com/natthapong-t/natthapongthaboran/blob/main/data/portfolio-data.ts"
click node_duration "https://github.com/natthapong-t/natthapongthaboran/blob/main/lib/duration.ts"

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_home,node_layout,node_navbar,node_hero,node_stack,node_contact,node_footer toneBlue
class node_worksection,node_projectssection,node_worklist,node_workdetail,node_projectlist,node_projectdetail toneAmber
class node_portfolio,node_duration toneMint
class node_visitor,node_fastwork toneIndigo
```

## Components

### Portfolio Site

- [Home Route](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/page.tsx): `app/page.tsx`
- [Root Layout](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- [Profile Hero](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/HeroSection.tsx): `components/HeroSection.tsx`
- [Skills Section](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/StackSection.tsx): `components/StackSection.tsx`
- [Contact Section](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/ContactSection.tsx): `components/ContactSection.tsx`
- [Footer](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/Footer.tsx): `components/Footer.tsx`

### Work Browsing

- [Work Preview](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/ExperienceSection.tsx): `components/ExperienceSection.tsx`
- [Project Preview](https://github.com/natthapong-t/natthapongthaboran/blob/main/components/ProjectsSection.tsx): `components/ProjectsSection.tsx`
- [Experience List](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/experiences/page.tsx): `app/experiences/page.tsx`
- [Experience Detail](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/experiences/%5Bslug%5D/page.tsx): `app/experiences/[slug]/page.tsx`
- [Project List](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/projects/page.tsx): `app/projects/page.tsx`
- [Project Detail](https://github.com/natthapong-t/natthapongthaboran/blob/main/app/projects/%5Bslug%5D/page.tsx): `app/projects/[slug]/page.tsx`

### Portfolio Content

- [Portfolio Records](https://github.com/natthapong-t/natthapongthaboran/blob/main/data/portfolio-data.ts): `data/portfolio-data.ts`
- [Duration Calculator](https://github.com/natthapong-t/natthapongthaboran/blob/main/lib/duration.ts): `lib/duration.ts`

### Other components

- **Visitor**
- **Fastwork**

## Connections

- Visitor → Home Route: opens
- Visitor → Experience List: browses
- Visitor → Project List: browses
- Root Layout → Home Route: wraps
- Home Route → Navigation: renders
- Home Route → Profile Hero: renders
- Home Route → Work Preview: renders
- Home Route → Skills Section: renders
- Home Route → Project Preview: renders
- Home Route → Contact Section: renders
- Home Route → Footer: renders
- Work Preview → Portfolio Records: reads
- Project Preview → Portfolio Records: reads
- Navigation → Portfolio Records: reads
- Experience List → Portfolio Records: reads
- Experience List → Navigation: renders
- Experience List → Footer: renders
- Experience Detail → Portfolio Records: looks up
- Experience Detail → Duration Calculator: calculates duration
- Experience Detail → Navigation: renders
- Experience Detail → Footer: renders
- Project List → Portfolio Records: reads
- Project List → Navigation: renders
- Project List → Footer: renders
- Project Detail → Portfolio Records: looks up
- Project Detail → Navigation: renders
- Project Detail → Footer: renders
- Profile Hero → Portfolio Records: reads
- Profile Hero → Fastwork: links to
- Navigation → Fastwork: links to