Kyle Foster Portfolio Application

Production-focused React portfolio application built around section-driven content, reusable rendering primitives, accessibility-aware UI behavior, and repeatable engineering processes.

Live Site

• Live Version: https://kyle-foster.com
• Docs route: https://kyle-foster.com/docs
• Health route: https://kyle-foster.com/health

Current State (July 2026)

• The Color menu now exposes palette, light/dark mode, high-contrast mode, and ui-style-kit-css visual style switching from one UI surface.
• The app supports 10 color palettes and 11 UI styles: Minimal SaaS, Bento, Maximalist, Bauhaus, Tactile, Neumorphism, Retrofuturism, Brutalism, Cyberpunk, Y2K, and Retro Glass.
• Palette values are applied at runtime from src/assets/themePalettes.js, while CSS consumes semantic variables from src/styles/tokens.css. This keeps contrast coverage intact and keeps the initial CSS bundle under budget.
• src/styles/ui-style-kit-tokens.css imports only the ui-style-kit-css tokens the app consumes, so package utility CSS does not block app styling or inflate the main stylesheet.
• Mermaid diagrams, shared buttons, the back-to-top control, navigation triggers, and content surfaces were reviewed for readable foreground/background contrast across light, dark, and cyber-lime-heavy combinations.
• Theme-aware favicon assets now cover the active palette set through public/favicons/favicon-manifest.json and src/assets/favicon.js.
• Large portrait and social-card assets now ship optimized WebP derivatives to keep image budgets within the stage 1 limits.

Project Goals

• Demonstrate production-grade React architecture and composition patterns.
• Keep page behavior declarative, reusable, and data-driven.
• Enforce interaction and accessibility consistency through shared primitives.
• Maintain predictable quality via linting, unit/E2E testing, diagram checks, and generated documentation.

Architecture Overview

The app is organized around declarative page content modules and shared renderers/navigation systems.

• Page content data lives under src/assets/data/content/**.
• Reusable rendering and layout primitives live under src/components/**.
• Route composition is centralized in src/App.jsx.
• Runtime palette tokens live in src/assets/themePalettes.js; semantic surface/style tokens live in src/styles/tokens.css.
• Generated technical docs are built into docs/**.
• Route metadata and static HTML shells are generated from src/assets/data/seoRouteRegistry.js.

Reference docs:

• Core systems: Components, Navigation, Types
• Tooling: Scripts, Playwright, Tests
• API and audits: Full API Reference, JSDoc Audit
• Developer guides: Diagram Guidelines, RichText Author Guidelines, Scripts Tooling Overview, Testing Guidelines

Routes

• / - Home
• /codestream - CodeStream case study
• /sanderson-technology-enterprises - Sanderson Technology Enterprises case study
• /side-projects - Side projects overview
• /hackathon - Hackathon projects overview
• /smu - Southern Methodist University case study
• /contact - Contact information and message form
• /docs - Generated technical documentation
• /health - Runtime diagnostics panel (UI route)
• /** - Not Found

Environment Configuration

The app runs without custom .env values, but these variables are supported:

• VITE_SITE_URL: Canonical origin used for metadata/canonical URLs.
• VITE_CONTACT_API_URL: Contact service base URL or full /api/contact endpoint.
• VITE_WEB_VITALS_ENDPOINT: Production endpoint for metrics ingestion.
• VITE_LOG_WEB_VITALS: Set to "true" to log web vitals in development.
• VITE_RESPONSIVE_TOKENS_THEME: Responsive token theme selector.

Quick Start

Prerequisites:

• Node.js >=22.22.0 <23
• npm >=10 <11

Install and run:

npm install
npm run dev

Build and preview:

npm run build
npm run preview

Quality Workflow

Primary checks:

npm run lint:all
npm run quality:route-tests
npm run quality:bundle-budgets
npm run seo:check
npm run test
npm run quality:check

Focused theme and contrast checks:

npx playwright test playwright/color-contrast.spec.ts playwright/ui-style-visual-distinction.spec.ts

npm run test-ui uses local visual baselines under playwright/test-results/snapshots. If those ignored local baselines are missing, the first run writes them and the next run verifies against them.

CI-equivalent gate:

npm run ci:gate

Script Reference

Development:

npm run dev
npm run start
npm run build
npm run preview

Linting and tests:

npm run lint
npm run lint:all
npm run test
npm run test-functions
npm run test-ui
npm run test-ui:dev-smoke
npm run test-ui:a11y
npm run test-ui:route-budgets
npm run quality:route-tests
npm run quality:bundle-budgets
npm run seo:test
npm run links:test

Optional live verification (not a blocking CI requirement):

npm run links:check

Diagrams:

npm run diagrams:check
npm run diagrams:assets
npm run diagrams:test
npm run diagrams:run-all

Documentation:

npm run docs:build
npm run docs:verify
npm run docs:api
npm run docs:jsdoc:audit
npm run docs:jsdoc:enforce

Technology Stack

• React 18
• Vite 8
• RSuite 5
• Font Awesome
• Mermaid 11
• Interactive Surface CSS
• ui-style-kit-css
• Vitest 4 + Testing Library
• Playwright
• ESLint + Stylelint + Prettier