17.0 beta 2

miermontoto · miermontoto · commit a4fc4f5c62cf · 2023-11-16T13:32:21.000+01:00
- better base template
- links as json
- enhance webutils
- marquee strings in data json
- minor changes
diff --git a/.eleventy.js b/.eleventy.js
@@ -5,7 +5,9 @@ module.exports = function (eleventyConfig) {
 
     eleventyConfig.addPassthroughCopy("./src/static/js/**");
     eleventyConfig.addPassthroughCopy("./assets/**");
-
+    eleventyConfig.addPassthroughCopy("**.data.json");
+    eleventyConfig.addGlobalData('repo', async () => fetch('https://api.github.com/repos/11ty/eleventy'));
+    eleventyConfig.setDataFileSuffixes([".data", ""]);
     eleventyConfig.setServerOptions({
         watch: ["_site/static/**"]
     });
@@ -18,6 +20,10 @@ module.exports = function (eleventyConfig) {
         return `<link rel="stylesheet" href="/static/css/app/${filename}.css">`;
     });
 
+    eleventyConfig.addShortcode("keywords", function() {
+        return `<meta name="keywords" content="${require('./package.json').keywords.join(', ')}">`;
+    });
+
     eleventyConfig.addShortcode("version", function() {
         let json = require('./package.json');
         let version = json.version;
diff --git a/package.json b/package.json
diff --git a/src/content/collections/experience/grado.md b/src/content/collections/experience/grado.md
@@ -5,7 +5,7 @@ period: 2020-2024 (expected)
 logo: 'epi'
 ---
 
-**grades:** 3.0 GPA, 12 honors
+**grades:** 3.0 GPA, <b style="color: gold;"><i>12 honors</i></b>
 
 see all subjects and content in my [backup](https://mier.info/backup).
 
@@ -19,3 +19,4 @@ some relevant projects and assignments:
 - [network and binary analysis in Assembly and C](https://github.com/miermontoto/HackingForce).
 - [RPC, MOM and consensus/sync algorithms in C](https://github.com/miermontoto/Distribuidos/tree/main/PL/entregas/entrega1).
 - data analysis and manipulation in [R](https://github.com/miermontoto/Estadistica/tree/main/PL) and [MATLAB](https://github.com/miermontoto/Computacion/tree/main/PL).
+- [cybersecurity, digital signing and certificates in C#](https://github.com/miermontoto/Seguridad/tree/master/PL)
diff --git a/src/content/collections/projects/gti.data.json b/src/content/collections/projects/gti.data.json
diff --git a/src/content/collections/projects/gti.njk b/src/content/collections/projects/gti.njk
@@ -4,6 +4,7 @@ desc: homemade quiz made up of official questions of the course <i>Gestión de T
 icons: [devicon-eleventy-plain, devicon-javascript-plain]
 permalink: /gti/
 demo: /gti/
+source: https://github.com/search?q=repo%3Amiermontoto%2Fmiermontoto+gti.&type=code
 ---
 
 {% addStyle 'gti' %}
diff --git a/src/content/collections/projects/webutils.njk b/src/content/collections/projects/webutils.njk
@@ -1,7 +1,7 @@
 ---
 title: webutils
 desc: wip!!
-icons: [devicon-eleventy-plain, devicon-javascript-plain]
+icons: [devicon-javascript-plain]
 permalink: /webutils/
 demo: /webutils/
 ---
diff --git a/src/content/collections/socials/github.md b/src/content/collections/socials/github.md
diff --git a/src/content/collections/socials/linkedin.md b/src/content/collections/socials/linkedin.md
diff --git a/src/content/collections/socials/mail.md b/src/content/collections/socials/mail.md
diff --git a/src/content/collections/socials/socials.json b/src/content/collections/socials/socials.json
diff --git a/src/content/collections/webutils/tiny.njk b/src/content/collections/webutils/tiny.njk
@@ -1,7 +1,7 @@
 {% addScript 'tiny' %}
 {% addStyle 'webutils' %}
 
-<div>
+<div id="options">
 	<input type="checkbox" id="tiny-ignore">
 	<label for="tiny-ignore">Ignore untinifyable content</label>
 </div>
diff --git a/src/index.data.json b/src/index.data.json
@@ -0,0 +1,24 @@
+{
+	"links": [
+		{"text": "linkedin", "url": "https://www.linkedin.com/in/miermontoto/"},
+		{"text": "github", "url": "https://github.com/miermontoto/"},
+		{"text": "mail", "url": "mailto:mier@mier.info"}
+	],
+	"marquee": [
+		"still celebrating Homework 25th anniversary.",
+		"the prime time of your life. now, live it.",
+		"something's in the air.",
+		"we are human, after all.",
+		"WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.",
+		"if love is the answer, you're home.",
+		"the perfect song is framed with silence.",
+		"make love.",
+		"and we will never be alone again.",
+		"many rooms to explore but the doors look the same.",
+		"ROCK. ROBOT ROCK.",
+		"touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.",
+		"around the world.",
+		"music sounds better with you.",
+		"one more time."
+	]
+}
diff --git a/src/index.njk b/src/index.njk
@@ -1,5 +1,4 @@
 ---
-title: mier
 layout: base.njk
 css: /static/css/index.css
 js: /static/js/index.js
@@ -12,9 +11,9 @@ js: /static/js/index.js
     <div id="marquee"><noscript>js isn't enabled :')</noscript></div>
 
     <div id="socials">
-        {% for item in collections.socials %}
-            <a href="{{ item.data.target }}" rel="noopener noreferrer">
-                <span class="dot"></span> {{ item.data.title }}
+        {% for link in links %}
+            <a href="{{ link.url }}" rel="noopener noreferrer">
+                <span class="dot"></span> {{ link.text }}
             </a>
         {% endfor %}
     </div>
diff --git a/src/static/css/app/gti.sass b/src/static/css/app/gti.sass
@@ -56,7 +56,14 @@
 	justify-content: center
 	align-items: center
 	font-size: 2em
+	color: lightgray
+	font-size: 1em
+	font-style: italic
 
+	.finished
+		color: base.$white
+		font-size: 1.5em
+		font-style: normal
 
 #scored
 	font-size: 2em
@@ -71,5 +78,5 @@
 
 
 #→
-	margin-left: 2em
-	margin-right: 2em
+	margin-left: 1em
+	margin-right: 1em
diff --git a/src/static/css/app/webutils.sass b/src/static/css/app/webutils.sass
@@ -1,23 +1,31 @@
 @use '../base'
 
-span.output
+.output:not(textarea)
 	$padding: 10px
 
 	border-radius: base.$radius
 	border: 2px solid base.$light
 	padding: $padding
 	overflow-wrap: anywhere
+	text-align: center
 
 .input, .output
 	width: 80%
 	height: max(1em, auto)
 
-.output:not(textarea)
-	text-align: center
-
 .utils
 	width: 100%
 
 .util.card
 	width: max(29%, 450px)
 	padding-bottom: 2em
+
+body
+	align-content: center
+	justify-content: center
+	vertical-align: middle
+	flex-wrap: wrap
+
+#encoded, #decoded
+	width: 100%
+	height: 100%
diff --git a/src/static/js/app/gti.js b/src/static/js/app/gti.js
@@ -1,9 +1,12 @@
 const isCorrect = (ans) => ans.classList.contains('correct') && ans.classList.contains('selected');
 let responded = 0;
+let total;
 
 window.addEventListener('load', () => { // when the page loads (the content is rendered)
 	resetAll();
 	document.querySelector('#reset').addEventListener('click', resetAll);
+	total = document.querySelectorAll('.question-block').length;
+	document.querySelector('#total').innerHTML = total;
 
 	// shuffle questions
 	let questions = document.querySelectorAll('.question-block');
@@ -17,7 +20,7 @@ window.addEventListener('load', () => { // when the page loads (the content is r
 	// shuffle 'shuffable' answer blocks
 	document.querySelectorAll('.answer-block').forEach((block) => {
 		let j = 0;
-		if (block.getAttribute('shuffle') !== 'false') {                 // if it's shuffable
+		if (block.getAttribute('shuffle') !== 'false') {               // if it's shuffable
 			block.querySelectorAll('br').forEach((br) => br.remove()); // remove all <br> tags
 			let answers = block.querySelectorAll('.answer');           // get all answers
 			shuffle(answers).forEach((ans) => {                        // shuffle them and for each
@@ -70,6 +73,10 @@ function handleAnswerClick(e) {
 
 	let score = document.querySelector('#correct').innerHTML / responded * 100;
 	document.querySelector('#score').innerHTML = round(score);
+
+	if (responded == total) {
+		document.querySelector('#results').classList.add('finished');
+	}
 }
 
 function round(number) {
@@ -92,10 +99,11 @@ function resetAll() {
 		ans.addEventListener('click', handleAnswerClick);
 	});
 
-	document.querySelector('#total').innerHTML = document.querySelectorAll('.question-block').length;
 	document.querySelector('#correct').innerHTML = 0;
 	document.querySelector('#score').innerHTML = 0;
 	responded = 0;
+
+	document.querySelector('#results').classList.remove('finished');
 }
 
 function shuffle(collection) {
diff --git a/src/static/js/global.js b/src/static/js/global.js
@@ -27,14 +27,14 @@ function christmas() {
     let month = date.getMonth();
 
     if (month == 11 || month == 0 && date.getDate() < 7) {
-        snow();
+        letitsnow();
         return true;
     }
 
     return false;
 }
 
-function snow() {
+function letitsnow() {
     let script = document.createElement('script');
     script.src = '/static/js/snow.js';
 
diff --git a/src/static/js/index.js b/src/static/js/index.js
@@ -5,24 +5,6 @@ const sections = [
 
 const projects = document.querySelector('table#projects');
 
-const strings = [
-    "still celebrating Homework 25th anniversary.",
-    "the prime time of your life. now, live it.",
-    "something's in the air.",
-    "we are human, after all.",
-    "WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.",
-    "if love is the answer, you're home.",
-    "the perfect song is framed with silence.",
-    "make love.",
-    "and we will never be alone again.",
-    "many rooms to explore but the doors look the same.",
-    "ROCK. ROBOT ROCK.",
-    "touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.",
-    "around the world.",
-    "music sounds better with you.",
-    "one more time."
-];
-
 sections.forEach(({ button, section }) => {
     button.addEventListener('click', () => {
         toggleSection(section);
@@ -67,8 +49,10 @@ function toggleSection(section) {
     }
 }
 
-
 function marqueeString() {
-    let randomString = strings[Math.floor(Math.random() * strings.length)];
-    document.getElementById('marquee').innerHTML = randomString;
+    fetch('index.data.json').then(response => response.json()).then(data => {
+        let strings = data.marquee;
+        let randomString = strings[Math.floor(Math.random() * strings.length)];
+        document.getElementById('marquee').innerHTML = randomString;
+    });
 }
diff --git a/src/templates/base.njk b/src/templates/base.njk
@@ -5,21 +5,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="generator" content="Eleventy">
-    {% if desc %}
-        <meta name="description" content="{{ desc }}">
-    {% else %}
-        <meta name="description" content="personal portfolio website where i write about myself and what i've done in the past.">
-    {% endif %}
+    <meta name="description" content="{{ desc or "personal portfolio website that collects all my projects and professional experiences." }}">
     {% if keywords %}
         <meta name="keywords" content="{{ keywords }}">
     {% else %}
-        <meta name="keywords" content="mier, Mier, Juan Mier, Juan Francisco Mier Montoto, Mier Montoto, miermontoto">
+        {% keywords %}
     {% endif %}
     <meta name="author" content="Juan Mier">
     <link rel="stylesheet" href="/static/css/global.css">
     <script src="/static/js/global.js" defer></script>
     <link rel="icon" href="/assets/favicon.svg" type="image/x-icon">
-    <title>{{ title }}</title>
+    <title>{{ title or "mier" }}</title>
     {% if js %}
         <script src="{{ js }}" defer></script>
     {% endif %}
@@ -34,7 +30,9 @@
         <span id="time-info"></span>
         <span id="click-info"></span>
     </div>
+
     {{ content | safe }}
+
     <a id="version-tag" href="https://github.com/miermontoto/miermontoto" target="_blank">{% version %}</span>
 </body>
 </html>
