Skip to main content


A few public projects I’ve built that I’m proud of, mostly personal. I love working with JavaScript (especially Vue, occasionally Svelte, uncommonly React, and a wee bit of Node), WordPress PHP, and custom CSS. I’m capable in Ruby on Rails, and I find regular expressions more exciting than most people do. If you’re interested, here’s what I use.

Work links:

CodePen logo   GitHub logo   NPM logo

Interactive CSS Filter React Component (with GIFs!)

I thought it would be a cool project to build a reusable React component that shows off each filter mode that CSS offers. Each “card” is an interactive instance of the same custom React <Filter /> component, with props adjusted for the filter mode to demo how that specific filter works and what the code to use it would look like.

See the Pen Interactive CSS Filter React Component (with GIFs!) by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

Vue Emoji Slider Component

A custom slider built with Vue using emoji. The slider maintains accessibility by using CSS grid and z-index to place an actual range input HTML element over the top of the styled slider, at opacity 0. This way, the user is interacting with the semantic element (whether via mouse, touchscreen, keyboard or screen reader) while the styled slider is displayed onscreen.

See the Pen Custom Accessible Vue Emoji Slider by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

Sliding Puzzle in Vue

Inspired to put Vue’s built-in transition-group element to good use, I decided to try recreating a classic sliding puzzle with Vue and CSS grid.

That took an evening; then I spent the next week scope-creeping myself into ensuring solvability within the random tile distribution; adding a progress bar; highlighting tiles in the proper position; highlighting possible moves; some animations; and adding support for mouse, keyboard, and swipe.

Update: there’s another version here with custom images instead of numbers and more gameplay options.

See the Pen Sliding Puzzle in Vue by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

QvickList App

I was tired of trying to use to-do/checklist apps; there’s always too much upfront effort for something that should be as instant as writing on paper.

So I made a simple, easy and (of course) quick app for creating a one-off to-do list or checklist.

QvickList is built on Vue and utilizes local storage, so that as long as you’re accessing the app from the same device/browser, your list and its status is always available just as it was before.

Color Flood Game with Colorblind Mode (React + CSS Grid)

This is a pretty common little game, but I thought I’d challenge myself to rebuild it in React. The goal is to get the board to be entirely one color in as few moves as possible.

This version features a colorblind mode to populate the board with color-correlated emoji, and some instructions in the JavaScript (in the form of comments) that allow for changing board size and adding more colors.

See the Pen Color Flood Game with Colorblind Mode (React + CSS Grid) by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

“Pass the Pigs” Scorekeeper App

My first major solo React project, this is a React app specifically for keeping score in the game Pass the Pigs. Optimized for mobile usage, this app is built to help players who are new to the game quickly tally rolls and know how to play. Modal messages explain how to get started, the endgame, and the winner.

This app was built with create-react-app defaults; all layout, CSS, animations, etc. are completely custom. Try it out at

Vue Google Font Tester

An exercise in building a customizable, interactive font tester in Vue JS. Probably best viewed on a wider screen; see the full-page view here.

See the Pen Google Font Tester in VueJS by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

Vue Interactive Demo Tutorial

A blog post-shaped pen with interactive code examples and demos for learning the basics of Vue.js.

Probably best viewed like this: view on CodePen in full-page mode.

See the Pen Vue Interactive Demo Tutorial by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

Interactive JavaScript Keyboard

One of my earlier major vanilla JavaScript projects that I took on to start exploring the world of JavaScript beyond jQuery. (Hat tip to Wes Bos and This pen just visualizes what you type both on the keyboard and in word form above it.

See the Pen JavaScript/Flexbox/SCSS Interactive Keyboard by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

Pure CSS Game Boy Advance SP

An older pen that I took on to practice pure CSS image-building. I still come back to it occasionally to refine things, and recently added a touch of JavaScript to allow the power button to “work” to turn on the screen.

See the Pen Game Boy Advance SP in Pure CSS by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

JavaScript Random Number Generator

Need a random number? How about a set of them? Maybe within a certain range, and with or without repeats? Need them sorted afterwards?

…Ok, you might not need any of those things. But if you do, this little pen has you covered.

See the Pen JavaScript Random Numbers Generator by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

CSS Grid and Sass Mario Sprite

This really isn’t a particularly good use of CSS grid, but it was fun to make. Also, seeing how minimalist I could be with the SASS was a good challenge. (The code probably isn’t very readable, but at least it’s pretty terse for how much is going on here.)

See the Pen Raccoon Mario Sprite in CSS Grid with Sass by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

CSS Scrolling Experiment

A little demo to show of some of CSS’s newer capabilities (display: grid and position: sticky, to be specific, along with some Sass and Flexbox).

See the Pen The Future Belongs to CSS by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

CSS Typography Quote

Just demoing a way to do some sexy typographic things like hanging quotes, dynamic type size and line breaks in responsive CSS.

See the Pen Typography Quote by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

CSS Animated Calendar Icon

An earlier pure CSS illustration and animation from the Design in Quotes project.

See the Pen Pure CSS Animated Calendar Icon by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

A client website for a neighborhood bistro, with email signup, minor eCommerce components, and some custom features. The header updates based on the time and day to display the relevant kitchen hours, and the menu page is interactive, allowing guests to filter by dietary restrictions. All menu items are client-editable from the backend with Advanced Custom Fields.

Another client website, with email signup, WooCommerce, and a custom music page that cross-references musicians and shows upcoming performances by date. Musicians, menu items, and most other details client-editable with Advanced Custom Fields.