19.0 alpha 2

[general]
- scrap scroll mschf idea
- minor corrections

Author: miermontoto

.eleventy.js

@@ -1,6 +1,7 @@
 const fs = require("fs");
 const path = require("path");
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
+const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 
 function findFileInDir(dir, filename) {
     let files = fs.readdirSync(dir);
@@ -21,6 +22,7 @@ function findFileInDir(dir, filename) {
 
 module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(EleventyRenderPlugin);
+    eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
     eleventyConfig.addPassthroughCopy("./src/static/js");
     eleventyConfig.addPassthroughCopy("./assets");
@@ -136,7 +138,7 @@ module.exports = function (eleventyConfig) {
         dir: {
             input: "src",
             includes: "templates",
-            data: "data"
+            data: "content/data"
         }
     };
 };

package-lock.json

@@ -4,18 +4,12 @@ css: index
 js: index
 ---
 
-<video id="background" autoplay loop muted playsinline></video>
-<div id="overlay">
-    <span id="fullscreen-background" class="button light">⛶</span>
-    <span id="stop-background" class="button light">⨯</span>
-</div>
-
 <div id="main-container">
     <div id="title">juan<br>mier</div>
-    <div id="marquee-main" class="marquee">⠀<noscript>js isn't enabled :')</noscript></div>
+    <div id="marquee" class="marquee">⠀<noscript>js isn't enabled :')</noscript></div>
 
     <div id="socials">
-        {% for link in links %}
+        {% for link in socials %}
             <a href="{{ link.url }}" rel="noopener noreferrer">
                 <span class="dot"></span> {{ link.text }}
             </a>
@@ -28,13 +22,6 @@ 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">
@@ -74,3 +61,9 @@ js: index
         </div>
     </div>
 </section>
+
+<video id="background" autoplay loop muted playsinline></video>
+<div id="overlay">
+    <span id="fullscreen-background" class="button light">⛶</span>
+    <span id="stop-background" class="button light">⨯</span>
+</div>

package.json

@@ -4,12 +4,6 @@
     100%
         transform: translateX(-100%)
 
-@keyframes scroll-center
-    0%
-        transform: translateX(0)
-    100%
-        transform: translateX(-100%)
-
 @keyframes MULTICOLOR
     0%
         background-color:#9f0

src/index.njk

@@ -60,20 +60,6 @@ code
     padding: 0 5px
     border-radius: 5px
 
-#browser-info
-    color: rgba(255, 255, 255, 0.075)
-    font-size: 24px
-    line-height: 40px
-    position: fixed
-    top: 200px
-    left: 20px
-    z-index: -1
-    text-align: left
-    user-select: none
-
-    span
-        user-select: none
-
 #version-tag
     position: fixed
     bottom: 15px
@@ -83,7 +69,7 @@ code
     user-select: none
     text-decoration: none
     cursor: alias
-    z-index: 9
+    z-index: 2
 
 ::selection
     background-color: colors.$white

src/static/css/_animations.sass

@@ -23,6 +23,7 @@ $dot: colors.$white
     font-family: 'Daft Font', cursive
     font-size: 3em
     user-select: none
+    font-weight: normal
 
 div
     margin-bottom: 1em
@@ -78,18 +79,13 @@ ul
     a:hover &
         background-color: colors.$primary
 
-.marquee
+#marquee
     text-align: center
     white-space: nowrap
-
-    &#marquee-scroll
-        animation: scroll-center 60s linear infinite
-
-    &#marquee-main
-        animation: scroll-right 30s linear infinite
-        filter: drop-shadow(0 0 3px colors.$white)
-        font-style: italic
-        font: 500 1.5em 'Ndot-55', sans-serif
+    animation: scroll-right 30s linear infinite
+    filter: drop-shadow(0 0 3px colors.$white)
+    font-style: italic !important
+    font: 500 1.5em 'Ndot-55', sans-serif
 
 .experience-logo
     width: 1.5em
@@ -153,7 +149,7 @@ video#background
     object-fit: cover
 
     &.fullscreen
-        z-index: 2
+        z-index: 3
         opacity: 1
 
 #overlay

src/static/css/global.sass

@@ -2,7 +2,7 @@ import randomize from './randomize.js';
 
 fetch('/content/data/marquee.json').then(response => response.json()).then(data => {
     let string = randomize(data);
-    let marquee = document.getElementById('marquee-main');
+    let marquee = document.getElementById('marquee');
     marquee.innerHTML = string.text;
     if (string.url && string.url !== '') {
         marquee.addEventListener('click', () => window.open(string.url, '_blank'));

src/static/css/index.sass

@@ -1,5 +1,6 @@
 let fullscreen = document.getElementById('fullscreen-background');
 let overlay = document.getElementById('overlay');
+
 fullscreen.addEventListener('click', () => {
     let videoElement = document.getElementById('background');