Portfolio
I've had the opportunity to work on a wide range of projects over the years in a variety of different capacities but my areas of experties are in UX development, CSS architecture, and UX design. Below are a few examples of my work. Feel free to contact me for more information or if you have a project for which you think I might be a good fit.
CSS Architecture
For the past several years I've worked on large projects as the CSS subject matter expert helping to provide styling and CSS architecture of multiple design systems. The most recent one is PreAmp where I was responsible for creating the custom CSS framework called Mixer.
My responsibilities included:- Creating the architecture used in the framework, including file structure, standards, methodology for styling components, and naming conventions.
- Setting up a theming system using CSS Custom Properties that can be manipulated by the component JavaScript.
- Integrating the Tailwind CSS framework and creating rules around how it would be used within Mixer.
- Training developers on best practices for using the system and CSS in general.
Front-end Development
In the PreAmp Design System, I worked to create reusable components with React and Typescript. I created components of varying complexity, from buttons and form elements to loaders, expandable cards and tables. As the CSS subject matter expert, I was also responsible for making sure components matched specifications from the product design team.
One of the more complicated and fun components that I had the opportunity to work on was creating an SVG icon system that would convert SVG files into React components called Signal. It includes various levels of customization, such as size and dual tone color support. It also included the creation of a general icon component that could take any SVG code and display it with the Signal styles applied.
Signal Icon SystemUX Design
In addition to coding and styling components, I've also worked as a UX designer working on a number of web applications and features for existing applications. Click on an image below to see a larger version.