20.0 alpha

miermontoto · miermontoto · commit 26533470ed84 · 2023-12-12T00:40:21.000+01:00
[index]
- rework (again) project section

[projects]
- update/fix descriptions
- add new macros for projects
- add new icons
- add "emojis" or mini icons
- remove legacy frontmatter

[general]
- minor style tweaks
- remove unused code/assets
diff --git a/assets/icons/misc/house.svg b/assets/icons/misc/house.svg
diff --git a/assets/icons/tech/heroku.svg b/assets/icons/tech/heroku.svg
diff --git a/assets/media/projects/root/icon.ico b/assets/media/projects/root/icon.ico
diff --git a/assets/media/projects/sumatres/icon.png b/assets/media/projects/sumatres/icon.png
diff --git a/package.json b/package.json
diff --git a/src/content/collections/projects/advent.md b/src/content/collections/projects/advent.md
@@ -3,4 +3,5 @@ title: advent of code
 desc: resolution of the Advent of Code challenges.
 source: https://github.com/miermontoto/AdventOfCode
 icons: [ruby]
+emoji: 🎄
 ---
diff --git a/src/content/collections/projects/backup.md b/src/content/collections/projects/backup.md
@@ -8,6 +8,7 @@ keywords: backup, backup carrera, epi, epi gijón, asignaturas, giitin, informá
 icons: [markdown, github]
 star: star
 lang: es
+emoji: 📚
 eleventyNavigation:
   key: backup
 ---
diff --git a/src/content/collections/projects/dashboard.md b/src/content/collections/projects/dashboard.md
@@ -3,5 +3,5 @@ title: dashboard
 desc: status dashboard powered by Uptime Kuma and custom css
 demo: https://dashboard.mier.info
 icons: [nginx, linux]
-status: https://dashboard.mier.info/api/badge/13/uptime/48?style=flat-square
+emoji: 📊
 ---
diff --git a/src/content/collections/projects/dotfiles.md b/src/content/collections/projects/dotfiles.md
@@ -3,4 +3,5 @@ title: "dotfiles"
 desc: "personal themes, configs and tweaks for my linux setups"
 source: https://github.com/miermontoto/dotfiles
 icons: [fedora]
+emoji: 🐧
 ---
diff --git a/src/content/collections/projects/epicalendar.md b/src/content/collections/projects/epicalendar.md
@@ -6,10 +6,11 @@ links: [{icon: 'ⓘ', url: "/epiCalendar", "name": "readme"}]
 demo: https://epicalendar.mier.info
 permalink: /epiCalendar/
 redirect_from: /epicalendar/
-icons: [flask, python, react]
+icons: [flask, python, react, heroku]
 img: true
 lang: es
 star: star
+emoji: 📅
 buttons: [
     {'url': 'https://epicalendar.mier.info', 'img': '<span class="ico">🌐</span>', 'text': 'página web'}
 ]
diff --git a/src/content/collections/projects/gti.njk b/src/content/collections/projects/gti.njk
@@ -1,13 +1,14 @@
 ---
 title: gti quiz
-desc: homemade quiz made up of official questions of the course <i>Gestión de Tecnologías de la Información</i>
+desc: homemade quiz made up of official questions for an <b>ITIL4</b> course.
 icons: [eleventy, js]
 permalink: /gti/
 demo: /gti/
 keywords: gti, quiz, test, daypo, epi, itil, itil4, examen, backup, backup carrera, epi gijon, epi gti, gti daypo epi
 source: https://github.com/search?q=repo%3Amiermontoto%2Fmiermontoto+gti.&type=code
 download: /content/collections/projects/gti.data.json
 lang: es
