How ryannkim327/ryannkim327.github.io works
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: api.ts API Client · main.tsx Route Entry · app.tsx Portfolio Home · index Profile Sections
Components 18
Public Portfolio
- Route Entry
src/main.tsx - Portfolio Home
src/app.tsx - Profile Sections
src/components/index - Blog Browser
src/routes/users/blogs.tsx - Content Views
src/routes/users - Feedback Form
src/components/index/feedback.tsx - Portfolio Chatbot
src/components/widgets/chatbot.tsx
Administration
- Admin Shell
src/admin.tsx - Admin Login
src/components/admin/login.tsx - Contact Dashboard
src/routes/admin/index.tsx - Content Management
src/routes/admin - Markdown Editor
src/components/widgets/markdown-editor.tsx
Shared Services
- API Client
src/lib/api.ts - Browser Storage
src/lib/storage.ts - Markdown Rendering
src/lib/markdown.ts - Content Types
src/interface.ts
External Services
- Portfolio REST API
Other components
- Visitor
Connections 26
- Visitor → Route Entry: opens
src/main.tsx - Route Entry → Portfolio Home: routes to
src/main.tsx - Route Entry → Blog Browser: routes to
src/main.tsx - Route Entry → Content Views: routes to
src/main.tsx - Route Entry → Admin Shell: routes to
src/main.tsx - Portfolio Home → Profile Sections: renders
src/app.tsx - Portfolio Home → API Client: loads content
src/app.tsx - Portfolio Home → Portfolio Chatbot: renders
src/app.tsx - Portfolio Home → Feedback Form: renders
src/app.tsx - Blog Browser → API Client: fetches blogs
src/routes/users/blogs.tsx - Content Views → API Client: fetches content
src/routes/users/blogs.tsx - Portfolio Chatbot → API Client: sends chat
src/components/widgets/chatbot.tsx - Profile Sections → API Client: loads content
src/components/index/projects.tsx - Admin Shell → Admin Login: renders
src/admin.tsx - Admin Shell → Browser Storage: uses session state
src/admin.tsx - Route Entry → Contact Dashboard: routes to
src/main.tsx - Route Entry → Content Management: routes to
src/main.tsx - Contact Dashboard → API Client: loads contacts
src/routes/admin/index.tsx - Content Management → API Client: manages content
src/routes/admin/blog.tsx - Content Management → Markdown Editor: uses editor
src/routes/admin/blog.tsx - Markdown Editor → Markdown Rendering: renders preview
src/components/widgets/markdown-editor.tsx - Blog Browser → Markdown Rendering: renders blog text
src/routes/users/blogs.tsx - API Client → Browser Storage: uses session token
src/lib/api.ts - API Client → Portfolio REST API: sends REST requests
src/lib/api.ts - Profile Sections → Content Types: uses content types
src/components/index/projects.tsx - API Client → Content Types: types responses
src/lib/api.ts