Here are some of the larger projects I've worked on.
Unicorn Bar WebsiteUnicorn Bar Website
This is a website I built for a local business, designed in collaboration with designer Marissa Carroll. It is a static site built with Eleventy, and is hosted on Netlify. In its current phase it consists of a single landing page with two customized forms. For our next milestone (expected to be May 2024), the site will add additional pages with custom content types and a headless CMS for the client to manage their own content, with a library of reusable layout components and a block-based editor.
During the design phase, I regularly consulted with the designer to provide accessibility guidance and ensure that the design was feasible from an accessibility, performance, and implementation standpoint. This accessibility-first approach allowed us to launch an inclusive and performant site quickly with minimal accessibility remediation work needed during the development process.
This is a web app for precise bakers, built with React in TypeScript. This app displays recipes in a variation of 'baker's percentage' format, in which ingredients are measured by their weight in relation to the overall recipe weight. This allows users to easily and accurately scale recipes to any quantity.
In its current state, it consists of a recipe viewer, though in future releases it will contain a recipe editor as well, with a backend and database.
The recipe viewer allows the user to load a JSON recipe file and scale it to a specified quantity.
List of technologies used in Baker's Mode (work in progress)
This is a responsive minimal portfolio website template, built with the
Node.js-based static site generator Eleventy. It is designed to be
used as a template for an artist or designer to quickly build and
deploy a portfolio website. The repository is intended to be run
in the GitHub Codespaces browser-based remote development
environment, and includes a custom GitHub Actions script to build
and deploy the site to GitHub Pages. This template offers 3
different portfolio layouts, and uses SASS variables to allow the
user to customize the look and feel of the site without writing
any new code. The template is designed to be easy for
non-developers to customize, add content to, and deploy. This
template was built for a workshop I organized and led at SUNY New
Paltz's 2023 Design Week,
a campus-wide event that explores different areas within the field
of design.
List of technologies used in portfolio-template-11ty
I like to think of coding as a problem-solving tool. Here are some smaller projects where I worked through solving a specific problem through code - most of these sketches ended up being incorporated into larger projects.
tic-tac-toe
An accessible & responsive tic-tac-toe game written with vanilla JavaScript
An interactive data visualization widget built with D3.js that simulates the light spectrum output of a multi-channel LED unit and how it compares to the ideal frequencies of light for plant growth.
Hi! I'm a developer & designer based out of Kingston, New York. In
addition, I teach in the Design department at SUNY New Paltz. I grew
up just across the river in Red Hook, NY (the Dutchess County
town, not the Brooklyn neighborhood), and I have a BFA in
Graphic Design from SUNY New Paltz. If I'm not making things,
I'm probably outside, roller skating or riding my bike.
Accessibility
I am committed to helping make the web a more accessible and inclusive space. I am a DHS certified Trusted Tester (here's a PDF of my certificate!), and I've been working on accessibility coursework from Deque. I regularly test new sections of this site against WCAG 2.2. Someday this site will have a VPAT, I promise. If you find any accessibility issues on this site, please let me know and I will fix it as soon as possible.
Color Palette Generator
The code that generates this site's color palette takes WCAG guidelines into account, and it should always generate WCAG AA-compliant color combinations. The code was able to produce WCAG-compliant color palettes 100% of the time in a stress test of 50,000 iterations. You can see the color combinations tested and their contrast ratios in the table below, titled "Theme Color Contrast Audit."
Theme Color Contrast Audit
This table shows the contrast ratios between the colors currently used on this website, the contrast ratios required by WCAG AA guidelines, and if each color combination passes or fails WCAG AA contrast guidelines. The current color theme has 0 contrast issues.
WCAG AA Requirement
Measured Contrast Ratio
Text against Soft Accent A
4.5
xxxxx
Text against Soft Accent B
4.5
xxxxx
Text against Card background
4.5
xxxxx
Text against Page Background
4.5
xxxxx
(UI) Card Border against Page Background
3
xxxxx
(UI) Accent A against Page Background
3
xxxxx
(UI) Accent B against Page Background
3
xxxxx
Color Text against Page Background
4.5
xxxxx
Color Text against Card Background
4.5
xxxxx
About This Site
This site is built with Eleventy, a Node.js-based static site generator. Script bundling is handled with Webpack. The interactive background at the top of the page is built using Two.js, a lightweight animation library. The color palette generator uses colord for color comparison and modification, and GSAP for color transitions. The Sketches section is generated programmatically at build time using data pulled from the GitHub API. Currently deployed through Netlify.
