This page is always under construction. The yellow sections mean that I have not imitated this person's

Burger Net

Em's home page layout uses imagery of a physical 90's bedroom. The nostalgia is a ton of fun.

darkosparko's Cars shrine

What I admired
Darkosparko's shrine to Pixar's Cars is a fascinating example of sticking to a design that fits the purpose. Their page has checkered flags baked into the frames and Lightning's candy red paint color everywhere.

How I imitated
I'll admit I'm not a huge Minions fan. I think they're cute, but they are overdone. Originally I thought about making a blog post about hyper-marketing's affect on creative vision, but I'm a programmer not a political philosopher. This allowed me to play with CSS color variables and what not.

What I added
I wanted to give some personality to the boxes. Having the SVG eyes track you is a classic frontend flex that I wanted to document my ability to do. There's a lot of room for creativity here if I decide to come back to this project, such as having one of the Minions track a butterfly fluttering by or having them react to a user selecting text.

"To Do"

Here are some ideas to expand upon this theme...

  • Write 11ty code to create different versions of minion-eyes.svg to be used with different classes
  • Establish a file-specific cSpell solution to handle Minionese words.
  • Create a minionese lorem epsom generator.
  • Add a mouth to the svg.
  • STRETCH Create client-side javascript to animate minion-eyes.svg eyes.
  • Rough Idea Warning sign with text, "This shrine has been overtaken by an elite team of henchmen. The state of this page may be ever changing."

    Public notice notes include: "Proceed with caution.", "Creatures may speak foreign language.", "Creatures worship most evil beings in site, take careful note of their mass migrations."
  • Rough Idea Create a tutorial about clipPath vs mask and how that related to your struggle with minion's lid-mask.

Control Panel

This box is a temporary tool for use during web development.

Kevin's controls
Stuart's controls
Bob's controls

Lazer-Bunny

to randomly change the color scheme.
What I really admired
Lazer is able to display a lot of information in a well-organized, yet beautiful monochromatic pink layout.
How I imitated it
I used a similar monochromatic color scheme and organized my content in a clean, structured way.
How I added to it
I added a dynamic color-changing effect. Instead of using a background image asset, I used CSS variables to define a dynamic color palette.

ninacti0n's Lab

Nina is able to imbue her art into her website. She is using CSS rotation transform to align her text content to her uploaded images.

plumeslegumes' skeletons

I discovered plumeslegumes through the very fun WIMSE webring. Their tin wallet was decorated very nicely!
Clicking from their home page's skeleton, you find their skeletons page. They have a recurring character that pops up a lot on this page, a crow (complete with facial expressions). They introduce dialogue, similar to NPC's in video games. What a fun, unconventional way to interact with a website!
I wanted to try my hand at one of these interactive dialogues myself. They got their elements by ID and added onclick properties to each of them. They then toggled their displays' style between `block` and `none`.
I separated out the style (css) from the template (html), using classes to reference them. These common classes allowed my JavaScript to loop over them dynamically. The `opened` class was established to be able to toggle the CSS. I also used `addEventListener` instead of `onclick`, which aligns with the best practice of separation of concerns too.