Skip to main content

Code

I typically work in WordPress or JavaScript (vanilla, or React/Vue), though I’ve also built with PHP/SQL, bash, and Node, and have dabbled in Ruby. I love CSS and semantic HTML, I built this site’s theme from scratch, and I find regular expressions way more exciting than most people do.

Work links:

 

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.

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.

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 qvicklist.com: 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.

“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 passthepigs.now.sh.

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 javascript30.com.) 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.

marksindundee.com

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.

jambo.cat

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.