krex381/krexizm

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.