animated logo

justfile

@@ -53,6 +53,7 @@ clean:
 ssg:
 	- wget --no-convert-links -r -p -E -P dist --no-host-directories 127.0.0.1:{{port}}
 	- wget --no-convert-links --content-on-error -p -E -P dist --no-host-directories 127.0.0.1:{{port}}/not-found
+	- wget --no-convert-links -p -E -P dist --no-host-directories 127.0.0.1:{{port}}/showcase/m-logo-svg
 	find generated_images/ -name "*_og*" -exec cp --parents {} dist/ \;
   
 # Preview server

src/main.rs

@@ -58,3 +58,4 @@ async fn main() {
 //
 // TODO view page transitions
 // TODO cookbook
+// TODO remove m-logo-svg from justfile and mention it in some article!!! WRITE SOME NEW ARTICLES

src/pages/animated_logo.rs

@@ -0,0 +1,10 @@
+use askama::Template;
+use axum::http::StatusCode;
+
+#[derive(Template)]
+#[template(path = "assets/animated_logo.html")]
+pub struct AnimatedLogoTemplate {}
+
+pub async fn render_animated_logo() -> Result<AnimatedLogoTemplate, StatusCode> {
+    Ok(AnimatedLogoTemplate {})
+}

src/pages/mod.rs

@@ -1,4 +1,5 @@
 pub mod admin;
+pub mod animated_logo;
 pub mod blog_post_list;
 pub mod blog_post_page;
 pub mod broadcast_list;

src/router.rs

@@ -1,11 +1,11 @@
 use crate::{
     feed::render_rss_feed,
     pages::{
-        admin::render_admin, blog_post_list::render_blog_post_list,
+        admin::render_admin, animated_logo::render_animated_logo,
-        blog_post_page::render_blog_post, broadcast_list::render_broadcast_post_list,
+        blog_post_list::render_blog_post_list, blog_post_page::render_blog_post,
-        contact::render_contact, index::render_index, not_found::render_not_found,
+        broadcast_list::render_broadcast_post_list, contact::render_contact, index::render_index,
-        portfolio::render_portfolio, project_list::render_projects_list,
+        not_found::render_not_found, portfolio::render_portfolio,
-        showcase::egg_fetcher::render_egg_fetcher,
+        project_list::render_projects_list, showcase::egg_fetcher::render_egg_fetcher,
     },
 };
 use axum::{extract::MatchedPath, http::Request, routing::get, Router};
@@ -23,6 +23,7 @@ pub fn get_router() -> Router {
         .route("/broadcasts/:post_id", get(render_blog_post))
         .route("/contact", get(render_contact))
         .route("/showcase", get(render_projects_list))
+        .route("/showcase/m-logo-svg", get(render_animated_logo))
         .route("/showcase/:project_slug", get(render_egg_fetcher))
         .route("/portfolio", get(render_portfolio))
         .route("/admin", get(render_admin))

styles/output.css

@@ -620,6 +620,10 @@ video {
   size-adjust: 92%;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -632,10 +636,6 @@ video {
   float: inline-start;
 }
 
-.float-right {
-  float: right;
-}
-
 .clear-both {
   clear: both;
 }
@@ -644,6 +644,10 @@ video {
   margin: 0.25rem;
 }
 
+.m-10 {
+  margin: 2.5rem;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -656,10 +660,6 @@ video {
   margin: 1.5rem;
 }
 
-.m-10 {
-  margin: 2.5rem;
-}
-
 .mx-0\.5 {
   margin-left: 0.125rem;
   margin-right: 0.125rem;
@@ -796,18 +796,14 @@ video {
   height: 240px;
 }
 
-.h-auto {
-  height: auto;
-}
-
-.h-\[256px\] {
-  height: 256px;
-}
-
 .h-\[320px\] {
   height: 320px;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .max-h-\[236px\] {
   max-height: 236px;
 }
@@ -832,10 +828,6 @@ video {
   width: 180px;
 }
 
-.w-\[256px\] {
-  width: 256px;
-}
-
 .w-\[320px\] {
   width: 320px;
 }
@@ -882,22 +874,10 @@ 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;
 }
@@ -2068,10 +2048,6 @@ 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;
   }

templates/assets/animated_logo.html

@@ -0,0 +1,69 @@
+    {% include "icons/m-logo-animated.svg" %}
+    <script src="/resources/anime.min.js"></script>
+    <script>
+      var svg = document.getElementById("m-logo")
+      svg.setAttribute("visibility", "visible");
+      var borderTimeline = anime.timeline({
+        duration: 2000,
+        easing: 'easeInOutSine',
+      })
+      
+      borderTimeline.add({
+        targets: '#m-logo #border-start',
+        strokeDashoffset: [anime.setDashoffset, -310],
+        duration: 2000,
+        easing: 'easeOutExpo',
+        begin: (animation) => {
+          const target = animation.animatables[0].target
+          target.setAttribute("visibility", "visible")
+        }
+      }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter-start',
+        strokeDashoffset: [anime.setDashoffset, -447.4],
+        easing: 'easeOutExpo',
+        duration: 2000,
+        begin: (animation) => {
+          const target = animation.animatables[0].target
+          target.setAttribute("visibility", "visible")
+        }
+       }, 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",
+       })
+   </script>

templates/icons/m-logo-animated.svg

@@ -11,6 +11,7 @@
    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"
+   visibility="hidden"
    xmlns:svg="http://www.w3.org/2000/svg">
   <defs
      id="defs1" />
@@ -57,11 +58,13 @@
      stroke="#32a8eb"
      stroke-width="8"
      stroke-linejoin="round"
+     visibility="hidden"
      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"
+     visibility="hidden"
      sodipodi:nodetypes="cssc" />
 </svg>