aelweak / porkpunk

Pork Punk 🐷🤖🎧 (Le Repaire du Web - Contest - 404 Error page)

Pork Punk - 404 Error page

Contest details

• Brief : Create a custom 404 error page
• Start : Jan 23 (10 am), 2023
• End : Feb 5 (11.59 pm), 2023
• Results : 🥇1st place (out of 15)

_{(More details on Discord)}

Description/Features

Daft Punk's pig-double ? Done ✅🐷.

• "Harder, Better, Faster, Stronger" becomes... "Cuter, Pinker, Clever, Tender" !

• Still a reference to the original song with "Errθr" for reading/pronouncing "Error" and "Errer" (like previous "-er" adjectives)

• A simple "static" and "classic" page structure, avoiding "eye distractions" (like auto-played animations or so) and keeping an easy-reading message
  (That's why the :hover on pigs is also intentionally "inconspicuous", for example.)

• The goal is not to stay on the page, but rather to navigate out of it in a "guided" way : through the main naviguation, search field, "Go back to homepage" link or social media ones

• Visual (and audio 🔊) easter egg by clicking on pigs

  I was a bit disappointed here... and didn't manage to exactly reproduce the "vocoder (audio) effect" on "Cuter, Pinker, Clever, Tender" words, despite several attempts with Ableton Live...
  (Only music, no voices then... Maybe next time...)

• Auto .focus() on search field after a 10s delay of inactivity (to "gently" call to action)

Preview(s)