Kyle Foster Portfolio Application

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

Live Site

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

Current State (May 2026)

• Contact content modules were consolidated: src/assets/data/content/contact/alt.js was removed and merged into src/assets/data/content/contact/index.js while preserving the contactAltSections alias export for compatibility.
• /contact route handling remains explicit in src/App.jsx, and route-level regression coverage was added in src/App.test.jsx.
• src/pages/ContactAlt/index.jsx now centralizes contact endpoint resolution and payload normalization utilities for the contact service contract (VITE_CONTACT_API_URL aware).
• Contact page layout and navigation visuals were refined (src/pages/ContactAlt/styles.css, src/components/navigation/StickyNav/styles.css).
• Component docs were regenerated (docs/components.md) to reflect current exported APIs.

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.
• Generated technical docs are built into docs/**.

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
• /side-projects - Side projects overview
• /hackathon - Hackathon projects overview
• /smu - Southern Methodist University case study
• /contact - Contact information
• /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 >=20.19.0 <21 or >=22.12.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
npm run quality:route-tests
npm run test
npm run quality:bundle-budgets
npm run quality:check

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

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
• Vitest 4 + Testing Library
• Playwright
• ESLint + Stylelint + Prettier