# buhanghangjay-git/jaybuhanghang architecture

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

- Interactive diagram: https://gitdiagram.com/buhanghangjay-git/jaybuhanghang
- Repository: https://github.com/buhanghangjay-git/jaybuhanghang

## Overview

This repository is a personal portfolio website built with Next.js. A visitor loads the home page, which composes the navigation, introduction, and portfolio sections into one page. Those sections present profile, skills, featured work, experience, certifications, and a footer; the navigation also manages theme and mobile-menu state. The featured-work component displays a SmartLink case study with screenshots. Contact.tsx is not included in the home-page imports, so it is omitted from the rendered workflow. Edges reflect shown imports and component behavior.

Main entry points: [`app/page.tsx`](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/app/page.tsx) (Home page), [`components/Hero.tsx`](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Hero.tsx) (Introduction), [`components/Projects.tsx`](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Projects.tsx) (Featured work), [`components/Navbar.tsx`](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Navbar.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Page runtime"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Introduction<br/>[Hero.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_projects["Featured work<br/>[Projects.tsx]"]
  node_experience["Experience<br/>[Experience.tsx]"]
  node_certifications["Certifications<br/>[Certifications.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_smartlink_images["Case study images"]
end

subgraph group_interaction["Visitor interactions"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_browser_storage[("Browser local storage")]
end

node_visitor(("Visitor"))
node_social_sites(("Social platforms"))

node_visitor -->|"opens page"| node_home
node_layout -->|"renders children"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_certifications
node_home -->|"renders"| node_footer
node_navbar -->|"reads and writes"| node_browser_storage
node_hero -->|"links to"| node_social_sites
node_projects -->|"displays"| node_smartlink_images

click node_layout "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/app/layout.tsx"
click node_home "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/app/page.tsx"
click node_navbar "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Navbar.tsx"
click node_hero "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Hero.tsx"
click node_about "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/About.tsx"
click node_skills "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Skills.tsx"
click node_projects "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Projects.tsx"
click node_experience "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Experience.tsx"
click node_certifications "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Certifications.tsx"
click node_footer "https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Footer.tsx"
click node_smartlink_images "https://github.com/buhanghangjay-git/jaybuhanghang/tree/main/public/capstone"

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 toneBlue
class node_hero,node_about,node_skills,node_projects,node_experience,node_certifications,node_footer,node_smartlink_images toneAmber
class node_navbar,node_browser_storage toneMint
class node_visitor,node_social_sites toneIndigo
```

## Components

### Page runtime

- [Root layout](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home page](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/app/page.tsx): `app/page.tsx`

### Portfolio content

- [Introduction](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [About](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/About.tsx): `components/About.tsx`
- [Skills](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Skills.tsx): `components/Skills.tsx`
- [Featured work](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Projects.tsx): `components/Projects.tsx`
- [Experience](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Experience.tsx): `components/Experience.tsx`
- [Certifications](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Certifications.tsx): `components/Certifications.tsx`
- [Footer](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Case study images](https://github.com/buhanghangjay-git/jaybuhanghang/tree/main/public/capstone): `public/capstone`

### Visitor interactions

- [Navigation](https://github.com/buhanghangjay-git/jaybuhanghang/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- **Browser local storage**

### Other components

- **Visitor**
- **Social platforms**

## Connections

- Visitor → Home page: opens page (evidence: `README.md`)
- Root layout → Home page: renders children (evidence: `app/layout.tsx`)
- Home page → Navigation: renders (evidence: `app/page.tsx`)
- Home page → Introduction: renders (evidence: `app/page.tsx`)
- Home page → About: renders (evidence: `app/page.tsx`)
- Home page → Skills: renders (evidence: `app/page.tsx`)
- Home page → Featured work: renders (evidence: `app/page.tsx`)
- Home page → Experience: renders (evidence: `app/page.tsx`)
- Home page → Certifications: renders (evidence: `app/page.tsx`)
- Home page → Footer: renders (evidence: `app/page.tsx`)
- Navigation → Browser local storage: reads and writes (evidence: `components/Navbar.tsx`)
- Introduction → Social platforms: links to (evidence: `components/Hero.tsx`)
- Featured work → Case study images: displays (evidence: `components/Projects.tsx`)