# kxianne27/kent-paler-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/kxianne27/kent-paler-portfolio
- Repository: https://github.com/kxianne27/kent-paler-portfolio

## Overview

This is a Next.js personal portfolio presenting the owner’s profile, expertise, experience, and software projects. Visitors browse the home page, open project case studies, and can use resume or contact options. The sampled code confirms the project-detail route reads project data, and the Resume, About, Navbar, and Contact components read their respective data modules. The home-page composition and several component implementations were not sampled, so their wiring is not asserted.

Main entry points: [`components/resume/Resume.tsx`](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/resume/Resume.tsx) (Resume Section), [`app/projects/[slug]/page.tsx`](https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx) (Project Case Study), [`data/profile.ts`](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/profile.ts) (Profile Data), [`components/layout/Navbar.tsx`](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/layout/Navbar.tsx) (Navigation Bar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Page and Navigation"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_home["Home Page<br/>[page.tsx]"]
  node_casepage["Project Case Study<br/>[page.tsx]"]
end

subgraph group_portfolio["Portfolio Content"]
  node_navbar["Navigation Bar<br/>[Navbar.tsx]"]
  node_hero["Hero Section<br/>[Hero.tsx]"]
  node_about["About Section<br/>[About.tsx]"]
  node_experience["Experience Section<br/>[Experience.tsx]"]
  node_projects["Project Listing<br/>[Projects.tsx]"]
  node_projectcard["Project Card<br/>[ProjectCard.tsx]"]
  node_resume["Resume Section<br/>[Resume.tsx]"]
  node_contact["Contact Section<br/>[Contact.tsx]"]
  node_footer["Site Footer<br/>[Footer.tsx]"]
end

subgraph group_contentdata["Portfolio Data"]
  node_profiledata["Profile Data<br/>[profile.ts]"]
  node_navigationdata["Navigation Data<br/>[navigation.ts]"]
  node_aboutdata["About Data<br/>[about.ts]"]
  node_experiencedata["Experience Data<br/>[experience.ts]"]
  node_skillsdata["Skills Data<br/>[skills.ts]"]
  node_projectsdata["Projects Data<br/>[projects.ts]"]
end

node_visitor(("Portfolio Visitor"))

node_visitor -->|"requests site"| node_layout
node_layout -->|"renders children"| node_home
node_visitor -->|"opens case study"| node_casepage
node_casepage -->|"reads project data"| node_projectsdata
node_navbar -->|"reads profile"| node_profiledata
node_navbar -->|"reads links"| node_navigationdata
node_about -->|"reads content"| node_aboutdata
node_resume -->|"reads profile"| node_profiledata
node_resume -->|"reads experience"| node_experiencedata
node_resume -->|"reads skills"| node_skillsdata
node_contact -->|"reads contact details"| node_profiledata
node_projectcard -->|"links to"| node_casepage

click node_layout "https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/layout.tsx"
click node_home "https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/page.tsx"
click node_casepage "https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx"
click node_navbar "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/layout/Navbar.tsx"
click node_hero "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/home/Hero.tsx"
click node_about "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/about/About.tsx"
click node_experience "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/experience/Experience.tsx"
click node_projects "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/projects/Projects.tsx"
click node_projectcard "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/projects/ProjectCard.tsx"
click node_resume "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/resume/Resume.tsx"
click node_contact "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/contact/Contact.tsx"
click node_footer "https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/layout/Footer.tsx"
click node_profiledata "https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/profile.ts"
click node_navigationdata "https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/navigation.ts"
click node_aboutdata "https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/about.ts"
click node_experiencedata "https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/experience.ts"
click node_skillsdata "https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/skills.ts"
click node_projectsdata "https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/projects.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_layout,node_home,node_casepage toneBlue
class node_navbar,node_hero,node_about,node_experience,node_projects,node_projectcard,node_resume,node_contact,node_footer toneAmber
class node_profiledata,node_navigationdata,node_aboutdata,node_experiencedata,node_skillsdata,node_projectsdata toneMint
class node_visitor toneIndigo
```

## Components

### Page and Navigation

- [Root Layout](https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home Page](https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Project Case Study](https://github.com/kxianne27/kent-paler-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx): `app/projects/[slug]/page.tsx`

### Portfolio Content

- [Navigation Bar](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/layout/Navbar.tsx): `components/layout/Navbar.tsx`
- [Hero Section](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/home/Hero.tsx): `components/home/Hero.tsx`
- [About Section](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/about/About.tsx): `components/about/About.tsx`
- [Experience Section](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/experience/Experience.tsx): `components/experience/Experience.tsx`
- [Project Listing](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/projects/Projects.tsx): `components/projects/Projects.tsx`
- [Project Card](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/projects/ProjectCard.tsx): `components/projects/ProjectCard.tsx`
- [Resume Section](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/resume/Resume.tsx): `components/resume/Resume.tsx`
- [Contact Section](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/contact/Contact.tsx): `components/contact/Contact.tsx`
- [Site Footer](https://github.com/kxianne27/kent-paler-portfolio/blob/main/components/layout/Footer.tsx): `components/layout/Footer.tsx`

### Portfolio Data

- [Profile Data](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/profile.ts): `data/profile.ts`
- [Navigation Data](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/navigation.ts): `data/navigation.ts`
- [About Data](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/about.ts): `data/about.ts`
- [Experience Data](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/experience.ts): `data/experience.ts`
- [Skills Data](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/skills.ts): `data/skills.ts`
- [Projects Data](https://github.com/kxianne27/kent-paler-portfolio/blob/main/data/projects.ts): `data/projects.ts`

### Other components

- **Portfolio Visitor**

## Connections

- Portfolio Visitor → Root Layout: requests site
- Root Layout → Home Page: renders children
- Portfolio Visitor → Project Case Study: opens case study
- Project Case Study → Projects Data: reads project data
- Navigation Bar → Profile Data: reads profile
- Navigation Bar → Navigation Data: reads links
- About Section → About Data: reads content
- Resume Section → Profile Data: reads profile
- Resume Section → Experience Data: reads experience
- Resume Section → Skills Data: reads skills
- Contact Section → Profile Data: reads contact details
- Project Card → Project Case Study: links to