19.0 alpha 1

[general]
- use js modules, new js dir tree
- new sass modules for animations and colors
- move background videos to own dir
- fix firebase deploy github actions
- modulize index data json
-test new marquee

.eleventy.js

@@ -24,7 +24,7 @@ module.exports = function (eleventyConfig) {
 
     eleventyConfig.addPassthroughCopy("./src/static/js");
     eleventyConfig.addPassthroughCopy("./assets");
-    eleventyConfig.addPassthroughCopy("**.data.json");
+    eleventyConfig.addPassthroughCopy("**.json");
     eleventyConfig.setDataFileSuffixes([".data", ""]);
     eleventyConfig.setQuietMode(true);
     eleventyConfig.setServerOptions({
@@ -34,7 +34,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addShortcode("addScript", function (filename) {
         let filepath = findFileInDir("./src/static/js", `${filename}.js`);
         if (filepath) {
-            return `<script src="${filepath.replace('src', '')}" defer></script>`;
+            return `<script type="module" src="${filepath.replace('src', '')}"></script>`;
         }
 
         console.log(`Script file ${filename}.js not found in /src/static/js/`);
@@ -135,7 +135,8 @@ module.exports = function (eleventyConfig) {
     return {
         dir: {
             input: "src",
-            includes: "templates"
+            includes: "templates",
+            data: "data"
         }
     };
 };

.github/workflows/firebase-hosting-beta.yml

@@ -18,3 +18,5 @@ jobs:
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MIER_F6277 }}'
           channelId: beta
           projectId: mier-f6277
+      - name: trigger speedlify deploy
+        run: 'curl -X POST -d "{}" -H "Content-Type: application/x-www-form-urlencoded" "https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_HOOK }}"'

.github/workflows/firebase-hosting-merge.yml

@@ -19,4 +19,4 @@ jobs:
           channelId: live
           projectId: mier-f6277
       - name: trigger speedlify deploy
-        run: 'curl -X POST -d "{}" -H "Content-Type: application/x-www-form-urlencoded" "https://api.netlify.com/build_hooks/${{ sectrets.NETLIFY_HOOK }}"'
+        run: 'curl -X POST -d "{}" -H "Content-Type: application/x-www-form-urlencoded" "https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_HOOK }}"'

src/content/data/backgrounds.json

@@ -0,0 +1,6 @@
+[
+	"birthday-nile.mp4",
+	"ram-unboxed.mp4",
+	"unseen-ram.mp4",
+	"electroma-ad.mp4"
+]

src/content/data/marquee.json

@@ -0,0 +1,18 @@
+[
+	{"text": "still celebrating Homework 25th anniversary.", "url": "https://x.com/daftpunk/status/1550481560620732418"},
+	{"text": "the prime time of your life. now, live it.", "url": "https://www.youtube.com/watch?v=Kg_WWb181q8"},
+	{"text": "something's in the air.", "url": "https://www.youtube.com/watch?v=bRt5z880CFY"},
+	{"text": "we are human, after all.", "url": "https://youtu.be/HTk-xavFATw?si=V8o_TIqUvbqpRoET&t=100"},
+	{"text": "WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.", "url": "https://soundcloud.com/retailgroup/daft-punk-essential-mix-1997"},
+	{"text": "if love is the answer, you're home.", "url": "https://www.youtube.com/watch?v=DuDX6wNfjqc"},
+	{"text": "the perfect song is framed with silence.", "url": "https://youtu.be/3T0NqvdUiWI"},
+	{"text": "make love.", "url": "https://www.youtube.com/watch?v=UeZG0viNAjM"},
+	{"text": "and we will never be alone again.", "url": "https://www.youtube.com/watch?v=a5uQMwRMHcs"},
+	{"text": "many rooms to explore but the doors look the same.", "url": "https://www.youtube.com/watch?v=cuj__JnGWLg"},
+	{"text": "touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.", "url": "https://youtu.be/vY8zmjT8Rsw?t=153"},
+	{"text": "around the world.", "url": "https://www.youtube.com/watch?v=K0HSD_i2DvA"},
+	{"text": "music sounds better with you.", "url": "https://www.youtube.com/watch?v=FQlAEiCb8m0"},
+	{"text": "one more time.", "url": "https://www.youtube.com/watch?v=Hjqs8YIB7ys"},
+	{"text": "D.V.N.O., four capital letters.", "url": "https://www.youtube.com/watch?v=GiDsLRQg_g4"},
+	{"text": "use imagination as a destination.", "url": "https://www.youtube.com/watch?v=4m5zEM2T5Fg"}
+]

src/content/data/socials.json

@@ -0,0 +1,5 @@
+[
+	{"text": "linkedin", "url": "https://www.linkedin.com/in/miermontoto/"},
+	{"text": "github", "url": "https://github.com/miermontoto/"},
+	{"text": "mail", "url": "mailto:mier@mier.info"}
+]

src/index.njk

@@ -12,7 +12,7 @@ js: index
 
 <div id="main-container">
     <div id="title">juan<br>mier</div>
-    <div id="marquee">⠀<noscript>js isn't enabled :')</noscript></div>
+    <div id="marquee-main" class="marquee">⠀<noscript>js isn't enabled :')</noscript></div>
 
     <div id="socials">
         {% for link in links %}
@@ -28,6 +28,13 @@ js: index
     </div>
 </div>
 
+<div id="marquee-scroll" class="marquee center">
+    SCROLL DOWN ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ PROJECTS ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ SCROLL DOWN
+    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ PROJECTS ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ SCROLL DOWN ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+    PROJECTS ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ PROJECTS ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ PROJECTS
+    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+</div>
+
 {% import "src/static/macros.njk" as macros %}
 
 <section id="project-section" class="section">

src/static/css/_animations.sass

@@ -0,0 +1,48 @@
+@keyframes scroll-right
+    0%
+        transform: translateX(100%)
+    100%
+        transform: translateX(-100%)
+
+@keyframes scroll-center
+    0%
+        transform: translateX(0)
+    100%
+        transform: translateX(-100%)
+
+@keyframes MULTICOLOR
+    0%
+        background-color:#9f0
+        color:#f3c
+    10%
+        background-color:#6ff
+        color:#f0c
+    20%
+        background-color:#39f
+        color:#9f0
+    30%
+        background-color:#3c0
+        color:#fff
+    40%
+        background-color:#03f
+        color:#f90
+    50%
+        background-color:#9f0
+        color:#f30
+    60%
+        background-color:#f0c
+        color:#fff
+    70%
+        background-color:#0ff
+        color:#f30
+    80%
+        background-color:#9f0
+        color:#066
+    90%
+        background-color:#f90
+        color:#03f
+    100%
+        background-color:#03f
+        color:#f90
+
+$multicolor: 1s MULTICOLOR infinite

src/static/css/_base.sass

@@ -1,56 +1,8 @@
-// Colors
-$primary: hsl(0, 0%, 1%)
-$secondary: hsl(0, 0%, 5%)
-$light: hsl(0, 0%, 50%)
-$dark: hsl(0, 0%, 25%)
-$white: hsl(0, 0%, 99%)
-$correct: #00df0b
-$wrong: #d40b00
-$correct-background: #007706
-$wrong-background: #660500
-$warning: #c5a100
-
-// Fonts
 @font-face
     font-family: 'Courier Prime'
     font-display: swap
     src: local('Courier Prime'), url('/assets/fonts/CourierPrime.woff2') format('woff2')
 
 $fonts: 'Courier Prime', monospace
-$animation: 1s MULTICOLOR infinite
 $radius: 10px
-
-@keyframes MULTICOLOR
-    0%
-        background-color:#9f0
-        color:#f3c
-    10%
-        background-color:#6ff
-        color:#f0c
-    20%
-        background-color:#39f
-        color:#9f0
-    30%
-        background-color:#3c0
-        color:#fff
-    40%
-        background-color:#03f
-        color:#f90
-    50%
-        background-color:#9f0
-        color:#f30
-    60%
-        background-color:#f0c
-        color:#fff
-    70%
-        background-color:#0ff
-        color:#f30
-    80%
-        background-color:#9f0
-        color:#066
-    90%
-        background-color:#f90
-        color:#03f
-    100%
-        background-color:#03f
-        color:#f90
+$weight: 700

src/static/css/_colors.sass

@@ -0,0 +1,10 @@
+$primary: hsl(0, 0%, 1%)
+$secondary: hsl(0, 0%, 5%)
+$light: hsl(0, 0%, 50%)
+$dark: hsl(0, 0%, 25%)
+$white: hsl(0, 0%, 99%)
+$correct: #00df0b
+$wrong: #d40b00
+$correct-background: #007706
+$wrong-background: #660500
+$warning: #c5a100

src/static/css/app/backup.sass

@@ -1,4 +1,5 @@
 @use '../base'
+@use '../colors'
 
 h2, h3
     margin-top: 2em
@@ -21,5 +22,5 @@ h2, h3
         font-weight: normal
 
 .unavailable
-    color: base.$light
+    color: colors.$light
     text-decoration: line-through

src/static/css/app/gti.sass

@@ -1,30 +1,31 @@
 @use '../base'
+@use '../colors'
 
 .selected // selected answers
 	&.correct
-		background-color: base.$correct !important
+		background-color: colors.$correct !important
 
 	&.disabled
-		background-color: base.$wrong
+		background-color: colors.$wrong
 
 .disabled // not selected answers
-	background-color: base.$dark
+	background-color: colors.$dark
 
 	&.correct:not(.selected)
-		background-color: base.$correct-background
+		background-color: colors.$correct-background
 
 .question-block
 	&.correct
-		border-color: base.$correct-background
+		border-color: colors.$correct-background
 
 	&.wrong
-		border-color: base.$wrong-background
+		border-color: colors.$wrong-background
 
 .select-block
-	background-color: base.$light
+	background-color: colors.$light
 
 	&.selected
-		background-color: base.$white
+		background-color: colors.$white
 
 .disabled:hover
 	cursor: auto
@@ -43,7 +44,7 @@
 	margin: 0 auto
 	width: 90%
 	border-radius: 8px
-	border: 3px solid base.$dark
+	border: 3px solid colors.$dark
 	margin-bottom: 2em
 	padding: 2em
 
@@ -58,7 +59,7 @@
 	font-style: italic
 
 	&.finished
-		color: base.$white
+		color: colors.$white
 		font-size: 1.5em
 		font-style: normal
 

src/static/css/app/webutils.sass

@@ -1,10 +1,11 @@
 @use '../base'
+@use '../colors'
 
 .output:not(textarea)
 	$padding: 10px
 
 	border-radius: base.$radius
-	border: 2px solid base.$light
+	border: 2px solid colors.$light
 	padding: $padding
 	overflow-wrap: anywhere
 	text-align: center