# krex381/krexizm architecture

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

- Interactive diagram: https://gitdiagram.com/krex381/krexizm
- Repository: https://github.com/krex381/krexizm

## Overview

#### Purpose and runtime
This is a static personal portfolio SPA built with React 19, TypeScript, and Vite. Vite builds deployable assets to `dist/`; `scripts/generate-sitemap.ts` adds `dist/sitemap.xml`. The browser application is bootstrapped from `src/main.tsx`, with global styling in `src/index.css`.

#### Application shell and navigation
`src/App.tsx` is the root composition layer. It owns page selection, lazy-loads the four portfolio sections, and applies Framer Motion page transitions. Shared chrome is supplied by `src/components/Topbar.tsx` and `src/components/Footer.tsx`; application-level render failures are contained by `src/components/ErrorBoundary.tsx`.

#### Page-level feature boundaries
The portfolio is divided into independently loadable content surfaces:
- `src/pages/ProfilePage.tsx`: primary identity/profile view and live social/developer signals.
- `src/pages/WorkPage.tsx`: projects, GitHub-oriented activity, languages, and repository statistics.
- `src/pages/EducationPage.tsx`: education/history content.
- `src/pages/ConnectPage.tsx`: social/contact surface, including direct Web3Forms submission.

These pages consume centralized identity, links, skills, and third-party identifiers rather than owning separate configuration.

#### Central configuration and presentation assets
`src/config.ts` is the principal content and integration boundary: it provides display metadata, location, Discord and GitHub identifiers, social links, skills, and the Web3Forms access key. Visual behavior is implemented with shared animated primitives such as `src/components/BlurText.tsx`, `src/components/SplitText.tsx`, and `src/components/CountUp.tsx`, plus the reusable badge at `src/components/ui/badge.tsx`.

#### Live Discord data flow
`src/hooks/useLanyard.ts` connects the client directly to Lanyard’s Discord-status WebSocket using the configured Discord user ID. Live presence/activity data then flows into profile-facing Discord widgets, with data shaping and display helpers in `src/lib/discord.ts`. This is a browser-to-third-party real-time integration; no repository backend is present.

#### Remote data and external services
GitHub profile, repository, contribution, language, and star data are fetched client-side by page features, using the generic request lifecycle utility in `src/lib/useFetch.ts`. `src/lib/techIcons.ts` maps technologies to iconography, while `src/lib/flags.ts` and `src/lib/httpcat.ts` support geographic/status presentation. Contact submission crosses directly from `src/pages/ConnectPage.tsx` to Web3Forms, which delivers messages to the configured email endpoint.

#### Build and deployment boundary
`vite.config.ts` defines the Vite application build/runtime setup; `package.json` defines development, build, and sitemap-generation commands. The architecture assumes static hosting: client code communicates directly with GitHub, Lanyard, and Web3Forms, with no server API or persistent database in this repository.

