20.4

[index]
- downsize and compress background videos
- remove background overlay
- add `target=_blank` to links
- fix style in big screens

[general]
- add new "questions" page
- add description about this site
- remove umami
- small content adjustments

Author: miermontoto

.eleventy.js

@@ -95,11 +95,13 @@ module.exports = function (eleventyConfig) {
 
     eleventyConfig.addShortcode("breadcrumbs", function(navPages) {
         if (!this.page.url) return ''; // if permalink is false in frontmatter, don't show breadcrumbs
+
         let targetName = this.page.url.replace('/', '').replace('/', '').replace('.html', '').toLowerCase();
-        // let beta = this.page.url.replace('.html', '').split('/');
-        // beta.shift();
-        // beta = beta.join('/');
-        // if (beta.endsWith('/')) beta = beta.slice(0, -1);
+        // let targetName = this.page.url.replace('.html', '').split('/');
+        // targetName.shift();
+        // targetName = targetName.join('/');
+        // if (targetName.endsWith('/')) targetName = targetName.slice(0, -1);
+
         let currentPage = findSelfInNavPages(navPages, targetName);
         if (!currentPage) {
             console.log(`unable to produce breadcrumbs for ${targetName}.`);
@@ -121,16 +123,90 @@ module.exports = function (eleventyConfig) {
         return `<span id="top" class="button topbtn">top ↑</span>`;
     });
 
-    eleventyConfig.addShortcode("quizButtons", (data) => {
-        import('./src/static/js/app/quiz/load.mjs').then((module) => {
-            return module.blocks(data);
+    eleventyConfig.addShortcode("qka", function(data) {
+        let template = ""
+        data.forEach((d, i) => {
+            let sources = d.s.map(s => `<li><a href="${s}">${s}</a></li>`).join(' ')
+            template += `
+            <div class="doubt hoverborder">
+                <span class="question">${i+1}. ${d.q}</span>
+                <span class="answer">${d.a}</span>
+                <span class="sources">sources: <br>${sources}</span>
+                <span class="bottom">keywords: <code>${d.k}</code>, date asked: ${d.d}</span>
+            </div>`
+        })
+        return template
+    });
+
+    eleventyConfig.addShortcode("quizButtons", function(json) {
+        let blocks = getBlocksFromJson(json);
+        if (blocks.length == 0 || blocks.length == 1) return '';
+
+        let template = `<div id="block-selection"> <h3>preguntas.</h3> <ul>`;
+        blocks.forEach(b => {
+            template += `<li><code>${b}</code>: ${json[b]['info']}</li>`;
         });
+        template += '<li><code>todas</code>: todas las preguntas</li></ul>';
+
+        blocks.forEach((b) => {
+            template += `<span class="button select-block" id="${b}">${b}</span>`
+        });
+
+        template += '<span class="button select-block" id="all">todas</span>';
+        template += '</div>';
+        return template;
     });
 
-    eleventyConfig.addShortcode("quizQuestions", (data) => {
-        import('./src/static/js/app/quiz/load.mjs').then((module) => {
-            return module.questions(data);
+    eleventyConfig.addShortcode("quizQuestions", function(json) {
+        let blocks = getBlocksFromJson(json);
+        let template = '<div id="questions">';
+
+        blocks.forEach((block) => {
+            let questions = json[block]['questions'];
+
+            questions.forEach((q) => {
+                let exam = q.exam == "true";
+
+                template += `
+                    <div class="question-block" block="${block}" exam="${exam}">
+                        <h2 class="question">
+                            ${q.title}
+                        </h2>
+                `;
+
+                if (q.options) {
+                    template += `<div class="options">`;
+
+                    q.options.forEach((o, j) => {
+                        template += `<h3 class="option">${j+1}. ${o}</h3>`;
+                    });
+
+                    template += `</div>`;
+                }
+
+                let shuffle = q.shuffle != "false";
+
+                template += `<div class="answer-block" shuffle="${shuffle}">`;
+                q.answers.forEach((a, j) => {
+                    template += `
+                    <span class="button answer${j == q.correct ? " correct" : ""}">
+                        ${a}
+                    </span> <br>`;
+                });
+
+                template += '</div>';
+                if (exam || !shuffle) {
+                    template += `<ul class="asterisks">
+                        ${exam ? '<li class="exam">pregunta de examen reciente</li>' : ''}
+                        ${!shuffle ? '<li class="shuffle">orden de respuestas fijado</li>' : ''}
+                    </ul>`;
+                }
+                template += '</div>';
+            });
         });
+
+        template += `</div>`;
+        return template;
     });
 
     const nunjucksEnvironment = new Nunjucks.Environment(

assets/media/background/birthday-nile.mp4

@@ -4,4 +4,3 @@
 - i like climbing, cycling and playing bass.
 - ruby, python, java and a little bit of everything else (c/c++, shell, web, sql, ...)
 - i take notes in markdown using [obsidian](https://obsidian.md).
-- this webpage is a tribute to the legendary [daft punk's 90s website](https://web.archive.org/web/20220223020719/https://daftpunk.com/)

assets/media/background/electroma-ad.mp4

@@ -9,9 +9,11 @@ class: okticket
 
 ---
 
-- back-end system migration (laravel 10, PHP 8.2, composer 2).
-- local deploy automation with Docker and Ruby.
-- load and stress tests with [Locust](https://locust.io/).
-- implementation of code styling and linting tools such as [duster](https://github.com/tighten/duster).
-- configuration of brand new environments for Mexico.
-- optimization and refactoring of legacy code.
+- **2024: current**
+- **2023: internship, software developer**
+  - back-end system migration (laravel 10, PHP 8.2, composer 2).
+  - local deploy automation with Docker and Ruby.
+  - load and stress tests with [Locust](https://locust.io/).
+  - implementation of code styling and linting tools such as [duster](https://github.com/tighten/duster).
+  - configuration of brand new environments for Mexico.
+  - optimization and refactoring of legacy code.

assets/media/background/ram-unboxed.mp4

@@ -3,7 +3,44 @@ title: mier.info
 desc: my personal portfolio, the very website you are looking at right now.
 source: https://github.com/miermontoto/miermontoto
 icons: [eleventy, firebase, sass, markdown, nunjucks, js]
-links: [{icon: "β", url: "https://mier-f6277--beta-ski9fkat.web.app/", "name": "beta"}]
+links: [{icon: "β", url: "https://mier-f6277--beta-ski9fkat.web.app/", name: "beta"}]
 star: star
+permalink: /this/
+redirect_from: [/mier.info/, /self/]
 emoji: 🌐
+buttons: [
+	{img: "β ", url: "https://mier-f6277--beta-ski9fkat.web.app/", text: "beta"}
+]
+eleventyNavigation:
+  key: this
+  title: 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 (yet it still looks like this)
+even though it's not impressive neither visually nor technically, it represents my ideas and beliefs.
+
+<br>
+
+## tech
+almost everything you see, from the breadcrumbs to the buttons, is handcrafted and built from scratch with <img src="/assets/icons/tech/eleventy.svg" class="icon" alt="eleventy">, hosted in <img src="/assets/icons/tech/firebase.svg" class="icon" alt="firebase">, using <img src="/assets/icons/tech/nunjucks.svg" class="icon" alt="nunjucks">, <img src="/assets/icons/tech/sass.svg" class="icon" alt="sass">, <img src="/assets/icons/tech/markdown.svg" class="icon" alt="markdown"> (and a ton of client-side <img src="/assets/icons/tech/js.svg" class="icon" alt="javascript">).
+
+apart from having its github repo, it is connected to firebase hosting through CI/CD using github actions, including the 'beta' branch that hosts the latest changes before going live.
+
+<br>
+
+## design
+the "design" is a tribute to the legendary [daft punk 90's website](https://web.archive.org/web/20220223020719/https://daftpunk.com/).
+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 the simplicty and the way that it looks.
+
+from the 1st of december to the 7th of january every year, there is snow falling falling (thanks to [snowstorm](https://www.schillmania.com/projects/snowstorm/))
+
+several other inspirations include:
+- [mschf](https://mschf.com/)
+- [crlf.link](https://crlf.link/)
+- [stacksorted](https://stacksorted.com/)
+- [dmaorg / clancy's blog](http://dmaorg.info/)
+- [ramsus' portfolio](https://rsms.me/)
+- [eduardorl's portfolio](https://eduardorl.vercel.app/)
+- [ruflas' portfolio](https://ruflas.dev/)