mrbro.dev

A modern developer portfolio built with React 19, TypeScript, and Vite. Features an advanced theme system with 10+ presets, GitHub API integration, and automated deployment to GitHub Pages.

mrbro.dev

Features · Getting Started · Development · Testing Status · Troubleshooting

Features

• Advanced Theme System — Custom theme creator with 10+ preset themes (Material, Dracula, Nord, Solarized), import/export, and JSON schema validation
• GitHub Integration — Dynamic repository showcase and blog system powered by the GitHub API
• Syntax Highlighting — Theme-aware code blocks via Shiki supporting 8 languages
• Performance Optimized — Code splitting, bundle analysis, ES2020+ target, and automated performance monitoring
• Accessibility — WCAG 2.1 AA compliance with keyboard navigation and reduced motion support
• Comprehensive Testing — Unit, E2E, visual regression, accessibility, and performance test suites

Getting Started

GitHub Codespaces

Local Setup

Prerequisites: Node.js v24+, pnpm v11.1.3+, Git

git clone https://github.com/marcusrbrown/mrbro.dev.git
cd mrbro.dev
pnpm install
pnpm dev

Open http://localhost:5173 to view the site.

Development

Command	Description
pnpm dev	Start dev server with HMR
pnpm build	Type-check and build for production
pnpm preview	Preview production build
pnpm lint	Lint with ESLint
pnpm fix	Auto-fix lint issues
pnpm test	Run unit tests
pnpm test:all	Run all test suites
pnpm run analyze-build	Bundle size analysis

Tech Stack

React 19 · TypeScript (strict) · Vite 7 · React Router v7 · pnpm · Vitest · Playwright · Shiki · ESLint flat config · Prettier

Project Structure

src/
├── components/    # React components (PascalCase .tsx)
├── hooks/         # Custom hooks (PascalCase files)
├── contexts/      # ThemeContext provider
├── pages/         # Route pages: Home, Blog, Projects, About
├── utils/         # Utilities (theme system, GitHub API, syntax highlighting)
├── types/         # TypeScript types
├── schemas/       # Theme JSON schema
└── styles/        # Global CSS
scripts/           # Build/test automation
tests/             # Unit, E2E, visual, accessibility, performance tests

Testing Status

Coverage Details

• Statements:
• Branches:
• Functions:
• Lines:

Test Suite Status

• Unit Tests: Comprehensive test coverage with Vitest
• E2E Tests: Cross-browser testing with Playwright (Chromium, Firefox, WebKit)
• Visual Regression: Automated screenshot comparisons across themes
• Accessibility: WCAG 2.1 AA compliance testing with axe-core
• Performance: Lighthouse CI monitoring with Core Web Vitals
• Bundle Analysis: JavaScript bundle size tracking and optimization

See TESTING.md for the full testing guide, including how to write tests, run individual suites, update visual baselines, and interpret the test dashboard.

Troubleshooting

Issue	Fix
Wrong Node.js version	Use Node.js v24+ LTS
Wrong package manager	Use pnpm, not npm or yarn
Git hooks not running	pnpm run setup-hooks
Build errors	pnpm install --frozen-lockfile
Detailed test output	pnpm test -- --reporter=verbose
Build metrics	pnpm run analyze-build