Main entry points: [`src/App.tsx`](https://github.com/krex381/krexizm/blob/main/src/App.tsx) (App shell), [`src/config.ts`](https://github.com/krex381/krexizm/blob/main/src/config.ts) (Portfolio configuration), [`src/pages/ProfilePage.tsx`](https://github.com/krex381/krexizm/blob/main/src/pages/ProfilePage.tsx) (Profile page), [`src/pages/WorkPage.tsx`](https://github.com/krex381/krexizm/blob/main/src/pages/WorkPage.tsx) (Work page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_spa["Browser SPA"]
  node_main["Application bootstrap<br/>React entry<br/>[main.tsx]"]
  node_app["App shell<br/>root composition<br/>[App.tsx]"]
  node_topbar["Topbar<br/>shared chrome<br/>[Topbar.tsx]"]
  node_footer["Footer<br/>shared chrome<br/>[Footer.tsx]"]
  node_errorboundary["Error boundary<br/>render containment<br/>[ErrorBoundary.tsx]"]
  node_profile["Profile page<br/>lazy page<br/>[ProfilePage.tsx]"]
  node_work["Work page<br/>lazy page<br/>[WorkPage.tsx]"]
  node_education["Education page<br/>lazy page<br/>[EducationPage.tsx]"]
  node_connect["Connect page<br/>lazy page<br/>[ConnectPage.tsx]"]
end

subgraph group_shared["Shared UI and data"]
  node_config["Portfolio configuration<br/>content and integration config<br/>[config.ts]"]
  node_lanyardhook["Lanyard hook<br/>WebSocket client<br/>[useLanyard.ts]"]
  node_discord["Discord presentation<br/>data helpers<br/>[discord.ts]"]
  node_fetch["Request lifecycle<br/>fetch utility<br/>[useFetch.ts]"]
  node_presentation["Presentation primitives<br/>animated UI and mappings<br/>[BlurText.tsx]"]
end

subgraph group_external["External services"]
  node_github{{"GitHub APIs<br/>external data service"}}
  node_lanyard{{"Lanyard<br/>Discord presence service"}}
  node_web3forms{{"Web3Forms<br/>contact delivery service"}}
end

subgraph group_build["Build and deploy"]
  node_vite["Vite build setup<br/>build configuration<br/>[vite.config.ts]"]
  node_package["Project commands<br/>package manifest<br/>[package.json]"]
  node_sitemap["Sitemap generator<br/>post-build script"]
  node_dist["Static deployable assets<br/>build output"]
end

node_main -->|"mounts"| node_app
node_app -->|"contains"| node_errorboundary
node_app -->|"renders"| node_topbar
node_app -->|"renders"| node_footer
node_app -->|"lazy-loads"| node_profile
node_app -->|"lazy-loads"| node_work
node_app -->|"lazy-loads"| node_education
node_app -->|"lazy-loads"| node_connect
node_profile -->|"reads content and IDs"| node_config
node_work -->|"reads content"| node_config
node_education -->|"reads content"| node_config
node_connect -->|"reads links and access key"| node_config
node_profile -->|"uses live presence"| node_lanyardhook
node_lanyardhook -->|"reads Discord ID"| node_config
node_lanyardhook -->|"opens WebSocket"| node_lanyard
node_lanyardhook -->|"passes presence data"| node_discord
node_work -->|"uses"| node_fetch
node_fetch -->|"fetches data"| node_github
node_connect -->|"submits contact form"| node_web3forms
node_profile -->|"uses UI primitives"| node_presentation
node_work -->|"uses UI primitives"| node_presentation
node_package -->|"runs build"| node_vite
node_vite -->|"builds assets"| node_dist
node_package -->|"runs after build"| node_sitemap
node_sitemap -->|"writes sitemap.xml"| node_dist

click node_main "https://github.com/krex381/krexizm/blob/main/src/main.tsx"
click node_app "https://github.com/krex381/krexizm/blob/main/src/App.tsx"
click node_topbar "https://github.com/krex381/krexizm/blob/main/src/components/Topbar.tsx"
click node_footer "https://github.com/krex381/krexizm/blob/main/src/components/Footer.tsx"
click node_errorboundary "https://github.com/krex381/krexizm/blob/main/src/components/ErrorBoundary.tsx"
click node_profile "https://github.com/krex381/krexizm/blob/main/src/pages/ProfilePage.tsx"
click node_work "https://github.com/krex381/krexizm/blob/main/src/pages/WorkPage.tsx"
click node_education "https://github.com/krex381/krexizm/blob/main/src/pages/EducationPage.tsx"
click node_connect "https://github.com/krex381/krexizm/blob/main/src/pages/ConnectPage.tsx"
click node_config "https://github.com/krex381/krexizm/blob/main/src/config.ts"
click node_lanyardhook "https://github.com/krex381/krexizm/blob/main/src/hooks/useLanyard.ts"
click node_discord "https://github.com/krex381/krexizm/blob/main/src/lib/discord.ts"
click node_fetch "https://github.com/krex381/krexizm/blob/main/src/lib/useFetch.ts"
click node_presentation "https://github.com/krex381/krexizm/blob/main/src/components/BlurText.tsx"
click node_vite "https://github.com/krex381/krexizm/blob/main/vite.config.ts"
click node_package "https://github.com/krex381/krexizm/blob/main/package.json"
click node_sitemap "https://github.com/krex381/krexizm/blob/main/scripts/generate-sitemap.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_main,node_app,node_topbar,node_footer,node_errorboundary,node_profile,node_work,node_education,node_connect toneBlue
class node_config,node_lanyardhook,node_discord,node_fetch,node_presentation toneAmber
class node_github,node_lanyard,node_web3forms toneMint
class node_vite,node_package,node_sitemap,node_dist toneRose
```

## Components

### Browser SPA

- [Application bootstrap](https://github.com/krex381/krexizm/blob/main/src/main.tsx): React entry · Mounts the browser application and global styles. · `src/main.tsx`
- [App shell](https://github.com/krex381/krexizm/blob/main/src/App.tsx): root composition · Selects pages, lazy-loads sections, and applies transitions. · `src/App.tsx`
- [Topbar](https://github.com/krex381/krexizm/blob/main/src/components/Topbar.tsx): shared chrome · `src/components/Topbar.tsx`
- [Footer](https://github.com/krex381/krexizm/blob/main/src/components/Footer.tsx): shared chrome · `src/components/Footer.tsx`
- [Error boundary](https://github.com/krex381/krexizm/blob/main/src/components/ErrorBoundary.tsx): render containment · `src/components/ErrorBoundary.tsx`
- [Profile page](https://github.com/krex381/krexizm/blob/main/src/pages/ProfilePage.tsx): lazy page · Shows identity and live social signals. · `src/pages/ProfilePage.tsx`
- [Work page](https://github.com/krex381/krexizm/blob/main/src/pages/WorkPage.tsx): lazy page · Shows projects and GitHub activity. · `src/pages/WorkPage.tsx`
- [Education page](https://github.com/krex381/krexizm/blob/main/src/pages/EducationPage.tsx): lazy page · `src/pages/EducationPage.tsx`
- [Connect page](https://github.com/krex381/krexizm/blob/main/src/pages/ConnectPage.tsx): lazy page · Submits contact messages directly to Web3Forms. · `src/pages/ConnectPage.tsx`

### Shared UI and data

- [Portfolio configuration](https://github.com/krex381/krexizm/blob/main/src/config.ts): content and integration config · Centralizes identity, links, skills, IDs, and Web3Forms key. · `src/config.ts`
- [Lanyard hook](https://github.com/krex381/krexizm/blob/main/src/hooks/useLanyard.ts): WebSocket client · Connects with the configured Discord user ID. · `src/hooks/useLanyard.ts`
- [Discord presentation](https://github.com/krex381/krexizm/blob/main/src/lib/discord.ts): data helpers · `src/lib/discord.ts`
- [Request lifecycle](https://github.com/krex381/krexizm/blob/main/src/lib/useFetch.ts): fetch utility · Provides client-side remote request state. · `src/lib/useFetch.ts`
- [Presentation primitives](https://github.com/krex381/krexizm/blob/main/src/components/BlurText.tsx): animated UI and mappings · Includes text, count, badge, icon, flag, and status presentation helpers. · `src/components/BlurText.tsx`

### External services

Browser clients call these services directly.

- **GitHub APIs**: external data service · Supplies profile, repositories, contributions, languages, and stars.
- **Lanyard**: Discord presence service
- **Web3Forms**: contact delivery service · Delivers form messages to the configured email endpoint.

### Build and deploy

- [Vite build setup](https://github.com/krex381/krexizm/blob/main/vite.config.ts): build configuration · `vite.config.ts`
- [Project commands](https://github.com/krex381/krexizm/blob/main/package.json): package manifest · Defines development, build, and sitemap commands. · `package.json`
- [Sitemap generator](https://github.com/krex381/krexizm/blob/main/scripts/generate-sitemap.ts): post-build script · Adds sitemap.xml to built assets. · `scripts/generate-sitemap.ts`
- **Static deployable assets**: build output · Published to static hosting.

## Connections

- Application bootstrap → App shell: mounts
- App shell → Error boundary: contains
- App shell → Topbar: renders
- App shell → Footer: renders
- App shell → Profile page: lazy-loads
- App shell → Work page: lazy-loads
- App shell → Education page: lazy-loads
- App shell → Connect page: lazy-loads
- Profile page → Portfolio configuration: reads content and IDs
- Work page → Portfolio configuration: reads content
- Education page → Portfolio configuration: reads content
- Connect page → Portfolio configuration: reads links and access key
- Profile page → Lanyard hook: uses live presence
- Lanyard hook → Portfolio configuration: reads Discord ID
- Lanyard hook → Lanyard: opens WebSocket
- Lanyard hook → Discord presentation: passes presence data
- Work page → Request lifecycle: uses
- Request lifecycle → GitHub APIs: fetches data
- Connect page → Web3Forms: submits contact form
- Profile page → Presentation primitives: uses UI primitives
- Work page → Presentation primitives: uses UI primitives
- Project commands → Vite build setup: runs build
- Vite build setup → Static deployable assets: builds assets
- Project commands → Sitemap generator: runs after build
- Sitemap generator → Static deployable assets: writes sitemap.xml