add basic block

site/layouts/index.html

@@ -1,9 +1,16 @@
 {{ define "main" }}
 
-<h1 class="text-3xl">Hugo with Webpack, Sass, and PostCSS</h1>
 
-<h3>Hooray 🎉 - you've built this with <a href="https://github.com/netlify/victor-hugo">Victor-Hugo</a>!</h3>
+<section class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
-
+  {{ partial "block.html" . }}
-<a href="{{ "/tech" | relURL }}">Check out the tech</a>
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+</section>
 
 {{ end }}

site/layouts/partials/block.html

@@ -0,0 +1,5 @@
+  <div class="js-block c-block relative bg-gray-300 w-64 h-64 overflow-hidden">
+    <div class="c-block__bg bg-gray-600 w-full h-full"></div>
+    <div class="c-block__img absolute w-full h-full top-0 left-0 bg-cover bg-center" style="background-image: url(/img/img.jpg)">
+    </div>
+  </div>

src/css/main.css

@@ -1,11 +1,9 @@
 @tailwind base;
-
 @tailwind components;
-
 @tailwind utilities;
 
 /*
-  You can use import statements to include partials:
+You can use import statements to include partials:
  */
 // @import "imports/reset.css";
 
@@ -14,30 +12,48 @@ body {
   height: 100%;
 }
 
-body {
+.c-block {
-  font-size: calc(10px + 1vmin);
+  $duration: 1s;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  $delay: 0.3s;
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
-  display: flex;
+  > .c-block__bg {
-  flex-direction: column;
+    will-change: transform;
-  align-items: center;
+    transform-origin: 100% 100%;
-  justify-content: center;
+    transition: transform $duration;
-  text-align: center;
+    transform: scale3d(1, 1, 1);
-  background-color: #282c34;
+  }
-  color: white;
-}
 
-a {
+  &.state-1 > .c-block__bg {
-  color: pink;
+    transform-origin: 100% 100%;
-  text-decoration: none;
+    transition: transform $duration;
-}
+    transform: scale3d(0.5, 1, 1);
+  }
 
-.content {
+  &.state-2 > .c-block__bg {
-  padding: 0 32px;
+    transform-origin: 100% 100%;
+    transform-origin: 100 100;
+    transition: transform $duration;
+    transform: scale3d(0.5, 0.5, 1);
+  }
+
+  > .c-block__img {
+    will-change: opacity, transform;
+    transform-origin: 0 0;
+    transition: opacity $duration $delay ease-in, transform $duration;
+    opacity: 1;
+    transform: none;
+  }
+
+  &.state-1 > .c-block__img {
+    transition: opacity $duration $delay ease-out, transform $duration;
+    opacity: 0;
+    transform: translate(50%, 0) scale(1.3);
+  }
+
+  &.state-2 > .c-block__img {
+    opacity: 0;
+    transform: translate(50%, 50%) scale(2);
+  }
 }
 
 // vim:set filetype=scss:

src/index.js

@@ -2,5 +2,22 @@
 
 import "./css/main.css";
 
-// Say hello
+window.addEventListener("DOMContentLoaded", () => {
-console.log("🦊 Hello! Edit me in src/index.js");
+  const TRANSITION_DURATION = 1000;
+  const INTERVAl = TRANSITION_DURATION + 600;
+  const blocks = document.querySelectorAll(".js-block");
+
+  if (blocks) {
+    Array.prototype.forEach.call(blocks, (block) => {
+      let state = 0;
+      setInterval(() => {
+        block.classList.remove(`state-${state}`);
+        state = state < 2 ? state + 1 : 0;
+        if (state > 0)  {
+          block.classList.add(`state-${state}`);
+        }
+      }, INTERVAl);
+    });
+  }
+});
+