Josh Collinsworth

Featured project: Quina

Quina is a strategic, logical word game, built from scratch with Nuxt. The gameplay is based on classic pen-and-paper word games (think: Mastermind, but with words), but the app and design are 100% original.

Quina was released December 2020 as a progressive web app and on the Google Play store. Version 2.0 was released in spring 2022 (with an overhauled game board, a daily puzzle mode, and new achievements). Version 2.0 was also released on the iOS App Store.

Quina on iOS
Quina on Android
Quina on the web
GitHub repo
Read about the making of Quina on this blog and on CSS Tricks

Hondo

Another word game, this one built with SvelteKit, and a bit more akin to Wordle (but with some twists and more complex mechanics).

The goal is to guess as many words as possible in a row, earning bonus points for streaks, to get to 100 points as quickly as possible.

SvelteKit static blog starter

A fully open-source, pre-configured starter for a SvelteKit blog. Includes Markdown and Sass preprocessing; has mdsvex with rehype plugins pre-installed; and includes automatic prefetching of top-level routes, an RSS feed, and a JSON API.

sveltekit-static-starter.netlify.app

CSS Easing playground

Created for this blog post, this interactive playground lets you examine how a variety of easing curves look and feel, and allows you to draw up your own and copy the CSS.

Every curve on the page is an SVG, including the interactive demo, which is accessible across device types. The curve redraws in real time as the handles are moved, and an animated node follows the curve to demonstrate the movement.

Live demo

joshcollinsworth.com/demos/easing

CodePen Projects

A sampling of some games and experiments I've built on CodePen, mostly in Vue, but some in React or vanilla JS as well.

A Sliding Puzzle in Vue (with an alternate version that converts images to sliding puzzles)
A fun Emoji Slider made with Vue
An interactive Vue tutorial blog post
The game of Hangman in Vue, using a quotes API
An Interactive CSS Filter React Component
The classic Color Flood Game build with React
The game of Connect Four in Vue
A (mostly) pure CSS exploration of making a completely different view at several breakpoints called Retro Breakpoints of Infinity
A silly "Pick Two of three" checklist
Some pure CSS illustrations, like this Raccoon Mario sprite and this Pure CSS Game Boy Advance SP
A mouse-tracking game of cat and mouse
A small but handy liquid measurement converter app
A dramatic d20 roller
Generative typographic art grid in Vue
A Hex/RGB(a) color converter in Vue

Other projects and apps

You can also find my work on GitHub (although truth be told I don't really bother curating it there at all.)

Website for Rise, Flywheel/WP Engine's BIPOC employee resource group
NolanFabricius.com
Pass the Pigs scorekeeper app built in React
A handy liquid measurement converter progressive web app, built with Vue
A Svelte Dad Joke randomizer and searcher app
"Smitty", the Super Metroid Item Tracker app built in Svelte
WPMultisiteDomainReplace.com, a Nuxt app to update your WordPress multisite's database when switching main domains
Qvick List, an on-demand Vue to-do list app that saves to local storage. (Needs some updating.)
Flywheel retreat websites for 2019 and 2020.
A WordPress plugin to help make various other plugins and theme compatible with Flywheel's cloud platform
A Chrome extension, an internal knowledge base, various WordPress themes, a couple of Node CLI tools, and a handful of trainings and presentations (none of which I can show here because employer privacy and such)