# picakhant/aster-dev architecture

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

- Interactive diagram: https://gitdiagram.com/picakhant/aster-dev
- Repository: https://github.com/picakhant/aster-dev

## Overview

This is a Next.js personal portfolio: visitors browse the profile, GitHub-backed projects, Markdown blog posts, and contact options. The main dynamic workflows fetch project or blog data from GitHub, present listings, and render selected repository README or post content. Configuration supplies site and refresh settings. The graph follows documented behavior and indexed imports; unsampled component internals are represented by their enclosing directories, so their internal interactions are not inferred.

Main entry points: [`app/projects/[slug]/page.tsx`](https://github.com/picakhant/aster-dev/blob/main/app/projects/%5Bslug%5D/page.tsx) (Project detail), [`app/blog/[slug]/page.tsx`](https://github.com/picakhant/aster-dev/blob/main/app/blog/%5Bslug%5D/page.tsx) (Blog detail), [`app/projects/page.tsx`](https://github.com/picakhant/aster-dev/blob/main/app/projects/page.tsx) (Project listing), [`app/blog/page.tsx`](https://github.com/picakhant/aster-dev/blob/main/app/blog/page.tsx) (Blog listing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio experience"]
  node_home["Home profile<br/>[page.tsx]"]
  node_home_sections["Profile sections"]
  node_contact_page["Contact page<br/>[page.tsx]"]
  node_contact_cards["Contact cards"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
  node_site_config["Site configuration<br/>[site.config.ts]"]
end

subgraph group_projects["Projects"]
  node_project_list["Project listing<br/>[page.tsx]"]
  node_project_grid["Project cards<br/>[ProjectGrid.tsx]"]
  node_project_card["Project card<br/>[ProjectCard.tsx]"]
  node_project_detail["Project detail<br/>[page.tsx]"]
  node_github_data["GitHub project data<br/>[github.ts]"]
end

subgraph group_publishing["Blog publishing"]
  node_blog_list["Blog listing<br/>[page.tsx]"]
  node_blog_grid["Blog cards<br/>[BlogGrid.tsx]"]
  node_blog_card["Blog card<br/>[BlogCard.tsx]"]
  node_blog_detail["Blog detail<br/>[page.tsx]"]
  node_blog_data["Blog fetching<br/>[blog.ts]"]
end

subgraph group_shared["Shared presentation"]
  node_markdown["Markdown renderer<br/>[Markdown.tsx]"]
  node_shared_ui["Shared UI"]
end

node_visitor(("Visitor"))
node_github_service(("GitHub"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_home_sections
node_visitor -->|"opens"| node_project_list
node_project_list -->|"loads repositories"| node_github_data
node_project_list -->|"renders"| node_project_grid
node_project_grid -->|"renders cards"| node_project_card
node_project_card -->|"links overview"| node_project_detail
node_visitor -->|"opens"| node_project_detail
node_project_detail -->|"loads project and README"| node_github_data
node_project_detail -->|"renders README"| node_markdown
node_github_data -->|"fetches repositories"| node_github_service
node_visitor -->|"opens"| node_blog_list
node_blog_list -->|"loads posts"| node_blog_data
node_blog_list -->|"renders"| node_blog_grid
node_blog_grid -->|"renders cards"| node_blog_card
node_blog_card -->|"links post"| node_blog_detail
node_visitor -->|"opens"| node_blog_detail
node_blog_detail -->|"loads post content"| node_blog_data
node_blog_detail -->|"renders post"| node_markdown
node_blog_data -->|"fetches Markdown"| node_github_service
node_visitor -->|"opens"| node_contact_page
node_contact_page -->|"renders cards"| node_contact_cards
node_navigation -->|"reads links"| node_site_config
node_navigation -->|"uses theme toggle"| node_shared_ui
node_home_sections -->|"reads profile content"| node_site_config

click node_home "https://github.com/picakhant/aster-dev/blob/main/app/page.tsx"
click node_home_sections "https://github.com/picakhant/aster-dev/tree/main/components/home"
click node_contact_page "https://github.com/picakhant/aster-dev/blob/main/app/contact/page.tsx"
click node_contact_cards "https://github.com/picakhant/aster-dev/tree/main/components/contact"
click node_navigation "https://github.com/picakhant/aster-dev/blob/main/components/layout/Navbar.tsx"
click node_site_config "https://github.com/picakhant/aster-dev/blob/main/site.config.ts"
click node_project_list "https://github.com/picakhant/aster-dev/blob/main/app/projects/page.tsx"
click node_project_grid "https://github.com/picakhant/aster-dev/blob/main/components/projects/ProjectGrid.tsx"
click node_project_card "https://github.com/picakhant/aster-dev/blob/main/components/projects/ProjectCard.tsx"
click node_project_detail "https://github.com/picakhant/aster-dev/blob/main/app/projects/%5Bslug%5D/page.tsx"
click node_github_data "https://github.com/picakhant/aster-dev/blob/main/lib/github.ts"
click node_blog_list "https://github.com/picakhant/aster-dev/blob/main/app/blog/page.tsx"
click node_blog_grid "https://github.com/picakhant/aster-dev/blob/main/components/blog/BlogGrid.tsx"
click node_blog_card "https://github.com/picakhant/aster-dev/blob/main/components/blog/BlogCard.tsx"
click node_blog_detail "https://github.com/picakhant/aster-dev/blob/main/app/blog/%5Bslug%5D/page.tsx"
click node_blog_data "https://github.com/picakhant/aster-dev/blob/main/lib/blog.ts"
click node_markdown "https://github.com/picakhant/aster-dev/blob/main/components/projects/Markdown.tsx"
click node_shared_ui "https://github.com/picakhant/aster-dev/tree/main/components/ui"

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_home_sections,node_contact_page,node_contact_cards,node_navigation,node_site_config toneBlue
class node_project_list,node_project_grid,node_project_card,node_project_detail,node_github_data toneAmber
class node_blog_list,node_blog_grid,node_blog_card,node_blog_detail,node_blog_data toneMint
class node_markdown,node_shared_ui toneRose
class node_visitor,node_github_service toneIndigo
```

## Components

### Portfolio experience

- [Home profile](https://github.com/picakhant/aster-dev/blob/main/app/page.tsx): `app/page.tsx`
- [Profile sections](https://github.com/picakhant/aster-dev/tree/main/components/home): `components/home`
- [Contact page](https://github.com/picakhant/aster-dev/blob/main/app/contact/page.tsx): `app/contact/page.tsx`
- [Contact cards](https://github.com/picakhant/aster-dev/tree/main/components/contact): `components/contact`
- [Navigation](https://github.com/picakhant/aster-dev/blob/main/components/layout/Navbar.tsx): `components/layout/Navbar.tsx`
- [Site configuration](https://github.com/picakhant/aster-dev/blob/main/site.config.ts): `site.config.ts`

### Projects

- [Project listing](https://github.com/picakhant/aster-dev/blob/main/app/projects/page.tsx): `app/projects/page.tsx`
- [Project cards](https://github.com/picakhant/aster-dev/blob/main/components/projects/ProjectGrid.tsx): `components/projects/ProjectGrid.tsx`
- [Project card](https://github.com/picakhant/aster-dev/blob/main/components/projects/ProjectCard.tsx): `components/projects/ProjectCard.tsx`
- [Project detail](https://github.com/picakhant/aster-dev/blob/main/app/projects/%5Bslug%5D/page.tsx): `app/projects/[slug]/page.tsx`
- [GitHub project data](https://github.com/picakhant/aster-dev/blob/main/lib/github.ts): `lib/github.ts`

### Blog publishing

- [Blog listing](https://github.com/picakhant/aster-dev/blob/main/app/blog/page.tsx): `app/blog/page.tsx`
- [Blog cards](https://github.com/picakhant/aster-dev/blob/main/components/blog/BlogGrid.tsx): `components/blog/BlogGrid.tsx`
- [Blog card](https://github.com/picakhant/aster-dev/blob/main/components/blog/BlogCard.tsx): `components/blog/BlogCard.tsx`
- [Blog detail](https://github.com/picakhant/aster-dev/blob/main/app/blog/%5Bslug%5D/page.tsx): `app/blog/[slug]/page.tsx`
- [Blog fetching](https://github.com/picakhant/aster-dev/blob/main/lib/blog.ts): `lib/blog.ts`

### Shared presentation

- [Markdown renderer](https://github.com/picakhant/aster-dev/blob/main/components/projects/Markdown.tsx): `components/projects/Markdown.tsx`
- [Shared UI](https://github.com/picakhant/aster-dev/tree/main/components/ui): `components/ui`

### Other components

- **Visitor**
- **GitHub**

## Connections

- Visitor → Home profile: opens (evidence: `README.md`)
- Home profile → Profile sections: renders (evidence: `app/page.tsx`)
- Visitor → Project listing: opens (evidence: `README.md`)
- Project listing → GitHub project data: loads repositories (evidence: `app/projects/page.tsx`)
- Project listing → Project cards: renders (evidence: `app/projects/page.tsx`)
- Project cards → Project card: renders cards (evidence: `components/projects/ProjectGrid.tsx`)
- Project card → Project detail: links overview (evidence: `components/projects/ProjectCard.tsx`)
- Visitor → Project detail: opens (evidence: `README.md`)
- Project detail → GitHub project data: loads project and README (evidence: `app/projects/[slug]/page.tsx`)
- Project detail → Markdown renderer: renders README (evidence: `app/projects/[slug]/page.tsx`)
- GitHub project data → GitHub: fetches repositories (evidence: `lib/github.ts`)
- Visitor → Blog listing: opens (evidence: `README.md`)
- Blog listing → Blog fetching: loads posts (evidence: `app/blog/page.tsx`)
- Blog listing → Blog cards: renders (evidence: `app/blog/page.tsx`)
- Blog cards → Blog card: renders cards (evidence: `components/blog/BlogGrid.tsx`)
- Blog card → Blog detail: links post (evidence: `components/blog/BlogCard.tsx`)
- Visitor → Blog detail: opens (evidence: `README.md`)
- Blog detail → Blog fetching: loads post content (evidence: `app/blog/[slug]/page.tsx`)
- Blog detail → Markdown renderer: renders post (evidence: `app/blog/[slug]/page.tsx`)
- Blog fetching → GitHub: fetches Markdown (evidence: `lib/blog.ts`)
- Visitor → Contact page: opens (evidence: `README.md`)
- Contact page → Contact cards: renders cards (evidence: `app/contact/page.tsx`)
- Navigation → Site configuration: reads links (evidence: `components/layout/Navbar.tsx`)
- Navigation → Shared UI: uses theme toggle (evidence: `components/layout/Navbar.tsx`)
- Profile sections → Site configuration: reads profile content (evidence: `components/home/Hero.tsx`)