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 fall 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 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, though it can also be installed and run locally.
The project integrates Keystatic, a Node-based flat-file CMS, to provide a rich-text editing experience with an assortment of custom layout 'blocks' written in React, that saves content to standardized Markdoc files. This allows the user to work out of a Git repository without needing to set up any databases. The user can choose from 3 different site layouts, and can customize the look and feel of the site from within the CMS or via adding custom CSS.
This project uses Astro to build the user's site, with layouts and components written in JSX that compiles to HTML & CSS with very minimal client-side scripting (when needed for interactions). The repo includes pre-written deployment scripts for GitHub Pages (via Actions) and Netlify, and allows for a simple setup process on either platform.
This template was built for a workshop I organized and led at SUNY New Paltz's Spring 2024 Design Week, a campus-wide event that explores different areas within the field of design. The sample site below was built by a student in the workshop.
This is a simple command-line tool, built in Node.js. It is designed to
be used as part of a production workflow in combination with
InDesign's Data Merge feature, or a similar system. The tool takes
as inputs a folder of image assets and two CSV files containing
parameters for renaming the image assets, and renames them to use
a consistent schema. This tool helps with efficient templated
production of visual asset groups such as banner ads and branded
social posts.
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.
