Hi, I'm Machi

Frontend • 3D • Accessible UI

I craft performant, accessible interfaces and explore expressive 3D on the web. My focus is on clarity, interaction design, and building design systems that scale.

  • Design Systems & Component Architecture
  • Procedural & PBR materials (Babylon.js)
  • Animation & micro‑interaction polish
  • Web accessibility & semantics (WCAG)
M

MACHICODES_MACHICODES_MACHICODES_MACHICODES_

Skills

TypeScript
React / Next.js
Accessibility
Babylon.js
Three.js

Wiki

Concepts, patterns, and future deep dives. This section will evolve into a living knowledge base.

Glossary

  • Accessibility
  • Babylon.js
  • Radix UI
  • Next.js
  • Performance
  • Design Tokens
  • State Machines
  • Progressive Enhancement
  • Static Analysis
  • Code Splitting
  • Memoization
  • Virtualization
  • ARIA
  • SSR
  • Edge Functions
#frontend#a11y#performance#3d#design-systems#tooling#architecture#testing#rendering#patterns

Articles

Design Tokens Architecture

Draft: Design Tokens Architecture. Detailed breakdown incoming with diagrams, stepwise implementation, and anti-pattern cautions.

  • Context / Problem
  • Approach Summary
  • Tooling & Libraries
  • Metrics to Track
  • Further Reading

Accessibility Testing Pipeline

Draft: Accessibility Testing Pipeline. Detailed breakdown incoming with diagrams, stepwise implementation, and anti-pattern cautions.

  • Context / Problem
  • Approach Summary
  • Tooling & Libraries
  • Metrics to Track
  • Further Reading

Scene Graph Optimization

Draft: Scene Graph Optimization. Detailed breakdown incoming with diagrams, stepwise implementation, and anti-pattern cautions.

  • Context / Problem
  • Approach Summary
  • Tooling & Libraries
  • Metrics to Track
  • Further Reading

State Machine Patterns

Draft: State Machine Patterns. Detailed breakdown incoming with diagrams, stepwise implementation, and anti-pattern cautions.

  • Context / Problem
  • Approach Summary
  • Tooling & Libraries
  • Metrics to Track
  • Further Reading

Bundle Performance Budgeting

Draft: Bundle Performance Budgeting. Detailed breakdown incoming with diagrams, stepwise implementation, and anti-pattern cautions.

  • Context / Problem
  • Approach Summary
  • Tooling & Libraries
  • Metrics to Track
  • Further Reading

Interaction Micro-Patterns

Draft: Interaction Micro-Patterns. Detailed breakdown incoming with diagrams, stepwise implementation, and anti-pattern cautions.

  • Context / Problem
  • Approach Summary
  • Tooling & Libraries
  • Metrics to Track
  • Further Reading

Resources

Roadmap

  • Convert glossary into searchable filterable list
  • Add code examples per article
  • Embed interactive performance profiling demos
  • Link 3D scene configuration notes

Contact

Let's build something together. Reach out below.

Channels

Dark