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,7 +10,8 @@
 
 {% block content %}
 
-<header class="max-w-read mx-auto">
+<header class="max-w-read mx-auto md:grid md:grid-cols-[1fr_auto]">
+  <div>
     <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>
     <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>
     <section id="contact" class="mt-4">
@@ -32,6 +33,88 @@
         {% endfor %}
       </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">