For the purpose of fulfilling the requirements of Hackclub's Swirl, I went digging and procured a list of obscure HTML elements to use in this project! That includes...
<mark></mark> used, in general, to display the colors of items
<details>[hidden stuff] ... <summary>[toggle title]</summary></details> for the vendors - clean, right?
<input type="color"> for color selection! how fun :D
If you're wondering how this displays HTML as plaintext, the trick is to replace angle brackets with their corresponding HTML entities;
< (also <) is the less than symbol and > (also >) is the greater than symbol. Wanna know more? Use the inspect tool!
Nearly lost my mind over CSS animations (I forgot how to do things...)
Had the ingenious idea to make this timeline! Also realized how this was meant to be more or less a throwaway project (shhhh don't tell the website!) and it's taken the spot of my own portfolio ww
I think I had a breakthrough in the design of this website's owner last night!!! In English, its name is Mong, nickname MongMong :D More to come in due time ^^
Browsed my liked songs list (Spotify) (my Youtube collection is honestly better but I don't have much patience ww) to make the music selection section! Unfortunately?, I am the type to refresh my liked songs every now and then and I might have to do some extended Spring Cleaning soon.
At this point my joints hurt :D That is, if I have joints, of course... Anyway, to recap:
added new sections
added themes (i heart lopsec)
improved? the vendors
Aggregated
Evidence of insanity
Listened to...
Laurie Anderson - Big Science in its entirety and more
Alejandro Maciá - The Floor is Lava 16x don't ask why I'm not sure either
Kouek - Holiday chat is this real
css (but not for me)
These are all inline CSS styled HTML elements. To see behind the scenes, right click to inspect or use the shortcut and take a look around. You are encouraged to click random stuff and see what happens! To learn how this works, visit MDN docs or W3Schools and try applying rules in your own code editor! Other useful resources: css-tricks, codepen, and stack overflow. Have fun losing your mind!
image mask