mier.info

🌐 mier.info

intro

this webpage is a collection of my personal projects, a place that I control that allows me to build and publish my own small ideas. I've spent a lot of time building it and slowly redefining it, and even though it's not impressive neither visually nor technically, it represents my ideas and beliefs.

tech

almost everything you see, from the breadcrumbs to the buttons, is handcrafted and built from scratch with , hosted in , using , , (and a ton of client-side ).

the github repo is connected to firebase hosting through CI/CD using github actions, including the 'beta' branch that hosts the latest changes before going live.

custom elements

the changelog is generated using the git history, first processed using a ruby script which generates a json file, which is then processed by javascript to generate the html changelog.
the breadcrumbs at the top of the page (which are also used for navigation) are generated using the eleventyNavigation keys and processed with javascript to statically generate the html navigation bar for each page.
the treemap is generated in a similar way to the breadcrumbs, using the eleventy collections and processed with javascript to generate the html treemap.
the quizzes are generated using a json file and processed with javascript to generate the html quiz, including listeners and animations.
the til (today i learned) posts are handled using markdown files and processed with custom javascript. the tagging system, related posts and timedates need this processing to be displayed correctly.

design

the "design" is a tribute to the legendary daft punk 90's website. as you can probably tell, it's a very important reference for me, and even though it doesn't hold up to today's standards, i've always loved its simplicty and looks.

from December 1st to January 7th every year, there is snow falling (thanks to zachleat)

several other inspirations:

0.23.2