perfected the animation

src/main.rs

@@ -38,6 +38,7 @@ async fn main() {
         .nest_service("/egg-fetcher", ServeDir::new("static/egg-fetcher"))
         .nest_service("/svg", ServeDir::new("static/svg"))
         .nest_service("/config.yml", ServeDir::new("static/resources/config.yml")) // Decap CMS config
+        .nest_service("/resources", ServeDir::new("static/resources"))
         .nest_service("/robots.txt", ServeDir::new("robots.txt"));
 
     #[cfg(debug_assertions)]

src/pages/portfolio.rs

@@ -80,12 +80,12 @@ pub async fn render_portfolio() -> Result<PortfolioTemplate, StatusCode> {
             title: "E-mail address".to_string(),
             svg: "mail".to_string(),
         },
-        ContactLink {
+        // ContactLink {
-            href: "tel:+421-905-372-947".to_string(),
+        //     href: "tel:+421-905-372-947".to_string(),
-            label: "+421 905 372 947".to_string(),
+        //     label: "+421 905 372 947".to_string(),
-            title: "Phone".to_string(),
+        //     title: "Phone".to_string(),
-            svg: "phone".to_string(),
+        //     svg: "phone".to_string(),
-        },
+        // },
         ContactLink {
             href: "https://github.com/michalvankodev".to_string(),
             label: "GitHub".to_string(),

styles/output.css

@@ -624,10 +624,6 @@ video {
   grid-column: span 2 / span 2;
 }
 
-.col-auto {
-  grid-column: auto;
-}
-
 .row-span-3 {
   grid-row: span 3 / span 3;
 }
@@ -636,6 +632,10 @@ video {
   float: inline-start;
 }
 
+.float-right {
+  float: right;
+}
+
 .clear-both {
   clear: both;
 }
@@ -656,8 +656,8 @@ video {
   margin: 1.5rem;
 }
 
-.m-3 {
+.m-10 {
-  margin: 0.75rem;
+  margin: 2.5rem;
 }
 
 .mx-0\.5 {
@@ -695,6 +695,11 @@ video {
   margin-right: auto;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -715,11 +720,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -800,6 +800,14 @@ video {
   height: auto;
 }
 
+.h-\[256px\] {
+  height: 256px;
+}
+
+.h-\[320px\] {
+  height: 320px;
+}
+
 .max-h-\[236px\] {
   max-height: 236px;
 }
@@ -824,6 +832,18 @@ video {
   width: 180px;
 }
 
+.w-\[256px\] {
+  width: 256px;
+}
+
+.w-\[320px\] {
+  width: 320px;
+}
+
+.max-w-\[24rem\] {
+  max-width: 24rem;
+}
+
 .max-w-\[32rem\] {
   max-width: 32rem;
 }
@@ -840,30 +860,6 @@ video {
   max-width: 64rem;
 }
 
-.max-w-20 {
-  max-width: 5rem;
-}
-
-.max-w-60 {
-  max-width: 15rem;
-}
-
-.max-w-\[16rem\] {
-  max-width: 16rem;
-}
-
-.max-w-\[20rem\] {
-  max-width: 20rem;
-}
-
-.max-w-\[24rem\] {
-  max-width: 24rem;
-}
-
-.max-w-\[36rem\] {
-  max-width: 36rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -886,10 +882,22 @@ video {
        break-inside: avoid;
 }
 
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
 .grid-flow-row {
   grid-auto-flow: row;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-\[1fr_auto\] {
+  grid-template-columns: 1fr auto;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -902,10 +910,6 @@ video {
   flex-wrap: wrap;
 }
 
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
 .place-content-center {
   place-content: center;
 }
@@ -938,14 +942,14 @@ video {
   gap: 0.5rem;
 }
 
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -978,6 +982,11 @@ video {
   border-width: 2px;
 }
 
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(130 195 247 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(23 137 224 / var(--tw-border-opacity));
@@ -993,11 +1002,6 @@ video {
   border-color: rgb(203 213 225 / var(--tw-border-opacity));
 }
 
-.border-blue-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(130 195 247 / var(--tw-border-opacity));
-}
-
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@@ -1030,6 +1034,10 @@ video {
   padding: 0.125rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -1038,10 +1046,6 @@ video {
   padding: 1rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1174,6 +1178,11 @@ video {
   color: rgb(11 39 70 / var(--tw-text-opacity));
 }
 
+.text-pink-900 {
+  --tw-text-opacity: 1;
+  color: rgb(119 24 89 / var(--tw-text-opacity));
+}
+
 .text-pink-950 {
   --tw-text-opacity: 1;
   color: rgb(80 2 56 / var(--tw-text-opacity));
@@ -1189,16 +1198,6 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
-.text-blue-800 {
-  --tw-text-opacity: 1;
-  color: rgb(12 73 128 / var(--tw-text-opacity));
-}
-
-.text-pink-900 {
-  --tw-text-opacity: 1;
-  color: rgb(119 24 89 / var(--tw-text-opacity));
-}
-
 .no-underline {
   text-decoration-line: none;
 }
@@ -2069,6 +2068,10 @@ article a:visited {
     grid-template-columns: max-content 1fr;
   }
 
+  .sm\:grid-cols-\[1fr_auto\] {
+    grid-template-columns: 1fr auto;
+  }
+
   .sm\:grid-rows-\[max-content_1fr_max-content\] {
     grid-template-rows: max-content 1fr max-content;
   }
@@ -2084,19 +2087,22 @@ article a:visited {
 }
 
 @media (min-width: 768px) {
+  .md\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
   .md\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
   }
 
-  .md\:mx-0 {
+  .md\:block {
-    margin-left: 0px;
+    display: block;
-    margin-right: 0px;
   }
 
-  .md\:mx-6 {
+  .md\:grid {
-    margin-left: 1.5rem;
+    display: grid;
-    margin-right: 1.5rem;
   }
 
   .md\:h-16 {
@@ -2111,6 +2117,10 @@ article a:visited {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-\[1fr_auto\] {
+    grid-template-columns: 1fr auto;
+  }
+
   .md\:grid-rows-\[masonry\] {
     grid-template-rows: masonry;
   }
@@ -2143,6 +2153,11 @@ article a:visited {
     line-height: 2.5rem;
   }
 
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
   .md\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;
@@ -2163,11 +2178,6 @@ article a:visited {
     line-height: 1.75rem;
   }
 
-  .md\:text-5xl {
-    font-size: 3rem;
-    line-height: 1;
-  }
-
   .md\:leading-tight {
     line-height: 1.25;
   }
@@ -2261,19 +2271,10 @@ article a:visited {
     grid-row-start: auto;
   }
 
-  .xl\:my-4 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
   .xl\:mb-4 {
     margin-bottom: 1rem;
   }
 
-  .xl\:mt-6 {
-    margin-top: 1.5rem;
-  }
-
   .xl\:mt-10 {
     margin-top: 2.5rem;
   }
@@ -2286,10 +2287,6 @@ article a:visited {
     display: grid;
   }
 
-  .xl\:grid-flow-row {
-    grid-auto-flow: row;
-  }
-
   .xl\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2307,11 +2304,6 @@ article a:visited {
          column-gap: 8rem;
   }
 
-  .xl\:text-6xl {
-    font-size: 3.75rem;
-    line-height: 1;
-  }
-
   .xl\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
@@ -2322,11 +2314,6 @@ article a:visited {
     line-height: 1;
   }
 
-  .xl\:text-9xl {
-    font-size: 8rem;
-    line-height: 1;
-  }
-
   .xl\:font-medium {
     font-weight: 500;
   }

templates/icons/m-logo-animated.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="m-logo"
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   fill="none"
+   version="1.1"
+   sodipodi:docname="m-logo-animated.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <defs id="custom-defs">
+    <radialGradient id="bg-gradient" r="91%">
+      <stop id="bg-stop" offset="100%" stop-color="rgba(216, 246, 255, 0)" />
+      <stop offset="100%" stop-color="#32a8eb" />
+    </radialGradient>
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.6089441"
+     inkscape:cx="28.590179"
+     inkscape:cy="341.52833"
+     inkscape:window-width="2560"
+     inkscape:window-height="1371"
+     inkscape:window-x="26"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="m-logo" />
+  <path
+     id="border"
+     d="m 256,477 c -56.348,0 -98.269,-0.006 -129.636,-3.491 C 94.967,470.02 75.025,463.118 61.953,450.047 48.882,436.975 41.98,417.033 38.491,385.636 35.006,354.269 35,312.348 35,256 35,199.652 35.006,157.731 38.491,126.364 41.98,94.9671 48.882,75.0246 61.953,61.9534 75.025,48.8822 94.967,41.9797 126.364,38.4912 157.731,35.0059 199.652,35 256,35 c 56.348,0 98.269,0.006 129.636,3.4912 31.3969,3.4885 51.3394,10.391 64.4106,23.4622 13.0712,13.0712 19.9737,33.0137 23.4622,64.4106 C 476.9941,157.731 477,199.652 477,256 c 0,56.348 -0.006,98.269 -3.4912,129.636 -3.4885,31.397 -10.391,51.339 -23.4622,64.411 -13.0712,13.071 -33.0137,19.973 -64.4106,23.462 C 354.269,476.994 312.348,477 256,477 Z"
+     fill="rgba(216, 246, 255, 0)"
+     stroke="#32a8eb"
+     stroke-width="8"
+     stroke-linejoin="round" />
+  <path
+     d="M347.694 326.566H360V235.186C360 203.566 340.791 185 310.176 185C290.066 185 270.257 193.413 256.15 208.208C248.046 193.123 232.739 185 212.629 185C194.62 185 177.212 191.382 163.405 202.696L161.004 187.031H152V326.566H164.306V212.269C176.912 201.535 193.12 195.153 209.628 195.153C234.84 195.153 249.847 210.528 249.847 236.927V326.566H262.153V235.186C262.153 227.934 261.253 221.262 259.152 215.46C272.058 202.696 289.466 195.153 307.175 195.153C332.687 195.153 347.694 210.528 347.694 236.927V326.566Z"
+     stroke="#32a8eb"
+     fill="rgba(216, 246, 255, 0)"
+     stroke-width="2"
+     id="m-letter" />
+  <path
+     id="border-start"
+     d="m 509.27383,509.07982 c -13.78829,-18.55493 -32.05408,-24.58114 -81.31406,-26.9168 -101.10905,-4.7941 -48.5241,-5.4316 -220.91427,-5.25658"
+     stroke="#32a8eb"
+     stroke-width="8"
+     stroke-linejoin="round"
+     sodipodi:nodetypes="csc" />
+  <path
+     d="M 507.76664,507.59022 C 453.73997,452.69049 121.4145,522.45057 289.19959,354.47858 c 10.11721,-10.12848 19.63171,-17.88383 30.25282,-22.95349 6.77433,-3.23351 15.74106,-4.08485 28.19639,-5.03375"
+     id="m-letter-start"
+     stroke="#32a8eb"
+     stroke-width="2"
+     sodipodi:nodetypes="cssc" />
+</svg>

templates/portfolio.html

@@ -10,28 +10,111 @@
 
 {% block content %}
 
-<header class="max-w-read mx-auto">
+<header class="max-w-read mx-auto md:grid md:grid-cols-[1fr_auto]">
-  <h1 class="px-4 my-2 text-4xl text-blue-950 font-extrabold md:text-6xl xl:text-7xl xl:mb-4 xl:mt-10">Michal Vanko</h1>
+  <div>
-  <h3 class="px-4 my-1 text-2xl text-blue-900 font-bold italic md:text-3xl xl:text-4xl">Software Architect by passion</h3>
+    <h1 class="px-4 my-2 text-4xl text-blue-950 font-extrabold md:text-6xl xl:text-7xl xl:mb-4 xl:mt-10">Michal Vanko</h1>
-  <section id="contact" class="mt-4">
+    <h3 class="px-4 my-1 text-2xl text-blue-900 font-bold italic md:text-3xl xl:text-4xl">Software Architect by passion</h3>
-    <ul class="max-w-[24rem] mx-auto md:mx-6">
+    <section id="contact" class="mt-4">
-      {% for link in contact_links %}
+      <ul class="max-w-[24rem] mx-auto md:mx-6">
-      <li class="my-2">
+        {% for link in contact_links %}
-        <a
+        <li class="my-2">
-          class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
+          <a
-          href="{{link.href}}"
+            class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
-          title="{{link.title}}"
+            href="{{link.href}}"
-        >
+            title="{{link.title}}"
-          <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
+          >
-            <use xlink:href="#{{link.svg}}" />
+            <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
-          </svg>
+              <use xlink:href="#{{link.svg}}" />
-          <span class="text-lg font-semibold print:hidden">{{link.label}}</span>
+            </svg>
-          <span class="hidden print:inline text-sm">{{link.href}}</span>
+            <span class="text-lg font-semibold print:hidden">{{link.label}}</span>
-        </a>
+            <span class="hidden print:inline text-sm">{{link.href}}</span>
-      </li>
+          </a>
-      {% endfor %}
+        </li>
-    </ul>
+        {% endfor %}
-  </section>
+      </ul>
+    </section>
+  </div>
+  <aside id="logo-container" class="hidden md:block h-[320px] w-[320px] m-10">
+    <style>
+      #logo-container svg {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+    {% include "icons/m-logo-animated.svg" %}
+    <script src="/resources/anime.min.js"></script>
+    <script>
+      var borderTimeline = anime.timeline({
+        duration: 2000,
+        easing: 'easeInOutSine',
+      })
+      
+      borderTimeline.add({
+        targets: '#m-logo #border-start',
+        strokeDashoffset: [anime.setDashoffset, -310],
+        duration: 2000,
+        easing: 'easeOutExpo'
+      }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter-start',
+        strokeDashoffset: [anime.setDashoffset, -447.4],
+        easing: 'easeOutExpo',
+        duration: 2000,
+       }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #border',
+        strokeDashoffset: [anime.setDashoffset, 0],
+        easing: 'easeInOutSine',
+        duration: 2000,
+        complete: (animation) => {
+          //debugger;
+          const target = animation.animatables[0].target
+          target.setAttribute("fill", "url('#bg-gradient')")
+          var bgAnimationTimeline = anime.timeline()
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "0%",
+            stopColor: "rgba(216, 246, 255, 1)",
+            easing: 'easeInQuint',
+            duration: 123,
+           }) 
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "100%",
+            easing: 'easeOutExpo',
+            duration: 333,
+           }) 
+        }
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter',
+        strokeDashoffset: [anime.setDashoffset, 0],
+        easing: 'easeInOutSine',
+        duration: 1800,
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter',
+        easing: 'easeInOutSine',
+        duration: 333,
+        fill: "#32a8eb",
+        strokeWidth: "0",
+       })
+      // background
+      /*borderTimeline.add({
+        targets: '#m-logo #border',
+        easing: 'easeInCirc',
+        fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
+        duration: 1500,
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #border',
+        easing: 'easeInCirc',
+        fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
+        duration: 1500,
+       }, 160) */
+
+   </script>
+  </aside>
 </header>
 
 <section id="portfolio-body" class="article-body">