+emoji: 📝
 buttons: [
 	{'url': '/content/collections/projects/gti.data.json', 'img': '<img src="/assets/icons/misc/download.svg" class="icon invert" alt="download">', 'text': 'download json'},
 	{'url': 'https://github.com/miermontoto/miermontoto/issues/new', 'img': '<img src="/assets/icons/misc/bug.svg" class="icon invert" alt="issue">', 'text': 'report bug'}
diff --git a/src/content/collections/projects/mandelbrot.md b/src/content/collections/projects/mandelbrot.md
@@ -1,7 +1,8 @@
 ---
 title: mandelbrot
-desc: mandelbrot set fractal generator using python/openmp/cuda.
+desc: parallelized fractal generator (CPU and GPU).
 source: https://github.com/miermontoto/mandelbrot
 icons: [c, cuda, python]
 img: true
+emoji: 🖼️
 ---
diff --git a/src/content/collections/projects/notflix.md b/src/content/collections/projects/notflix.md
@@ -3,4 +3,5 @@ title: notflix.
 desc: script that scouts 1337x and streams the torrent selected using webtorrent.
 source: https://github.com/miermontoto/notflix.
 icons: [linux, terminal]
+emoji: 🎥
 ---
diff --git a/src/content/collections/projects/pomodoro.md b/src/content/collections/projects/pomodoro.md
@@ -4,4 +4,5 @@ desc: automatic pomodoro app made for okticket.
 source: https://github.com/miermontoto/pomodoro
 icons: [firebase, vue, sass]
 demo: https://pomodoro.mier.info
+emoji: 🍅
 ---
diff --git a/src/content/collections/projects/root.md b/src/content/collections/projects/root.md
@@ -3,4 +3,5 @@ title: root
 desc: general purpose batchfile.
 source: https://github.com/miermontoto/Root
 icons: [windows, terminal]
+emoji: <img src="/assets/media/projects/root/icon.ico" class="icon color round" alt="sumatres logo">
 ---
diff --git a/src/content/collections/projects/si2022.md b/src/content/collections/projects/si2022.md
@@ -1,7 +1,8 @@
 ---
 title: SI2022-PL41
-desc: management app for COIIPA made for Sistemas de Información.
+desc: mockup management app for local engineers college.
 source: https://github.com/miermontoto/SI2022-PL41
 icons: [java, ruby]
 img: true
+emoji: 💼
 ---
diff --git a/src/content/collections/projects/speedlify.md b/src/content/collections/projects/speedlify.md
@@ -3,4 +3,5 @@ title: speedlify
 desc: netlify hosted tool that monitors the performance of my websites.
 demo: https://speedlify.mier.info
 icons: [netlify, eleventy]
+emoji: 🏎️
 ---
diff --git a/src/content/collections/projects/sumatres.md b/src/content/collections/projects/sumatres.md
@@ -3,4 +3,5 @@ title: SumaTres
 desc: Threes! clone made in Java, product of several subjects' final projects.
 source: https://github.com/miermontoto/SumaTres
 icons: [java]
+emoji: <img src="/assets/media/projects/sumatres/icon.png" class="icon color round" alt="sumatres logo">
 ---
diff --git a/src/content/collections/projects/web.md b/src/content/collections/projects/web.md
@@ -3,7 +3,7 @@ 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]
-status: https://dashboard.mier.info/api/badge/1/uptime/48?style=flat-square
 links: [{icon: "β", url: "https://mier-f6277--beta-ski9fkat.web.app/", "name": "beta"}]
 star: star
+emoji: 🌐
 ---
diff --git a/src/content/collections/projects/webutils.njk b/src/content/collections/projects/webutils.njk
@@ -4,13 +4,14 @@ desc: 'small collection of web utilities: md5, base64, url encode/decode, etc.'
 icons: [js]
 permalink: /webutils/
 demo: /webutils/
+emoji: 🖇️
 eleventyNavigation:
   key: webutils
 ---
 
 <div class="carded" id="utils">
 {% for util in collections.webutils %}
-	<div id="{{ util.fileSlug }}" class="util card">
+	<div id="{{ util.data.title }}" class="util card">
 		<h2 class="card-title"><a href="/{{ util.fileSlug }}">{{ util.fileSlug }}</a></h2>
 		{{ util.templateContent | safe }}
 	</div>
diff --git a/src/index.njk b/src/index.njk
@@ -6,7 +6,7 @@ js: index
 
 <div id="main-container">
     <div id="title">juan<br>mier</div>
-    <div id="marquee" class="marquee">⠀<noscript>js isn't enabled :')</noscript></div>
+    <div id="marquee" class="marquee">⠀</div>
 
     <div id="socials">
         {% for link in socials %}
@@ -26,63 +26,44 @@ js: index
 
 <section id="project-section" class="section">
     <h1>projects.</h1>
-    <h2>featured.</h2>
-    <div id="featured" class="carded">
-        {% for project in collections.project %}
-            {% if project.data.img %}
-                <div class="project card">
-                    <div class="project-img">
-                        <img src="/assets/media/projects/{{ project.fileSlug }}/front.webp" alt="{{ project.data.title }} image" class="main">
-                        <img src="/assets/media/projects/{{ project.fileSlug }}/back.webp" alt="{{ project.data.title }} alt image" class="hover">
-                    </div>
+    <div id="projects">
+        <div id="featured-grid">
+            {% for project in collections.project %} {% if project.data.img %} {% set link = project.data.demo or project.data.source %}
+                <div class="project hoverborder">
+                    <a href="{{ link }}" rel="noreferrer" class="project-img-container">
+                        <div class="project-img">
+                            <img src="/assets/media/projects/{{ project.fileSlug }}/front.webp" alt="{{ project.data.title }} image" class="main">
+                            <img src="/assets/media/projects/{{ project.fileSlug }}/back.webp" alt="{{ project.data.title }} alt image" class="hover">
+                        </div>
+                    </a>
+                    <div class="project-content">
+                        <div class="project-title">
+                            {{ macros.renderTitle(project) }}
+                        </div>
 
