feat: looker

1 files changed, 62 insertions, 31 deletions

diff --git a/layouts/partials/homepage/nav.html b/layouts/partials/homepage/nav.html
index b0e500f..7a4a4bc 100644
--- a/layouts/partials/homepage/nav.html
+++ b/layouts/partials/homepage/nav.html
@@ -6,16 +6,12 @@
   It's not dedicated to one thing, but rather it's about a few things that interest me.
   Below you can find sections which I would describe as online books.
   <a href="/brain-rot">Brain Rots</a> describe movies, books and games.
-  <a href="/bsd"/>BSD</a> and <a href="/emasc">Emacs</a> are quite self-explanatory.
-  I take special fondness of <a href="/star-trek">Star Trek</a>  so it is a section of its own.
-  I also have a dedicated <a href="/blog">blog</a>, but this site is not a blog.
-
-{{- $file := "me.png" }}
-{{- $path := printf "content_images/%s" $file}}
-{{- $img := resources.Get $path }}
-{{- $img1x := $img.Resize "150x webp" }}
-{{- $img2x := $img.Resize "300x webp" }} 
-
+  
+  {{- $file := "me.png" }}
+  {{- $path := printf "content_images/%s" $file}}
+  {{- $img := resources.Get $path }}
+  {{- $img1x := $img.Resize "150x webp" }}
+  {{- $img2x := $img.Resize "300x webp" }} 
   <img
     alt="Michal"
     style="float: right;
@@ -31,11 +27,11 @@
     height="{{ $img1x.Height }}"
     >
 
-{{- $file := "me-grim.png" }}
-{{- $path := printf "content_images/%s" $file}}
-{{- $img := resources.Get $path }}
-{{- $img1x := $img.Resize "150x webp" }}
-{{- $img2x := $img.Resize "300x webp" }} 
+  {{- $file := "me-grim.png" }}
+  {{- $path := printf "content_images/%s" $file}}
+  {{- $img := resources.Get $path }}
+  {{- $img1x := $img.Resize "150x webp" }}
+  {{- $img2x := $img.Resize "300x webp" }} 
   <img
     alt="Grimacing michal"
     style="float: right; max-width: 20%; display: none"
@@ -49,11 +45,11 @@
     height="{{ $img1x.Height }}"
     >
 
-{{- $file := "me-pain.png" }}
-{{- $path := printf "content_images/%s" $file}}
-{{- $img := resources.Get $path }}
-{{- $img1x := $img.Resize "150x webp" }}
-{{- $img2x := $img.Resize "300x webp" }} 
+  {{- $file := "me-pain.png" }}
+  {{- $path := printf "content_images/%s" $file}}
+  {{- $img := resources.Get $path }}
+  {{- $img1x := $img.Resize "150x webp" }}
+  {{- $img2x := $img.Resize "300x webp" }} 
   <img
     alt="Michal full of pain"
     style="float: right; max-width: 20%; display: none"
@@ -67,15 +63,17 @@
     height="{{ $img1x.Height }}"  
     >
   
+  <a href="/bsd"/>BSD</a> and <a href="/emasc">Emacs</a> are quite self-explanatory.
+  I take special fondness of <a href="/star-trek">Star Trek</a>  so it is a section of its own.
+  I also have a dedicated <a href="/blog">blog</a>, but this site is not a blog.
+  
   {{ partial "menu.html" (dict "menuID" "main-nav" "page" .) }}
 
   <script>
-    var kofiLink = document.getElementById('ko-fi');
-    var meNormal = document.getElementById('me-normal');
-    var meGrim = document.getElementById('me-grim');
-    var mePain = document.getElementById('me-pain');
-
-    var out = false;
+    const kofiLink = document.getElementById('ko-fi');
+    const meNormal = document.getElementById('me-normal');
+    const meGrim = document.getElementById('me-grim');
+    const mePain = document.getElementById('me-pain');
 
     meNormal.addEventListener( 'click', function() {
         meNormal.style.display="none";
@@ -84,21 +82,54 @@
         setTimeout(() =>  {
             meNormal.style.display="inline";
             mePain.style.display="none";
-        }, 300)
+        }, 300);
     })
 
     kofiLink.addEventListener( 'mouseenter', function() {
         meNormal.style.display="none";
-        meGrim.style.display="inline"
+        meGrim.style.display="inline";
     });
 
     kofiLink.addEventListener( 'mouseleave', function() {
         setTimeout(() =>  {
-        meNormal.style.display="inline";
-        meGrim.style.display="none";
-        }, 700)
+            meNormal.style.display="inline";
+            meGrim.style.display="none";
+        }, 700);
     });
+
+    {{- $file := "me.png" }}
+    {{- $path := printf "content_images/%s" $file}}
+    {{- $img := resources.Get $path }}
+    {{- $img1x := $img.Resize "150x webp" }}
+    {{- $img2x := $img.Resize "300x webp" }} 
+    const lookFront = () => {
+        meNormal.src="{{ $img1x.Permalink }}";
+        meNormal.srcset="{{ $img1x.Permalink }} {{ $img2x.Permalink }}";
+        setTimeout(lookLeft, 5000);
+    }        
+    {{- $file := "me-right.png" }}
+    {{- $path := printf "content_images/%s" $file}}
+    {{- $img := resources.Get $path }}
+    {{- $img1x := $img.Resize "150x webp" }}
+    {{- $img2x := $img.Resize "300x webp" }}
+    const lookRight = () => {
+        meNormal.src="{{ $img1x.Permalink }}";
+        meNormal.srcset="{{ $img1x.Permalink }} {{ $img2x.Permalink }}";
+        setTimeout(lookFront, 500);
+    }
     
+    {{- $file := "me-left.png" }}
+    {{- $path := printf "content_images/%s" $file}}
+    {{- $img := resources.Get $path }}
+    {{- $img1x := $img.Resize "150x webp" }}
+    {{- $img2x := $img.Resize "300x webp" }}
+    const lookLeft = () => {
+        meNormal.src="{{ $img1x.Permalink }}";
+        meNormal.srcset="{{ $img1x.Permalink }} {{ $img2x.Permalink }}";
+        setTimeout(lookRight, 500);
+    }
+
+    lookFront();
   </script>
 
 </section>