Here are some fun projects based alot around using css in creative ways along with React ;) Feel free to drop me a line if you'd like the source code. Most are single React files.
I made a little stonks game for an interview that had a "show and tell" part. They wanted an example similar to their stack which was heavy react hooks and typescript. So I made a useStonks hook with typescript.
The goal in the game is simple. Play the game of stonks and make fat stacks of 💵 whilst avoiding the shorts. Again, I used my favorite www.colourlovers.com to always give a nice set of colors.
It is more of a desktop game with ASWD controls but does work on mobile albeit a bit janky. For mobile just tap to move.
Note it may run a bit slow on mobile because I am using a filter: drop-shadow on the icons of each cell which is...slow.
Note 2 You can change the board size by adding a query param ?size=12.
A clone of a game called moonshine. My favorite game so far. It was a test to handle spawning and despawning in an ECS framework.
The colours are pulled from a nice-colour-palettes package which is the most popular colors on www.colourlovers.com
You can adding some query params to the url to play around with pip count and how many bombs you get. (default is one).
?pipCount=100&bombCount=10
Setting like 1000 pips could be...slow. :D
An experiment to see how far I could take a single div with a box shadow. A nice little mosaic done all with one giant box shadow.
I again used nice-colour-palettes package which is the most popular colors on www.colourlovers.com
?count=100 set number of mosaic items
Fill rate limited which means the smaller the screen the faster it goes.
I fun little game where you try and get the highest score with the fewest clicks. I had fun writing the algorithms :)
I wanted to do more with ECS system that will handle the basics of a breakout game. May not work nice on mobile :(
Little ECS flocking. Was going to become a nice little multiplayer herding game but well you know how projects go...and die.
A pure box shadow little app showing minimalistic versions of some characters. Based on a blog post a did.
All the ways to cssClick on them to randomly change them to something new. Or add and remove more.
I was playing around with css transforms and the like and ended up with a nice grid. Then I was like, hey we can move around on a virtual grid. That was nice so lets make it an RPG with a stupid big react hook to handle all game logic...
And here we are. After adding some random generation up to a given size and some 'level ups' with number of kills etc.
cmd + r or ctrl + r should fix you right up.And that is about all.
An example of writing an simple little ECS framework to move some divs.