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
• 

  Verix Core - Blockchain SaaS Landing

  Product-focused SaaS landing page for a blockchain infrastructure platform. Canvas-based generative icon system, scroll-driven SVG path animation, animated node-edge network visualization, and a token-first SCSS design system. All animated components respect prefers-reduced-motion.

  • Lighthouse 98 / 100 / 100 / 100
  • WAVE AIM Score 10/10 - no errors detected
  • 6 canvas-based generative icons - lazy-started via IntersectionObserver
  • Scroll-driven SVG path animation - Framer Motion useScroll + useSpring, geometry from ResizeObserver
  • Animated node-edge network - direct DOM manipulation in rAF, no React re-renders
  • Footer particles - single canvas, pauses via IntersectionObserver when out of view
  • Token-first SCSS design system - oklch colors, fluid clamp() typography

  • React 19
  • TypeScript
  • Vite
  • SCSS
  • ITCSS
  • BEM
  • Design Tokens
  • oklch
  • Framer Motion
  • Canvas API
  • IntersectionObserver
  • GitHub Pages

  Repo Demo
• 

  wiggle.svg - SVG Animation Sandbox

  A personal experiment and a developer tool in progress. SVG animations are tricky to write by hand. wiggle.svg is a visual sandbox where you paste an SVG, click any element, tweak animation properties, and get clean CSS @keyframes and an SVG with auto-assigned IDs - ready to copy and use. Built with Svelte 5 runes, no UI libraries.

  • Svelte 5 runes - $state, $derived, $effect throughout
  • DOMPurify sanitization on SVG input before DOM injection
  • CSS injected directly into SVG DOM - no wrapper, no iframe
  • Auto-assigned IDs to all SVG elements on load
  • Exports both CSS @keyframes and annotated SVG ready to use
  • In progress

  • Svelte 5
  • TypeScript
  • Vite
  • CSS Animations
  • SVG
  • DOMPurify
  • Sandbox

  Repo Demo