A simple responsive website created for a LaunchCode 101 bootcamp assignment that includes a short but difficult hidden-picture game.
Features of the game include: maintaining picture location across responsive page layouts, updating a checklist of pictures, an easy mode that adds red borders to not-found pictures, and a congratulations pop-up when completed.
A gallery-style website I put together using TiddlyWiki, my own custom flexbox CSS tweaks, and a loading animation. While TiddlyWiki is very far from an ideal CMS, I chose it because my familiarity with it made this a quick site to get online and looking the way I wanted.
If I were redoing this site, I would not use TiddlyWiki, and I would focus on lazy-loading the images inside the single page to help reduce the page load cost.
This is a mockup of a blog theme, initially intended for static site generation, though I didn't get that far. I experimented a lot with free Google font display & serif pairings for extended chunks of text & reading, and settled on Poly for the main body font here.
The various "mood board" type sites that I've looked at have too many features for what I want out of a reference image collection, so I decided to work through a tutorial on creating drag & drop photo effect to see what creating my own app might entail.
Probably the most complicated website I've completed to date. Inspired by Wait but Why? and Buster Benson, I set about creating my own version from scratch. My first attempt was built in PHP but I had issues with getting tooltips to work.
This version uses JavaScript to build the grid from boxes, which makes responsiveness very difficult. I would tackle a third attempt by using an SVG and styling the individual elements. I believe I could make the squares change size based on resolution & maintain the same number per row at the same time.
(easter egg: the title word changes on page reload! If I were to extend this, I'd save which titles had been shown in a cookie so that the visitor got a random new word every single time the page reloaded until they'd gone through them all & then it would repeat.)
Messing around with collecting user input via Javascript, logging it, and making it disappear with CSS. Nothing too fancy, but it was a fun exercise in having an idea and quickly making a protype.
This is an extended version of a Web Programming assignment. The original, bare bones project asked you for your name every single time, and required a page reload to play again. My improved version uses a cookie to store the name a visitor inputs, allows you to play multiple times, and records the results of past rolls (until reload).