-                    <div class="project-title">
-                        {% if project.data.demo %}
-                            <a href="{{ project.data.demo }}" rel="noopener noreferrer">{{ project.data.title }}</a>
-                        {% else %}
-                            {{ project.data.title }}
-                        {% endif %}
-                    </div>
+                        <div class="project-description">
+                            {{ project.data.desc }}
+                        </div>
 
-                    <div class="project-description">
-                        {{ project.data.desc }}
-                    </div>
+                        <div class="project-tech">
+                            {{ macros.renderIcons(project.data.icons) }}
+                        </div>
 
-                    <div class="project-links">
-                        {% if project.data.source %}
-                            <a href="{{ project.data.source }}" target="_blank" rel="noopener noreferrer" aria-label="source code for {{ project.data.title }}">
-                                {{ macros.renderIcon('git') }}
-                            </a>
-                        {% endif %}
-                        {% for link in project.data.links %}
-                            <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.icon | safe }}</a>
-                        {% endfor %}
+                        <div class="project-links">
+                            {{ macros.renderLinks(project) }}
+                            {% if project.data.demo %}
+                                <a href="{{ project.data.demo }}" rel="noopener noreferrer" class="button">⇉ link</a>
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
-            {% endif %}
-        {% endfor %}
-    </div>
-    <hr>
-    <h2>all.</h2>
-    <div id="project-list">
-        <ul>
-            {% for project in collections.project %}
-                <li class="project {{ project.data.star }}" id="{{ project.data.title | slug }}">
+            {% endif %} {% endfor %}
+        </div>
+        <div id="project-list">
+            {% for project in collections.project %} {% if not project.data.img %}
+                <div class="project {{ project.data.star }} hoverborder" id="{{ project.data.title | slug }}">
                     <div class="project-title">
-                        {% if project.data.demo %}
-                            <a href="{{ project.data.demo }}" rel="noopener noreferrer">{{ project.data.title }}</a>
-                        {% elif project.data.source %}
-                            <a href="{{ project.data.source }}" rel="noopener noreferrer">{{ project.data.title }}</a>
-                        {% else %}
-                            {{ project.data.title }}
-                        {% endif %}
-                        {% if project.data.star %}
-                            <span class="star info">⭐</span>
-                        {% endif %}
-                        {% if project.data.new %}
-                            <span class="new info">new!</span>
-                        {% endif %}
-
+                        {{ macros.renderTitle(project) }}
                         <div class="project-tech">
                             {{ macros.renderIcons(project.data.icons) }}
                         </div>
@@ -94,19 +75,12 @@ js: index
 
                     {% if project.data.links or project.data.source and project.data.demo %}
                         <div class="project-links">
-                            {% if project.data.source and project.data.demo %}
-                                <a href="{{ project.data.source }}" target="_blank" rel="noopener noreferrer" aria-label="source code for {{ project.data.title }}">
-                                    {{ macros.renderIcon('git') }} [source]
-                                </a>
-                            {% endif %}
-                            {% for link in project.data.links %}
-                                <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.icon | safe }} [{{ link.name}}]</a>
-                            {% endfor %}
+                            {{ macros.renderLinks(project, false) }}
                         </div>
                     {% endif %}
-                </li>
-            {% endfor %}
-        </ul>
+                </div>
+            {% endif %} {% endfor %}
+        </div>
     </div>
 </section>
 
diff --git a/src/static/css/global.sass b/src/static/css/global.sass
@@ -129,6 +129,9 @@ hr
             user-select: none
             font-size: 1.5em
 
+img.round
+    border-radius: 3px
+
 .icon
     font-size: 1em
     height: auto
@@ -141,6 +144,9 @@ hr
     &.invert
         filter: invert(0) grayscale(1) brightness(1)
 
+    &.color
+        filter: none
+
 .error, noscript
     color: colors.$wrong
     font-weight: bold
diff --git a/src/static/css/index.sass b/src/static/css/index.sass
diff --git a/src/static/macros.njk b/src/static/macros.njk
