# ryannkim327/ryannkim327.github.io architecture

> Architecture diagram of the GitHub repository ryannkim327/ryannkim327.github.io, 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/ryannkim327/ryannkim327.github.io
- Repository: https://github.com/ryannkim327/ryannkim327.github.io

## Overview

This is a React portfolio with a public showcase and a separate administration area backed by a Go REST API. Visitors enter through the router and see portfolio sections populated with content; they can browse full blog, project, certificate, and download views, submit feedback, and use the contextual chatbot. Administrators sign in and manage content or review contact messages. The graph preserves these product areas and shared API/Markdown layers. Some route and widget details are represented by directory-level nodes because their source was not excerpted; edges are limited to shown imports/calls or README claims.

Main entry points: [`src/lib/api.ts`](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/api.ts) (API Client), [`src/main.tsx`](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/main.tsx) (Route Entry), [`src/app.tsx`](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/app.tsx) (Portfolio Home), [`src/components/index`](https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/components/index) (Profile Sections)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Portfolio"]
  node_router["Route Entry<br/>[main.tsx]"]
  node_portfolio["Portfolio Home<br/>[app.tsx]"]
  node_showcase["Profile Sections"]
  node_blogbrowse["Blog Browser<br/>[blogs.tsx]"]
  node_publiccontent["Content Views"]
  node_feedback["Feedback Form<br/>[feedback.tsx]"]
  node_chatbot["Portfolio Chatbot<br/>[chatbot.tsx]"]
end

subgraph group_admin["Administration"]
  node_adminshell["Admin Shell<br/>[admin.tsx]"]
  node_login["Admin Login<br/>[login.tsx]"]
  node_dashboard["Contact Dashboard<br/>[index.tsx]"]
  node_contentadmin["Content Management"]
  node_markdowneditor["Markdown Editor"]
end

subgraph group_shared["Shared Services"]
  node_api["API Client<br/>[api.ts]"]
  node_storage[("Browser Storage<br/>[storage.ts]")]
  node_markdown["Markdown Rendering<br/>[markdown.ts]"]
  node_interfaces["Content Types<br/>[interface.ts]"]
end

