src/main.rs

@@ -38,7 +38,6 @@ 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,6 +624,10 @@ video {
   grid-column: span 2 / span 2;
 }
 
+.col-auto {
+  grid-column: auto;
+}
+
 .row-span-3 {
   grid-row: span 3 / span 3;
 }
@@ -632,10 +636,6 @@ video {
   float: inline-start;
 }
 
-.float-right {
-  float: right;
-}
-
 .clear-both {
   clear: both;
 }
@@ -656,8 +656,8 @@ video {
   margin: 1.5rem;
 }
 
-.m-10 {
+.m-3 {
-  margin: 2.5rem;
+  margin: 0.75rem;
 }
 
 .mx-0\.5 {
@@ -695,11 +695,6 @@ video {
   margin-right: auto;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -720,6 +715,11 @@ video {
   margin-bottom: 1.25rem;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -800,14 +800,6 @@ video {
   height: auto;
 }
 
-.h-\[256px\] {
-  height: 256px;
-}
-
-.h-\[320px\] {
-  height: 320px;
-}
-
 .max-h-\[236px\] {
   max-height: 236px;
 }
@@ -832,18 +824,6 @@ video {
   width: 180px;
 }
 
-.w-\[256px\] {
-  width: 256px;
-}
-
-.w-\[320px\] {
-  width: 320px;
-}
-
-.max-w-\[24rem\] {
-  max-width: 24rem;
-}
-
 .max-w-\[32rem\] {
   max-width: 32rem;
 }
@@ -860,6 +840,30 @@ 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%;
 }
@@ -882,22 +886,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;
 }
@@ -910,6 +902,10 @@ video {
   flex-wrap: wrap;
 }
 
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .place-content-center {
   place-content: center;
 }
@@ -942,14 +938,14 @@ video {
   gap: 0.5rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-6 {
   gap: 1.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -982,11 +978,6 @@ 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));
@@ -1002,6 +993,11 @@ 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));
@@ -1034,10 +1030,6 @@ video {
   padding: 0.125rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-3 {
   padding: 0.75rem;
 }
@@ -1046,6 +1038,10 @@ video {
   padding: 1rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1178,11 +1174,6 @@ 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));
@@ -1198,6 +1189,16 @@ 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;
 }
@@ -2068,10 +2069,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;
   }
@@ -2087,22 +2084,19 @@ 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\:block {
+  .md\:mx-0 {
-    display: block;
+    margin-left: 0px;
+    margin-right: 0px;
   }
 
-  .md\:grid {
+  .md\:mx-6 {
-    display: grid;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
   }
 
   .md\:h-16 {
@@ -2117,10 +2111,6 @@ 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;
   }
@@ -2153,11 +2143,6 @@ 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;
@@ -2178,6 +2163,11 @@ article a:visited {
     line-height: 1.75rem;
   }
 
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
   .md\:leading-tight {
     line-height: 1.25;
   }
@@ -2271,10 +2261,19 @@ 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;
   }
@@ -2287,6 +2286,10 @@ 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));
   }
@@ -2304,6 +2307,11 @@ 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;
@@ -2314,6 +2322,11 @@ 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

@@ -1,67 +0,0 @@
-<?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,8 +10,7 @@
 
 {% block content %}
 
-<header class="max-w-read mx-auto md:grid md:grid-cols-[1fr_auto]">
+<header class="max-w-read mx-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">
@@ -33,88 +32,6 @@
       {% 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">