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.
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.
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.
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.
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.
“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 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.
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.
Pure CSS Game Boy Advance SP
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.
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.)
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).
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.
CSS Animated Calendar Icon
An earlier pure CSS illustration and animation from the Design in Quotes project.
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.