subgraph group_external["External Services"]
  node_backend["Portfolio REST API"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_router
node_router -->|"routes to"| node_portfolio
node_router -->|"routes to"| node_blogbrowse
node_router -->|"routes to"| node_publiccontent
node_router -->|"routes to"| node_adminshell
node_portfolio -->|"renders"| node_showcase
node_portfolio -->|"loads content"| node_api
node_portfolio -->|"renders"| node_chatbot
node_portfolio -->|"renders"| node_feedback
node_blogbrowse -->|"fetches blogs"| node_api
node_publiccontent -->|"fetches content"| node_api
node_chatbot -->|"sends chat"| node_api
node_showcase -->|"loads content"| node_api
node_adminshell -->|"renders"| node_login
node_adminshell -->|"uses session state"| node_storage
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_contentadmin
node_dashboard -->|"loads contacts"| node_api
node_contentadmin -->|"manages content"| node_api
node_contentadmin -->|"uses editor"| node_markdowneditor
node_markdowneditor -->|"renders preview"| node_markdown
node_blogbrowse -->|"renders blog text"| node_markdown
node_api -->|"uses session token"| node_storage
node_api -->|"sends REST requests"| node_backend
node_showcase -->|"uses content types"| node_interfaces
node_api -->|"types responses"| node_interfaces

click node_router "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/main.tsx"
click node_portfolio "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/app.tsx"
click node_showcase "https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/components/index"
click node_blogbrowse "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/routes/users/blogs.tsx"
click node_publiccontent "https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/routes/users"
click node_feedback "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/index/feedback.tsx"
click node_chatbot "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/widgets/chatbot.tsx"
click node_adminshell "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/admin.tsx"
click node_login "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/admin/login.tsx"
click node_dashboard "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/routes/admin/index.tsx"
click node_contentadmin "https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/routes/admin"
click node_markdowneditor "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/widgets/markdown-editor.tsx"
click node_api "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/api.ts"
click node_storage "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/storage.ts"
click node_markdown "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/markdown.ts"
click node_interfaces "https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/interface.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_router,node_portfolio,node_showcase,node_blogbrowse,node_publiccontent,node_feedback,node_chatbot toneBlue
class node_adminshell,node_login,node_dashboard,node_contentadmin,node_markdowneditor toneAmber
class node_api,node_storage,node_markdown,node_interfaces toneMint
class node_backend toneRose
class node_visitor toneIndigo
```

## Components

### Public Portfolio

- [Route Entry](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/main.tsx): `src/main.tsx`
- [Portfolio Home](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/app.tsx): `src/app.tsx`
- [Profile Sections](https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/components/index): `src/components/index`
- [Blog Browser](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/routes/users/blogs.tsx): `src/routes/users/blogs.tsx`
- [Content Views](https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/routes/users): `src/routes/users`
- [Feedback Form](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/index/feedback.tsx): `src/components/index/feedback.tsx`
- [Portfolio Chatbot](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/widgets/chatbot.tsx): `src/components/widgets/chatbot.tsx`

### Administration

- [Admin Shell](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/admin.tsx): `src/admin.tsx`
- [Admin Login](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/admin/login.tsx): `src/components/admin/login.tsx`
- [Contact Dashboard](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/routes/admin/index.tsx): `src/routes/admin/index.tsx`
- [Content Management](https://github.com/ryannkim327/ryannkim327.github.io/tree/main/src/routes/admin): `src/routes/admin`
- [Markdown Editor](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/components/widgets/markdown-editor.tsx): `src/components/widgets/markdown-editor.tsx`

### Shared Services

- [API Client](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/api.ts): `src/lib/api.ts`
- [Browser Storage](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/storage.ts): `src/lib/storage.ts`
- [Markdown Rendering](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/lib/markdown.ts): `src/lib/markdown.ts`
- [Content Types](https://github.com/ryannkim327/ryannkim327.github.io/blob/main/src/interface.ts): `src/interface.ts`

### External Services

- **Portfolio REST API**

### Other components

- **Visitor**

## Connections

- Visitor → Route Entry: opens (evidence: `src/main.tsx`)
- Route Entry → Portfolio Home: routes to (evidence: `src/main.tsx`)
- Route Entry → Blog Browser: routes to (evidence: `src/main.tsx`)
- Route Entry → Content Views: routes to (evidence: `src/main.tsx`)
- Route Entry → Admin Shell: routes to (evidence: `src/main.tsx`)
- Portfolio Home → Profile Sections: renders (evidence: `src/app.tsx`)
- Portfolio Home → API Client: loads content (evidence: `src/app.tsx`)
- Portfolio Home → Portfolio Chatbot: renders (evidence: `src/app.tsx`)
- Portfolio Home → Feedback Form: renders (evidence: `src/app.tsx`)
- Blog Browser → API Client: fetches blogs (evidence: `src/routes/users/blogs.tsx`)
- Content Views → API Client: fetches content (evidence: `src/routes/users/blogs.tsx`)
- Portfolio Chatbot → API Client: sends chat (evidence: `src/components/widgets/chatbot.tsx`)
- Profile Sections → API Client: loads content (evidence: `src/components/index/projects.tsx`)
- Admin Shell → Admin Login: renders (evidence: `src/admin.tsx`)
- Admin Shell → Browser Storage: uses session state (evidence: `src/admin.tsx`)
- Route Entry → Contact Dashboard: routes to (evidence: `src/main.tsx`)
- Route Entry → Content Management: routes to (evidence: `src/main.tsx`)
- Contact Dashboard → API Client: loads contacts (evidence: `src/routes/admin/index.tsx`)
- Content Management → API Client: manages content (evidence: `src/routes/admin/blog.tsx`)
- Content Management → Markdown Editor: uses editor (evidence: `src/routes/admin/blog.tsx`)
- Markdown Editor → Markdown Rendering: renders preview (evidence: `src/components/widgets/markdown-editor.tsx`)
- Blog Browser → Markdown Rendering: renders blog text (evidence: `src/routes/users/blogs.tsx`)
- API Client → Browser Storage: uses session token (evidence: `src/lib/api.ts`)
- API Client → Portfolio REST API: sends REST requests (evidence: `src/lib/api.ts`)
- Profile Sections → Content Types: uses content types (evidence: `src/components/index/projects.tsx`)
- API Client → Content Types: types responses (evidence: `src/lib/api.ts`)