Selected Work

• 

  Cat Energy - Reengineered

  A re-engineering of a static HTML Academy training project into a modern Angular 19 SPA. Three lazy-loaded pages, a reactive form with four CVA-based shared controls, responsive images in three breakpoint variants × two resolutions × two formats, and a three-layer SCSS token system with runtime light/dark theming. Component SCSS budgets enforced in angular.json.

  • Lighthouse 100 / 100 / 100 / 100 - all 3 pages
  • WAVE AIM Score 10/10 - all 3 pages
  • Reusable CVA-based form controls with full accessibility markup
  • Responsive images - WebP + fallback, 3 breakpoints, @1x/@2x, fetchpriority
  • Runtime theming via ThemeService, persisted to localStorage
  • All routes lazy-loaded via loadComponent, headerVariant via route data
  • Tokens → Themes → Abstracts - three-layer SCSS architecture

  • Angular 19
  • TypeScript 5.7
  • SCSS
  • Design Tokens
  • Reactive Forms
  • CVA Controls
  • Signals
  • Standalone Components
  • Lazy Loading
  • ARIA
  • Responsive Images
  • ngx-mask

  Repo Demo
• 

  Escape Velocity - Space Tourism SPA

  Multi-page Angular app built as a deliberate study: not just to make UI work, but to reason about why it's built the way it is. Every structural decision is intentional and explainable - spacing tokens, animation triggers, accessibility markup, test assertions.

  • 108 unit tests - each with a comment explaining why the assertion matters
  • Spacing tokens named --space-48, not --space-card-gap - units are units
  • Two animation triggers - image at 420ms, text at 360ms, offset follows visual weight
  • Fluid typography - display sizes scale with viewport via custom properties
  • aria-live, aria-selected, explicit type="button" - accessibility by intention
  • ITCSS-influenced SCSS - spacing and sizes in separate files, three base colors

  • Angular 19
  • TypeScript
  • SCSS
  • ITCSS
  • BEM
  • Design Tokens
  • CSS Custom Properties
  • Fluid Typography
  • ARIA
  • Jasmine/Karma
  • GitHub Pages

  Repo Demo
• Remote Team Directory

  React + TypeScript UI for browsing a distributed remote team. Search, filtering, sorting, dark/light theming with system preference support, persistent theme via localStorage, and a fully accessible custom Listbox with keyboard navigation. Unit and E2E test coverage via Vitest and Playwright.

  • Lighthouse 100 / 100 / 100 / 100
  • Custom accessible Listbox - Tab / Enter / Arrow navigation
  • Unit + E2E test coverage
  • In progress

  • React 19
  • TypeScript
  • Vite
  • CSS Modules
  • Design Tokens
  • Vitest
  • Playwright
  • ESLint
  • ARIA
  • Dark / Light theme

  Demo